Syntactically Awesome Style Sheets, or SASS, is an extension language for CSS (Cascading Style Sheets) that offers unmatched power, functionality, and organization when compared to CSS. Its monumental power comes from providing a more elegant syntax for CSS, as well as offering groundbreaking features.

Advantages of SASS:

• Concise style sheets
• Modular and structured code, leads to better performance and easy maintenance
• Fewer HTTP Requests by using @Import attribute
• Features that don’t exist in CSS, like mixins and extend

Limitations:

• Time-consuming development
• Demands experience to fully understand the framework

What makes SASS Awesome?

SASS is awesome because it allows the use of features such as variables, nested rules, mixins, and inline imports for customization. Syntactically Awesome Style Sheets take advantage of the repetitive nature of style sheets, enabling the user to write DRY code that will execute flawlessly and be organized in hierarchal view.

There are many frameworks built with SASS such as, Compass, Bourbon and Susy just to name a few.

Coding with SASS:



• Nested code gives an organized hierarchy view:

   

  nav
   ul
   margin: 0
   padding: 0
   list-style: none

  li
   display:inline-block

  a
    display: block
    padding: 6px 12px  
    text-decoration:none



• Mixins code can make groups of css declarations, which can be reused throughout the entire site:

   

  =border-radius($radius)
   -webkit-border-radius: $radius
   -moz-border-radius: $radius
   -ms-border-radius: $radius
  border-radius: $radius

  .box
  +border-radius(10px)



• Variables code uses the ‘$’ symbol to define variables in CSS, and enables faster changes in theme colors and typography:
  
  

  $font-stack: Helvetica, sans-serif
  $primary-color: #333

  body
    mfont: 100% $font-stack
    mcolor: $primary-color



• Extend code can share repeated CSS properties across CSS selectors:

   

  .message
    border: 1px solid #ccc
    padding: 10px
    color: #333

  .message
    border: 1px solid #ccc
    padding: 10px
    color: #333

  .success
    @extend .message
    padding: green

  .error
    @extend .message
    padding: red

  .warning
    @extend .message
    padding: yellow

Summary

SASS is a strong extension language to use with CSS. By providing the user with the bountiful features mentioned above, a skilled developer can take control of complicated processes. While possibly time consuming to master, SASS makes CSS awesome by creating code that is easier to manipulate, manage, and maintain.

Call us at 484-892-5713 or Contact Us today to learn more about how your business can take advantage of these emerging technologies.