Today's Question:  What does your personal desk look like?        GIVE A SHOUT

Short SASS tutorial

  Peter        2012-06-22 08:38:18       9,194        0    

If you learned CSS before, you should know that CSS is not a programming language. You can use it to design webpage style, but you cannot use it for programming, i.e, CSS is what designer uses, not what programmer uses. Programmer may think that CSS is very troublesome, it has no variables, no conditional statements, it just allows line-by-line description of HTML elements



Luckily, CSS preprocessor appear which makes CSS programmable. The general idea of CSS preprocessor is using a programming language to design the website style, and then convert it to CSS files.

Among different CSS preprocessors, my favorite one SASS, it has many advantages.  I now write a simple tutorial to use SASS, the purpose is to let you lean SASS the simple way.

1. What is SASS?

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

2. Installation and use

2. 1 . Installation

SASS is written with Ruby, but its syntax is different from Ruby, if you don't know about Ruby, it's totally fine. You only need to install Ruby first before you install SASS. To install Ruby, please refer this page.

We now assume you have Ruby installed already, next type the following command.

gem install sass

then, you can use SASS now.

2.2. Use

SASS files are simply general plain text files, you can put CSS syntax directly in SASS files, the extension name of SASS files is .scss which means Sassy CSS.

You can convert.scss file to CSS file (assume file name is test.scss) by typing following command

sass test.scss

If you want to save the output as a CSS file, type

sass test.scss test.css

SASS provides four options of output style.
  • nested : Nested style is the default Sass style, because it reflects the structure of the CSS styles and the HTML document they’re styling. Each property has its own line, but the indentation isn’t constant. Each rule is indented based on how deeply it’s nested. For example:
  • expanded: Expanded is a more typical human-made CSS style, with each property and rule taking up one line. Properties are indented within the rules, but the rules aren’t indented in any special way.
  • compact: Compact style takes up less space than Nested or Expanded. It also draws the focus more to the selectors than to their properties. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them.
  • compressed: Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It’s not meant to be human-readable.

In production, we usually use the last one : compressed.

3. Syntax

You can run all examples below in the online converter provided by SASS official website.

3.1 Variables

SASS allows use of variables, all variables start with $ which is similar to PHP.

        $blue : #1875e7; 
  div {
   color : $blue;
  }

If you want to embed the variable in a string, you need to put the variable into #{}.

        $side : left;
  .rounded {
    border-#{$side}-radius: 5px;
  }

3.2 Calculation

SASS allows expressions in code.

        body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

3.3 Nesting

SASS allows selector nesting. See below codes.

        div h1 {
    color : red;
  }

You can write it as

       div {
    hi {
      color:red;
    }
  }

in SASS.

Properties can also be nested.

        p {
    border-color: red;
  }

You can write it as

        p {
    border: {
      color: red;
    }
  }

Note : don't forget the colon after border.

3.4 Comment

SASS has two kinds of comment style.

The standard CSS comment : /* comment */, it will be left in the converted file

Single line comment: //comment, it will be left in only the SASS source file, not in the converted fil.

4. Reuse of codes

4.1 Inheritance

SASS allows a selector to extend another selector. For example, if having class1

        .class1 {
    border: 1px solid #ddd;
  }

If class2 wants to extend class1, use @extend command

       .class2 {
    @extend .class1;
    font-size:120%;
  }

4.2 Mixin

Mixin similar to macro in C, it is the code block which can be reused. Use @mixin to define a code block.

       @mixin left {
    float: left;
    margin-left: 10px;
  }

Use @include command to use the mixin.

        div {
    @include left;
  }

The power of mixin is that it can have parameters and default values.

       @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

You can add parameters as you need when you use it

        div {
    @include left(20px);
  }

4.3 Color functions

SASS provides some built in color functions to generate color code.

        lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

4.4 Import external file

@import command can be used to import external file

       @import("path/filename.scss");

if the file you want to import is .css file, it eqquals to the import command in CSS.

@import "foo.css";

5. Advanced

5.1 Conditional statements

@if

        p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }

And @else

        @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

5.2 Loop

SASS supports for loop

       @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

and while loop

        $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

and @each which is similar to for

       @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

5.3 Self defined function

SASS allows you to write your own functions

       @function double($n) {
    @return $n * 2;
  }
  #sidebar {
    width: double(5px);
  }

If you want to find the complete tutorial on SASS tutorial page. 

Original author : 阮一峰 Source : http://www.ruanyifeng.com/blog/2012/06/sass.html

CONDITION  CSS  COMMENT  VARIABLE  SASS  PROGRAMMABLE 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.