About SASS Tools

SASS

Sass is a kind of CSS development tool, it has very powerful function. As is known to all, CSS is not a programming language, but rather a web development tool that does not have variables. But sass can set variables, can have functions, is a very powerful web development tool.

--------------------------------------
Basic usage

sass allows the use of variables, All variables begin with $. such as:

         $color: Red;          
         div {     
             color: $color;         &NBSP
        }

Span style= "color: #000000;" If a variable needs to be embedded in a string, it must be written in #{}.

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

SASS allows you to use a calculation in your code:

Body {
            width: ( 14PX/2);          
             height:50px + 100px;                   
        }

sass allows selectors to be nested. such as:

        div H1 {          
             color:red;     
        }
can be written as:
        div {         
            H1 {          
                 color:red;          
             }         
        }

properties can also be nested, such as the Border-color attribute, can be written as:

p {
border: {
color:red;
}
}
The above code is also equal to the following
        p {
             border-color:red;
        }


Note that when a property is nested, a colon must be appended to the border.


        a {
             &:hover {color:red;}          
         }

mixin mixed variable:

You can specify parameters and variables. As in the following code block:

@mixin Box ($width: 10px, $height) {
Width: $width;
Height: $height;
        }


        div{
             @include Box (10px,10px);
        }

        //When passing parameters, we can not pass this parameter if there is a default value in the code block. such as:
        div{
             @include Box (10px);
        }

< Span style= "color: #008000;" >< Span style= "color: #008000;" >< Span style= "color: #008000;" >&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP

         

About SASS Tools