Basic postures of Sass

What is SASS

Traditional CSS is a simple descriptive style file, but SASS can pre-compile CSS. Dynamic language features such as variables, functions, and inheritance can be used in SASS source code, and can be compiled into CSS files.

Installation and use

Installation

Since sass is written in ruby, you need to install the 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 sass version.

Use

to create a new source code file with the suffix .scss, and then you can edit the sass source code. Then use the following command to compile and convert the source code file into css and display it on the screen.

sass test.scss

You can also add the file name with the suffix .css to generate a css file in the current directory. As follows:

sass test.scss test.css

Note: The difference between .sass and .scss is that .sass files have very strict requirements for code layout, and there are no braces or semicolons.

Command parameters

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

nested: Nested indented css code, which is the default value.

expanded: Unindented, expanded css code.

compact: css code in a concise format.

compressed: compressed css code.

e.g.

sass test.scss test.css --style compressed

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

//监听单个文件sass --watch test.scss:test.css
//监听目录sass --watch sassFileDirectory:cssFileDirectory

Variables

SASS uses $ to define variables

$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 the use of calculations in the code

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

Nesting

SASS allows nested rules

div{
    //选择器嵌套
    p{
        color:#FFFFFF;
    }
    //属性嵌套
    margin:{
        left:10px;
    }
    //伪类嵌套
    &:hover{
        color:#F4F4F4;
    }
}

Compiled into CSS style:

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

Inheritance

SASS can be inherited from another selector using @extend.

.page{
    background-color:#F7F7F7;
}
.div1{
    @extend .page;
    color:#FFFFFF;
}

Mixin

SASS提供Mixin类似“函数”的重用代码块。 使用@mixin定义样式代码块，然后使用@include调用该样式。 不同于@extend的是Mixin定义样式不会编译输出在CSS样式中，并且可以指定参数和默认值。

//不带参数的mixin
@mixin page{
    background-color:#F7F7F7;
}
//带参数的mixin
@mixin setDefMargin($left, $right, $bottom: 10px,$top: 10px){
    margin:$top $right $bottom $left;
}
.test{
    @include page;
    @include setDefMargin(20px,30px);
    color:#FFFFFF;
}

需要注意的是，必须先定义没有默认值的参数，后指定有默认值的参数。

Import

sass可以使用@import语句，来引用指定的外部文件。

//引入scss文件
@import "variable.scss";
//引入css样式文件
@import "style.css";

条件语句

使用@if和@else语句可以用来做条件判断

$min-margin: 10px;
@mixin init-margin($left){
    //判断传入的参数是否大于最小值
    @if $left > $min-margin {
        margin-left: $left;
    } @else {
        margin-left: $min-margin;
    }
}
body {
    @include init-margin(5px);
}

循环语句

FOR循环

使用@for来定义循环体。 $i表示循环变量，from 后面跟上开始数值，to后面跟结束数值。

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

WHILE循环

使用@while定义循环体，后面跟循环条件

//循环变量
$i: 2;
@while $i<10{
    page-index#{$i} {
        color: #F4F4F4;
    }
    $i=$i=1;
}

自定义函数

使用@function语句可以自定义函数，@return表示函数的返回值

@function calcNumber($num) {
    @return $num+10;
}body {    margin-left: calcNumber(20px);
}