Sass Getting Started

Sass Getting Started

What makes sass? Anyone who learns to become a language knows that it is not a programming language!

　　We know that CSS is basically not a programmer's tool, because it is cumbersome, no variables, no conditional statements, but just a line of simple description, very inconvenient! based on this, someone began to more easily write CSS to add programming elements to the CSS, this is the "CSS preprocessor (CSS proprocessor)"-----in a special programming language to design the style, and then compiled to generate a normal CSS file.

　　Of course, CSS preprocessor is not only sass and less, these two CSS preprocessor are very popular, here we first know sass.

Supplement: Sass Document 1 (English version)

Sass Document 2 (Chinese version)

Nanyi's Sass Introduction Blog

Description: Some of the content here refer to the Nanyi Teacher's blog, the address is: http://www.ruanyifeng.com/blog/2012/06/sass.html.

The first part: Sass installation and use, File introduction

We can download koala, this is a Chinese production can compile sass, less software, we can first compile in the sublime compiler, and then use Koala to generate CSS files .

　In order for less to be highlighted in sublime, you can download it here.

　In order for SASS to be highlighted in sublime , you can download it here.

The above two get after decompression placed in the sublime preference below the browse packages and restart sublime. (The highlight is, of course, if we need to save it as the appropriate file first)

Sass actually has two filenames, one is. Sass end, the other is. Scss end. At present, I use the latter, because the former form of sass is not good, its syntax is similar to ruby syntax. The braces used in. Scss are better for the front end.

If you do not use Koala, you can also use Ruby to compile the sass file. http://www.ruby-lang.org/zh_cn/downloads/can download Ruby here.

The second part: Sass basic usage.

1. Variables

　　We know that CSS does not have variables, and that variables are sass powerful. SASS allows variables to be used, all variables start with $. As shown below:

　　

$size: 15px;div {    font-size:$size;  }

As you can see, here $size the time variable, the variable must start with $.

If a variable needs to be embedded in a string, it needs to be written in #{}.

$side: Left;div {    border-#{$side}-radius:5px;}

2. Calculation function

In the SASS code, we can use the calculation function (very convenient!!) This is completely impossible in CSS). As shown below:

$weight: 50px;div {    width:(100PX/2);     height:(50px-30px);     font-size:$weight/5;}

After the koala has been compiled, as follows:

{  width: 50px;   height: 20px;   font-size: 10px;}

It is important to note that 100PX/2 and 50px-30px in the SCSS code need parentheses so that the compiled results are not problematic.

3. Nesting

SASS allows the use of selectors nesting in code. This is absolutely not possible in CSS, so writing a nested relationship style in CSS is a very troublesome thing.

Here is an example:

Div {    h1{        font-size:50px;    }     a{        display:block;         Margin:15px;    }     &:hover{        background:red;    }     border:{        color:red;         Style:solid;    } }

The code obtained after the koala compilation is as follows:

{  border-color: red;   border-style: solid;} {font-size: 50px;}        {display: block;            Margin: 15px; }  {    background: red;} /* */

As you can see from the example above:

• Koalas are automatically indented after compiling
• The compiled CSS code is no longer a nested relationship
• We can use & (Note: Yes and no USD) to refer to the parent element.
• For properties Border-color and Border-style We can also use nested!!

4.sass comments

There are three kinds of annotation methods in sass.

One: Standard CSS comments/* This is a explanation */is still preserved after compilation

Second: single-line comment//This is a comment after compilation no longer exists

Its three: Important note/*! This was an importantent explanation */This comment is retained even if compressed, and is typically used to declare copyright information.

Examples are as follows:

The SASS code is as follows:

Div{h1{font-size:50px; }/*Important explanation*/a{Display:Block;margin:15px; }//This was for a. &:hover{background:Red; }/*we can use the for explanation*/border:{Color:Red;style:Solid; }}

After the koala compiled as follows:

Div{/*Important explanation*/  /*we can use the for explanation*/Border-color:Red;Border-style:Solid; }Div H1{font-size:50px; }Div a{Display:Block;margin:15px; }Div:hover{background:Red; }

We can see that the use//comment is gone. The other two are still there.

If we compress the above CSS code, the result is as follows:

Div {/**/border-color:red; Border-style:solid}div H1{font-size:50px}div a{  Display:block; margin:15px}div:hover{background:Red}

If we compress the SASS code above, the result is as follows:

Div {h1{font-size:50px}/**/a{display:block ; margin:15px}//This was for a. &:hover{background:Red}  Border:{color:red;  Style:solid}}

We found that anyway:/*! */Note will be permanent.

(JS CSS Online compression tool: http://tool.oschina.net/jscompress/)

　　

Part III: SASS Code reuse

　1. Inheritance

　　This is a very powerful feature that allows us to inherit another selector in one selector, using @extend to implement inheritance, for example:

$myColor: red;. Father{    display:none;     Width:100px;     height:(30PX/2);     color:$myColor;} . Son {    @extend. Father;    Font-size:100px;}

After the koala compiles the following:

{  display: none;   width: 100px;   height: 15px;   color: red;}  {  font-size: 100px;}

So we found that son completely inherited the father, and on the basis of father added his own attribute font-size;

2.Mimin

　　

　　

　　

　　

　　

　　

　　

　　

Sass Getting Started