Basic posture of SASS

What is SASS?

The traditional CSS is a simple descriptive style file, however Sass can pre-compile the CSS. In the Sass source code can use variables, functions, inheritance and other dynamic language features, and can be compiled into CSS files.

Installation and use

Installation

Because Sass is written in Ruby, you need to install a ruby environment if you want to use SASS. Then use gem to install sass. Enter the following command to install SASS:

Gem Install Sass

You can use the SASS-V command to view the version of Sass.

Use

Create a new suffix named. scss source file, you can edit the Sass source code. Then use the following command to convert the source file compilation to CSS and display it on the screen.

Sass Test.scss

You can also create a CSS file in the current directory by appending a filename named. css to the suffix. As follows:

Sass Test.scss Test.css

Note: The difference between sass and. Scss is that the. sass file has very strict requirements for the layout of the code, and there are no curly braces, no semicolons.

Command parameters

--style: Compilation style SASS provides four compilation style options:

Nested: Nested indentation of the CSS code, which is the default value.

Expanded: No indented, extended CSS code.

Compact: A concise form of CSS code.

Compressed: Compressed CSS code.

e.g.

Sass Test.scss TEST.CSS--style Compressed

--watch: Monitor file changes Sass can monitor the source file changes, and automatically generate a compiled version. e.g.

Listening to individual files sass--watch test.scss:test.css//listening directory sass--watch sassfiledirectory:cssfiledirectory

Variable

Sass defining variables using $ start

$white: #FFFFFF; body{    color: $white;}

If you need to insert a variable into a string, you need to write the variable in #{}

$IMGURL: ". /img/test.png "; body{    Background-image:url (#{$imgUrl});}

Operation

SASS allows you to use formulas in your code

$min-left:10px;body{    margin-left: $min-left+20px;}

Nesting

Sass Allow nested rules

div{    //selector nested    p{        color: #FFFFFF;    }    Attribute nesting    margin:{        left:10px;    }    Pseudo-Class nested    &:hover{        color: #F4F4F4;    }}

Compile into CSS style as:

div {  margin-left:10px;} div p {  color: #FFFFFF;} Div:hover {    color: #F4F4F4;}

Inherited

Sass can use @extend to inherit from another selector.

. page{    Background-color: #F7F7F7;}. div1{    @extend. Page;    Color: #FFFFFF;}

Mixin

SASS provides a reusable block of code that mixin similar to "functions." Use @mixin to define the style code block, and then use @include to invoke the style. Unlike @extend, the mixin definition style does not compile output in CSS styles, and you can specify parameters and default values.

Mixin@mixin page{background-color with no parameters    : #F7F7F7;} Mixin@mixin setdefmargin with parameters ($left, $right, $bottom: 10px, $top: 10px) {margin: $top $right, $bottom $left    ;}. test{    @include page;    @include Setdefmargin (20px,30px);    Color: #FFFFFF;}

Note that you must first define a parameter that has no default value, and then specify a parameter with a default value.

Import

Sass can use the @import statement to refer to the specified external file.

Introduce Scss file @import "variable.scss";//introduce CSS style file @import "Style.css";

Conditional statements

Use @if and @else statements to make conditional judgments

$min-margin:10px; @mixin init-margin ($left) {    //Determines whether the passed in parameter is greater than the minimum    @if $left > $min-margin {        margin-left: $ Left;    } @else {        margin-left: $min-margin;    }} Body {    @include init-margin (5px);}

Looping statements

For loop

Use @for to define the loop body. The $i represents the loop variable, followed by the start value, followed by the end value.

@for $i from 1 to {    . page-index#{$i} {        color: #FFFFFF;    }}

While loop

Use @while to define the loop body, followed by the loop condition.

loop variable $i:2; @while $i <10{    page-index#{$i} {        color: #F4F4F4;    }    $i = $i = 1;}

Custom functions

Use the @function statement to customize the function @return The return value of the function

@function Calcnumber ($num) {    @return $num +10;} Body {    margin-left:calcnumber (20px);}

