SASS Basic Syntax

Sass is an extension of the CSS3 language, adding new features and syntax on top of CSS, which makes it easier to write better style sheets. The Sass engine is based on Ruby.

Import the Sass file:

@import "Colors"//colors.scss

Comments:

//This comment does not appear in the generated CSS file /* This comment will appear in the CSS file and will be erased when it appears that the native CSS does not allow the unknown. */

Variables >>

--Variable declaration

Note: The variable underline and underline represent the same variable
$flower-color: #abcdef;     //flower-color is a variable whose value is now #abcdef$basic-border:1px solid black;    //Any assignment that can be used as a CSS property value can be used as a variable value for sass $basic-font: "Myriadpro", Myriad, "Helveticanuue", Helvetica; It can also be a comma-separated number of attribute values //Unlike CSS properties, variables can be used outside the CSS Huize block definition. When a variable is defined within a CSS rule block, the variable can only be used within its child rule block. 
$nav-color: #dadada; Nav{    $width:100px;     Width:$width;     color:$nav-color;}

--Variable reference

Variables can be useful wherever the standard values of CSS properties can exist.

//variable declaration . Flower{            //variable reference      border:1px $flower-color solid;}

Nesting rules >>

--basic nesting rules, similar to some programming languages, are easy to understand, and the nesting of group selectors is the same as CSS syntax

 //css code, often repeating the write selector #content article h1  { Color :  #333 } #contetn article P  { Span style= "color: #ff0000;" >margin-bottom : 1.5em ;}  #cojntent aside  {background-color :  #eee ;} //sass code, selectors nested #content  { article{h1{color :  #333 } p  {margin-bottom : 1.5em }} aside  {background-color :  #eee  ;}   

--The parent selector identifier &

article a {    color:blue;     &:hover{color:red}    //must identify the parent selector &, otherwise sass will not work}//CSS code article a{  Color:Blue}article a:hover{color:Red}

--Sub combination selector and the same layer combo selector:> + ~

These selectors must be useful in conjunction with other selectors to make the browser select only elements in a specific context. These selectors can be applied in nested rules with sass.

Article section {margin:5px;}  //with sub-combo selector > select a direct child element of an element article>section {Border:1px red Solid}

///same-level adjacent combo selector + SELECT element immediately following element {font-size:1.1em}

{Border:1px solid red;}

--Nested properties

In addition to selectors, attributes can also be nested.

nav {    border:1px solid #ccc {        left:0px;         right:0px;    } }

Although the nesting of attributes and selectors can greatly reduce the amount of blood, it is difficult to keep the structure clear when the style sheet becomes larger. The only way to handle a large number of styles is to split them into multiple files.

Mixers >>

@mixin Corners{ //define-moz-border-radius with @mixin identifiers :5px;-ms-border-radius:5px;-webkit-border-radius:5px;; -o-border-radius:5px;Border-radius:5px;}. Calamus{Border:2px solid Red;@include Corners; //Call all styles in the mixer with @include } the//mixer can contain not only CSS rules but also attributes, or a nested//mixer can pass parameters @maxin link-colors ($normal, $hover){Color:$normal;&:Hover{color: $hover}}a{@include link-colors (blue,red); //Parameter transfer }

Inheritance >>

Through @extend implementation

. Error {    border:1px solid red;     color:red;} . Seriouserror {    @extend. Error;      //Inherit the property value   of error Width:300px;}

Sass Basic Syntax