Scss trick

Lately I had to develop the front-end part of a mobile app, the mockup was challenging and I had to figure out a few tricks for CSS.

But before sharing these tricks with you, I’ll make a short introduction to some SCSS functionalities.

Variables

SCSS allows the use of variables, which can be declared prepending the $ sign.
What are exactly variables? They are basically a container where you can put a value to be used in different parts of the project.

Example

$primary-color : #790f26;

$padding-default : 0 15px 10px;

.class {
  color   : $primary-color;
  padding : $padding-default;
}

Nesting

In SCSS it is possible to nest classes one within the other, just like we do in html.
We can’t do this with plain CSS, SCSS allows us to follow the html structure closely and thus write our styles more easily.

Example

<div class="wrap-image">
  <img src="img/home/service-background.jpg" class="img-istructions">
  <p class="text-image">
  Example text <span>example</span>
  </p>
</div>

.wrap-image {

  .img-istructions {
    ...
  }

  .text-image {
    ...

    span {
      ...
    }
  }
}

Mixin

A mixin allows for groups of CSS declarations that you want to reuse throughout the site.

Example

@mixin translate ($x, $y) {
  -webkit-transform : translate($x, $y);
  -ms-transform     : translate($x, $y);
  transform         : translate($x, $y);
}

.class {
  @include translate(-50%, -50%);
}

//transform in css 
.class {
  -webkit-transform : translate(-50%, -50%);
  -ms-transform     : translate(-50%, -50%);
  transform         : translate(-50%, -50%);
}

@mixin transition($property, $duration, $easing) { 
  -webkit-transition: $property $duration $easing; 
  -moz-transition: $property $duration $easing; 
  -ms-transition: $property $duration $easing; 
  -o-transition: $property $duration $easing; 
  transition: $property $duration $easing; 
}

.class {
  @include transition(all, 0.3s, ease-in-out);
}

//transform in css  
.class {
  -webkit-transition: all 0.3s ease-in-out; 
  -moz-transition: all 0.3s ease-in-out; 
  -ms-transition: $all 0.3s ease-in-out; 
  -o-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out; 
}

Import

To keep the code more manageable SCSS has an option to import that serves to divide SCSS in more files, and then concatenate them to run a single file.

Example

//File _menu.scss
nav {
  margin: 0;
  padding: 0;
}

//File application.scss

@import 'menu';

body {
  font             : 10px Arial, sans-serif;
  background-color : #303030;
}

Css file compiled

nav {
  margin: 0;
  padding: 0;
}

body {
  font             : 10px Arial, sans-serif;
  background-color : #303030;
}

This was a brief introduction to SCSS.
Now some nifty Tricks.

Footer Sticky

First there is the question of the list footer Sticky

Example

image

SCSS

$footer-height : 200px;

// Set container
.container {
  min-height : 100%;
  position   : relative;
  padding    : 0;

  // Set content
  .content {
    left           : 0;
    height         : 100%;
    width          : 100%;
    position       : relative;
    padding-bottom : $footer-height;
  }

  // Set footer
  .footer {
    position : absolute;
    bottom   : 0;
    left     : 0;
    width    : 100%;
    height   : $footer-height;
  }
}

The trick is to set the container in position absolute and min-height 100%,
for the container instead height is set to 100% and padding-bottom set height of the footer.

Arrow tab

The second trick  is to add the tab indicator to an arrow as below

Example

image

SCSS

$color-gray-smoke : #303030;

.arrow_box {
  position   : relative;
  background : $color-gray-smoke;

  &:after {
    // position
    top              : 100%;
    left             : 50%;

    border           : solid transparent;
    content          : " ";
    height           : 0;
    width            : 0;
    position         : absolute;

    // Color
    border-color     : rgba(48, 48, 48, 0);
    border-top-color : $color-gray-smoke;

    // size arrow
    border-width     : 15px;
    margin-left      : -15px;
  }
}

In this project we used the Bootstrap framework, so the styles mentioned above should have the following classes to make sure that when you click on the arrow tab they get active.

.nav-tabs {
  li.active {
    ...
    ...
    &:after {
      ...
      ...
    }
  }
}

Data attribute

The third round is to crop images and add a number to the images after the text with the data attribute

Example

image

HTML

<div class="wrap-image">
  <img src="img/home/service-background.jpg" class="col-xs-12 img-responsive img-istructions text-center">
  <span class="text-center col-xs-12 text-box text-round-image" data-number=“1">
  Example text
  </span>
</div>

SCSS

@mixin translate ($x, $y) {
  -webkit-transform : translate($x, $y);
  -ms-transform     : translate($x, $y);
  transform         : translate($x, $y);
}

.wrap-image {
  position   : relative;
  display    : table;
  width      : 300px;
  height     : auto;
  text-align : center;
  color      : #fff;

  .image {
    // Css cropped circle image
    border-radius: 50%;
  }

  .text-round-image {
    // border top and bottom
    border       : 1px solid #fff;
    border-style : solid none;

    display      : table-cell;
    font-size    : 2em;

    // position
    top          : 50%;
    position     : absolute;
    @include translate(-50%, 0);        

    width        : 290px;
  }

  .text-box:after {
    // data attribute
    content       : attr(data-number);

    // position
    position      : absolute;
    top           : 110%;
    text-align    : center;
    display       : block;
    left          : 50%;
    @include translate(-50%, 0);

    // Size
    height        : 38px;
    width         : 38px;

    // border
    border        : 2px solid #fff;
    border-radius : 50%;

    // Fonts
    font-size     : 1.6em;
    font-weight   : normal;
    line-height   : 1.1em;

  }
}

Vertical Align

The fourth is to center text vertically

image

HTML

<div class="element">
  <p>Example text</p>
</div>

SCSS

.element {
  display    : table;
  height     : 250px;
  width      : 250px;
  background : black;
  margin     : 20px;
  text-align : center;

  p {
    display        : table-cell;
    margin         : 0;
    color          : white;
    vertical-align : middle;
  }
}

Thanks for reading. 

Leave a Reply

wpDiscuz