Compass and SASS

In the past few days, I learned how to use Compass and SASS. Compass and SASS is a big help for a web developer when they are working with thier CSS. It enables you to create variables, create a mixins, the nested rules, creating sprites and one of the best thing for me is that you can create many CSS file and combine them to 1 CSS file that will be link to the HTML file. It make your CSS files more cleaner and more easier to change. It is a big help for a web developer, especially when they are working with big website.

Compass is an application that uses SASS and convert it to a .CSS file. SASS(Syntactically Awesome StyleSheets) allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. It also helps keep large stylesheets well-organized and more easy to modify.

SASS features:

– NESTING RULE

In regular CSS you cannot do this type of rule. It will not be accepted in .CSS file, you will get an error. With the help of SASS you can create this type of rule.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#content{
  background-color: black;
  width: 100%;
  height: 100%;
  p{
      color: #FF0000;
      font-family: 'Arial', Tahoma;
      font-weight: bold;
      font-size: 14px;
  }
  .content-images{
      width: 200px;
      height: 200px;
  }
}

When the Compass convert it to a .CSS file, this will be the ouput.

1
2
3
4
5
6
7
8
9
10
11
12

#content {
  background-color: black;
  width: 100%;
  height: 100%; }
  #content p {
    color: #FF0000;
    font-family: 'Arial', Tahoma;
    font-weight: bold;
    font-size: 14px; }
  #content .content-images {
    width: 200px;
    height: 200px; }

– VARIABLES

As you can see with the code below, i use 3 variables that holds a certain value and the variables will be the one to place in the CSS property value. Variables in SASS is a big help because if your CSS files are having thousands of lines and you want to change the text color and hundred of them are using a red color all you need to do is to find them all, but with the help of Variables all you need to do is change the value of the variable that holding a red text color.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$bgColor: #000;
$textColor: #FF0000;
$font: 'Arial', Tahoma;

#content{
  background-color: $bgColor;
  width: 100%;
  height: 100%;
  p{
      color: $textColor;
      font-family: $font;
      font-weight: bold;
      font-size: 14px;
  }
  .content-images{
      width: 200px;
      height: 200px;
  }
}

– MIXINS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@mixin fontStyle{
  font:{
      weight: bold;
      family: 'Arial', Tahoma;
      size: 14px;
  }
}

#content{
  background-color: black;
  width: 100%;
  height: 100%;
  p{
      color: #FF0000;
      @include fontStyle;
  }
  .content-images{
      width: 200px;
      height: 200px;
  }
}

–SASS Final Output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$bgColor: #000;
$textColor: #FF0000;

@mixin fontStyle{
  font:{
      weight: bold;
      family: 'Arial', Tahoma;
      size: 14px;
  }
}

#content{
  background-color: $bgColor;
  width: 100%;
  height: 100%;
  p{
      color: $textColor;
      @include fontStyle;
  }
  .content-images{
      width: 200px;
      height: 200px;
  }
}

– CSS FINAL OUTPUT

1
2
3
4
5
6
7
8
9
10
11
12

#content {
  background-color: black;
  width: 100%;
  height: 100%; }
  #content p {
    color: red;
    font-weight: bold;
    font-family: 'Arial', Tahoma;
    font-size: 14px; }
  #content .content-images {
    width: 200px;
    height: 200px; }

With the help of Compass and SASS modifying CSS property if much easier.

That’s all for today! Thanks for reading! – @AJ