Categories

(83)
(69)
(8)
(34)
(74)
(149)

SASS (Syntactically Awesome StyleSheets)

29.02.2012
SASS (Syntactically Awesome StyleSheets)
Author:

SASS — is a meta-language which is based on CSS and is intended to increase the level of CSS code abstraction and Cascading Style Sheets files simplification. 

SASS provides web developer with more options and offers more freedom while writing CSS. In fact, it resembles a programming language that's nested inside the CSS. You can use something that looks like the functions of the variables and have your code logically structured (structured styles and classes).

SASS is furnished with two syntaxes. The new basic syntax is known as "SCSS" (SassyCSS), enhanced syntax CSS3. This means that every current CSS3 style is also valid in SCSS. SCSS files have the extension ". scss".

The second one is an older syntax that's known as SASS. With its HAML conciseness it was intended for those who prefer brevity (cf. CSS). Instead of braces and semicolons, padding is being used. SASS syntax is not fixed at the moment, but it's going to further be supported. Files with SASS syntax have the extension ". Sass".

 SASS vs SCSS

//SASS
 .content
   border: 1px solid red
   color: black
 
 .border
   padding: 10px
   margin: 10px  
//SCSS
 .content {
   border: 1px solid red;
   color: black;
 }
 
 .border {
   padding: 10px;
   margin: 10px;
  } 

Personally, I do recommend using SCSS, because it seems to be more readable and digestible. The SCSS syntax appears to have the same exterior as CSS. But it's furnished with numerous useful features that have been added to make the coder's  life way easier.

SASS features

  • Variables 
  • Nesting 
  • Mixins 
  • Selector Inheritance

Variables

Still applying the same color everywhere? Need some calculations of the height and width or text size to be done? SASS supports both variables, and the basic mathematical operations as well as many useful functions (more here).

$color = #000;
$spacing = 10px;
.content {
  border: 1px solid red;
  color: $color;
}
.border {
  padding: $spacing;
  margin: $spacing;
}

Nesting

SASS is capable of skipping the repetition via nesting selectors into one another. Same thing does work with properties.

.content {
  margin: 2em 0;
  p {
    text-align: right;
    font-size: 14px;
  }
}
 
body{
  color: $color
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Mixing 

Mixing facilitate reuse of the whole pieces of CSS as well as of their selectors and properties, hence they are still more rewarding than the variables. You can even specify the arguments.

To put it roughly, mixing are the CSS "feature".

@mixin table {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
 
@mixin left($dist) {
  float: left;
  margin-left: $dist;
}
 
#data {
  @include left(10px);
  @include table;
}

Selector Inheritance 

Sass can inherit styles that have been applied to a serial one selector without duplication of CSS properties.

.error {
  border: 1px #f00;
  background: #fdd;
}
 
.warning {
  font-size: 1.3em;
  font-weight: bold;
}
 
.badError {
  @extend .error;
  border-width: 3px;
}

Compiling SASS to CSS

Just in case, you have files (SCSS or SASS) in which you write on Sass. Browsers can't read this kind of syntax. Browsers can only 'understand' CSS and, therefore, we need to convey our styles as being formatted in CSS. For this, we have to have our sass / scss files compiled. Make sure you are using a relevant framework, in which case Compass will do nicely for you.

Compass settings require a Ruby, therefore, if you have not yet installed it on your computer, just refer to this install.

The installation and usage Compass

To install the Compass, follow the following command in the console:
1) gem update — system

2) gem install compass 
When the Compass has been set, you need to create a compass-project: 
compass create <path-to-project>
Compass SCSS is into creating files in which you can write your styles and add your own. SCSS files. To have the compiler launched, the compass watch command is activated. Compass has lots of great opportunities. For more detailed info on all Compass possibilities plus the examples refer to their official website Compass.

6 votes, Rating: 5

Read also

1

When attending an internet-shop any experienced internet user can easily figure out what he's dealing with – cheap box decision or professional shop with deep development.

The purpose of the...

2

For deleting unnecessary bytes from image files Smush.it uses image optimization methods that are specific for each format, which means that images are optimized without...

3

Fusion theme is oriented toward integration with Skinr module, and in order to use all its capabilities one should have the 2nd branch of Skiner installed + module Dialogue (for UI), though, for...

4

Any modern internet site, whether it’s a startup website or a cool internet-shop, is a sophisticated product and its development is a sophisticated and painstaking task, too, that involves a lot...

Subscribe to our blog updates