Sass Small Summary

Generally there are two kinds of suffixes. Sass and. Scss, the latter is recommended.

Write down your understanding of sass.

1. Variables

$border-color: #c66;

$border: 1px solid $border-color;

Variables include global variables and local variables. Global variables can be referenced even if they are global. Local variables are defined in the selector or in the mixin. Only valid within the fixed action.

Local Variables Plus! Gloable can be transformed into global variables (their own understanding); eg

1 @mixin Button-style {2 $btn-bg-color:lightblue!global;3 color: $btn-bg-color;4 }5 6 button {7 @include Button-style;8 }9 Ten . Wrap { One background: $btn-bg-color; A } -  -  the  - CSS -. Wrap{background:lightblue;}

The default value of the!default variable, which overrides the default value by re-declaring the following variable before the default variable. eg

1 $color: #333; 2 $color: #666!default; 3 . box{  4  color: $color;   5 }  6  7  8  9css box{color: #333;}

2. Inheritance Nesting

Divided into selector nesting and attribute nesting

① selector nesting, eg:

1 . box{2  ul{3     li{4       float:left; 5      }  6  }7 }

② attribute nesting, eg:

1 p{2  border:{3    color:red; 4 }5 }

Add a colon after border;

Selector inheritance: Class2 can inherit the style of Class1; eg:

. class1{color:red;}. class2{    @extend. Class1;}

3. Defining functions

There are written functions in sass that can be used. Mix (), RGBA (),lighten (), darken ( ), etc.;

4.Mixin

In Sass, @mixin you can pass arguments by using declaration blending, parameter names start with a $ symbol, multiple parameters are separated by commas, or you can set default values for parameters. @mixincalled by the declaration @include . (Refer to http://www.w3cplus.com/sassguide/syntax.html)

5. Occupies a position

The advantage of this selector is that if you do not call then there will be no redundant CSS files, avoid the previous in some basic files pre-defined a lot of basic style, and then the actual application whether or not @extend to inherit the corresponding style, will parse out all the styles. The placeholder selector % is called by the identity definition @extend .

[e-mail protected] Call placeholder

@include functions that inherit @mixin

7. Statement if else for @each learning ...

8, calculation. Study in ...

[Email protected] jump out of nested,& reference the parent element, these two can be used in conjunction with; Eg:???

. child{  @at-root. Parent &{       color: #c66;   }}. Parent. Child{color: #c66;}

10. Determine if a variable exists

SASS provides two functions to test for the existence of a variable. We can use variable-exists or global-variable-exists function to check whether our local or global variables exist separately.

@if (Global-variable-exists (Divborder)) {   . save-cancel-btns{    border: $divBorder;   }}

Sass Small Summary