First knowledge of SASS

It is very similar to the CSS, but there are no curly braces ({}) and semicolons (;) in sass.

The variable is defined in Sass, which is declared with the "$" symbol, followed by the variable name. In this example, define the variable "red", use a colon (:) after the variable name, and immediately follow the value of the variable:

$height: 100px

In sass, the nesting is similar to HTML:

$fontsize: 12px .speaker    .name      font :        weight: bold        size : $fontsize + 10px    .position      font :        size : $fontsizeAnd the code you generate in CSS is: .speaker .name {    font-weight : bold ;    font-size : 22px ; }   .speaker .position {    font-size : 12px ;  }

Mixing (mixins)

Blending is another excellent feature in Sass. Blending allows you to define a whole block of Sass code, define parameters for them, and set default values. It's almost the less.

This is the code in the SASS

@mixin border-radius($amount: 5px )    -moz-border-radius: $amount    -webkit-border-radius: $amount    border-radius: $amount h 1    @include border-radius( 2px ) .speaker    @include border-radiusIn the CSS, the code becomes: h 1 {    -moz-border-radius: 2px ;    -webkit-border-radius: 2px ;    border-radius: 2px ; }   .speaker {    -moz-border-radius: 5px ;    -webkit-border-radius: 5px ;    border-radius: 5px ; }Function: Use the same method as JS. $baseFontSize: 10px;

@function Pxtorem ($px) {
@return $px/$baseFontSize * 1REM;
}

To pass the parameter:

@mixin Shadow ($shadow ...) {
Box-shadow: $shadow;
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
-o-box-shadow: $shadow;
-ms-box-shadow: $shadow;
}

If the argument is followed by ... You can enter any of the values:

Judge:

$type: C;
. d3{
@if $type = = a{
color:red;
}
@else if $type ==b{
Color:blue;
}
@else {
Color:green;
}
Color:if ($type = = A,red,blue);;
}

The type of the style is determined by changing the value of the $type.

Cycle:

@for $i from 1 through 5{
. item-#{$i} {
width:100px * $i;
}
}

Loop to get the style so you can do batch styles like Carousel diagrams ...

First knowledge of SASS