Sass Guidelines

“Syntactically Awesome Style Sheets”

As name suggests they improve CSS syntax by extending its features. It simplifies development by managing CSS changes easier. It is a preProcessor for CSS means all Sass files are compiled into one css file once its ready.

In application while writing any classes or modifying css, Sass syntax and rules are followed  as below –

• All related selectors on the same line; unrelated selectors on new lines
• An Opening brace (){ spaced from the last selector by a single space
• Each declaration on its own new line
• A space after the colon (:)
• A trailing semi-colon (;) at the end of all declarations
• The closing brace (}) on its own new line
• A new line after the closing brace }.
• Local variables should be declared before any other declarations, which should be then spaced from further declarations by a new line
• Nested selectors should always come after a new line
• Mixin calls with @content coming after any nested selector
• No new line before a closing brace (})
• When dealing with lengths, a 0 value should never ever have a unit. // $len: 0

Terminologies in Sass

• Variables

Variables stores the information which can be used again and again at many places. It increases reusability, easy way to store commonly used variables to keep at one place. $ sign is used to create variable.
$font-family-body: Arial, sans-serif;

• Mixins

It acts like a function which can be used in another CSS class. Even we can pass value to make mixin more powerful. To create a mixing we use @mixin and to include it we use   @include syntax as below

// specify left and right margin
 @mixin margin-lr($m) {
    margin-left: $m !important;
    margin-right: $m !important;
}
//use mixin
@include margin-lr(auto);
@include margin-lr(14px);

 

• Extend

We can extend set of one css properties from one selection to next selector using @extend feature. This is one of the important scss feature which allows to reuse earlier selector properties at other places.

.pull-right {
     float: right;
  }

.add-button {
        @extend .pull-right;
        width: 75%;
   }

• Operators

In CSS Operators feature increases css features by allowing math functions to  be used like + – / * % . The multiplication ( * ) and division ( / ) operators have a higher priority compared  to the addition ( + ) and subtraction operators ( – ) ,we can use comparison operations also  less than, less than or equal to, greater than, greater than or equal to.

//arithmetic operators
	$input-width-xsmall:   $padding-xsmall *3; 

	// comparison operators
	$padding-left: 20px;

h2 {
    @if($padding-left <= 20px) {
        padding-left: $padding;
    } @else {
        padding-left: $padding-left / 2;
    }
}

• Import

  Just like one page can be included in another page. We can include one Sass file in another Sass file. This makes code more flexible and application modules wise different Sass files can be prepared. Also common grouping of Sass files can be collected at one place. @import with filename used to import file.

  Ex: If we have prepared two scss files as home.scss, app_variables.scss

  // include scss in current css file
  
  @import "app_variables";
  @import "home";
  ….
  
  

• Nesting

  CSS code can be managed to by making it more clean separated. It add visual understanding to code blocks .

  .navList {
          border-bottom: 0;
          background-color: transparent;
          .linkbutton {
              font-size: .9em;
              font-weight: bold;
          }
          .navlinks-info {
              padding: 1.5em;
          }
          .addLocationForm {
              padding: 0;
        }
  }
  

• Referencing Parent Selectors: (&)

  The (&) is very useful feature in Sass . It is used when nesting. The & always refers to the parent selector when nesting. Ex:

  .parent-class {
    &.child-class {}
  }
  
   .navList {
              text-align: left;
              &.navlinks-info {
                 &:before {
                      content: '';
                      display: inline-block;
                      height: 100%;
                      vertical-align: middle;
                  }
              }
  }
  

• Code Snippet for Sass file

@import "../../../styles/mixins/common-mixins";

my-profile {

  display: block;

  .data-select .row > div:first-child .form-group {
    margin-bottom: 0;
  }

  .control-label {
    color: $app-color-blue-primary;
    font-size: $app-font-size-small;

    @include media-tablet-min {
      font-size: $app-font-size-default;
    }
  }

  .update-btn {
    width: 100%;
    line-height: 2.2em;
    margin-top: 1em;
  }

}

---

Written by Monika Kumbhar, Sr. Software Engg. at zCon Solutions