The powerful CSS extension language--Sass

<= ' testborder '>   <p>        < input />           </ P > </ Div >

Assuming that the above 3 DOM elements have such requirements, div to the border, p display border, input only shows the bottom border, and unified with the!important keyword to improve the style of priority;

If the handwritten pure CSS would be like this:

. Testborder {   border:none!important;   } . Testborder P {   border:1px solid!important;} . Testborder P Input {   border-width:0 0 1px 0!important;    border-style: solid!important;   }

Will find that there is a duplicate code ". Testborder", ". Testborder p", "!important". This is just a simple need, if the project is a huge demand for style complex, so that handwriting CSS and brick really no difference;

Instead, use Sass to write:

/* Define variable */
. testborder{   border:none $imp;     P{      border:1px solid $imp;       Input{         border-width: 0 0 1px 0 $imp;          border-style:solid $imp;      }    }}

The code can be nested;

CSS is a cascading style sheet, not a language, a lack of powerful features in programming languages: variables, functions, operations, loops, judgments, inheritance, etc.;

While its extended language Sass supports these features, Sass lets us programmatically write CSS code to improve efficiency and save programmers time;

Sass's official website: http://sass-lang.com/, inside the document is very accurate complete, no longer see other introduction article, show superfluous. Although the document is a chicken sausage, but are more commonly used words, and there are examples, basic can see clearly;

The following is the most recent Sass of their own knowledge points to do a brief record, convenient for later review;

1. Variables

Define the variable "$[name": [value];

/* Digital */ $columnWidth: 100px; /* style */ $columnClassName: ' column '; /* string */ $domTypeArr: (' Input ', ' select ', ' div '); /* Array */  / * boolean * /

2. Functions, Judgments

Define function: "@function [FuncName] ([parameters]) {//dosth}"

Call mode: [functionname] ([parameter]);

@function extendwidth ($width) {   @if ($width < 1) {      @return 50px;    }@else{      @return $width * 50px;   } }

The above bold code is the judgment, and JS's judgment, the difference is only the keyword in front to add the @ character, such as @if @else

3. Mixed instruction @Mixin, loop for

Mixin do not know how to translate, searched again translated as "mixed Instructions", the role is to put a string of CSS together, for the call;

Definition: "@mixin [Mixinname] ([parameters]) {//sth css}", ([parameter]) brackets and parameter are optional, i.e. without parentheses () when no arguments are available;

Call mode: @include [Mixinname] ([parameter])

@mixin push ($pushWidth){$_extendpushwidth:$pushWidth + 10px;/*Defining internal variables*/Margin-left:$_extendpushwidth;}@mixin column ($columnIndex, $pushWidth: null){float: Left;/*CSS*/Border:1px solid; Width:floor (Extendwidth ($columnIndex)); /*Call the Extendwidth user function to calculate the width, and then call the sass built-in math function floor to get the integer*/@if ($pushWidth! = null) {  @include push ($pushWidth);  /*Call mixed instruction (mixin) push generation Margin-left*/}} @mixin generatetable{. my-table{/*CSS Class*/Max-width:400px;@for $i from 1 through $columnCount {/*$totalColumns is the global variable above*/. #{$columnClassName}#{$i}{Background-color:Rgba (255,0,0, $i/10);@include Column ($i, 5);/*call mixin column to generate the column style*/}}}}.my-form{width:500px;@include generatetable ();}

Note: The main difference between mixin and the function: Mixin is equivalent to a block of code, and the function can be repeated in other places, it does not return a value like a function, it is to return a block of code, before the call to add the keyword @include;

@for $i from 1 through $columnCount {} This is a for loop, which increments the $i from 1 to $columnCount;

If you want to loop an array or collection, use @each $var in [array]{}

Copy the above three sections of code to a file (such as TEST.SCSS) and call the SASS command in the command window:

Sass C:\test.sass C:\test.css

Generated CSS:

@charset "GBK";/*Digital*//*style*//*string*//*Array*//*Boolean*/. My-form{width:500px; }. My-form. my-table{/*CSS Class*/Max-width:400px;/*$totalColumns is the global variable above*/    /*$totalColumns is the global variable above*/    /*$totalColumns is the global variable above*/    /*$totalColumns is the global variable above*/    /*$totalColumns is the global variable above*/}. My-form. my-table. Column1{Background-color:Rgba (255, 0, 0, 0.1);float: Left;/*CSS*/Border:1px solid;width:50px;/*Call the Extendwidth user function to calculate the width, and then call the sass built-in math function floor to get the integer*/      /*Defining internal variables*/Margin-left:15px;/*Call mixed instruction (mixin) push generation Margin-left*/      /*call mixin column to generate the column style*/}. My-form. my-table. Column2{Background-color:Rgba (255, 0, 0, 0.2);float: Left;/*CSS*/Border:1px solid;width:100px;/*Call the Extendwidth user function to calculate the width, and then call the sass built-in math function floor to get the integer*/      /*Defining internal variables*/Margin-left:15px;/*Call mixed instruction (mixin) push generation Margin-left*/      /*call mixin column to generate the column style*/}. My-form. my-table. Column3{Background-color:Rgba (255, 0, 0, 0.3);float: Left;/*CSS*/Border:1px solid;width:150px;/*Call the Extendwidth user function to calculate the width, and then call the sass built-in math function floor to get the integer*/      /*Defining internal variables*/Margin-left:15px;/*Call mixed instruction (mixin) push generation Margin-left*/      /*call mixin column to generate the column style*/}. My-form. my-table. Column4{Background-color:Rgba (255, 0, 0, 0.4);float: Left;/*CSS*/Border:1px solid;width:200px;/*Call the Extendwidth user function to calculate the width, and then call the sass built-in math function floor to get the integer*/      /*Defining internal variables*/Margin-left:15px;/*Call mixed instruction (mixin) push generation Margin-left*/      /*call mixin column to generate the column style*/}. My-form. my-table. Column5{Background-color:Rgba (255, 0, 0, 0.5);float: Left;/*CSS*/Border:1px solid;width:250px;/*Call the Extendwidth user function to calculate the width, and then call the sass built-in math function floor to get the integer*/      /*Defining internal variables*/Margin-left:15px;/*Call mixed instruction (mixin) push generation Margin-left*/      /*call mixin column to generate the column style*/}

Effect:

<Divclass= "My-form">    <Divclass= "My-table">        <Divclass= "Column1">Column1</Div>        <Divclass= "Column2">Column2</Div>        <Divclass= "Column3">Column3</Div>    </Div>

4. Import additional Sass Files:

' Test.scss ';

It is obvious that using Sass to write CSS, not only the code volume of the number of times reduced, and elegant simple easy to maintain and expand;

In fact, sass Grammar is a bit like JS, if it will JS, extrapolate learn easily;

The compilation Environment under window:

Press to install Ruby first: http://rubyinstaller.org/downloads/

Install the Sass again,

Install Sass

Can be compiled with the SASS command:

Sass Input.scss Output.css

Sass also has a good cow fork plug-in: Compass, first look at Xia Guan Nets: http://compass-style.org/, there is time for finishing;

The powerful CSS extension language--Sass