SCSS: Wuhu takes off~

SCSS: Wuhu takes off~

1. Variable use

1-1. Variable declaration

$my-color : yellow;

• Similar to scope, when the variable is defined outside the module, other modules can be used; and when the variable is defined in the module, it can only be used in the module.

1-2. Variable references

$my-color : yellow;
$my-border : 1px solid $my-color;
header {
    $my-width : 100px;
    color : $my-color;
    width : $my-width;
    border : $my-border;
}

//编译后

header {
    color : yellow;
    width : 100px;
    border : 1px solid yellow;
}

1-3. Variable rule supplement

• SCSS does not restrict -or _use, developers can use it at will, and can even use it when defining -or quoting _.

$my-color : yellow;
a {
    color : $my_color;
}

//编译后
a {
    color : yellow;
}

2. CSS nesting rules

• It is annoying to write selectors repeatedly in CSS. SCSS provides nesting rules to reduce repeated fields.

#div{
    #header{
        a{
            color : yellow;
        }
        p{
            color : green;
        }
    }
    #div #header{
        color : red;
    }
}

// 编译后
#div #header a{color : yellow;}
#div #header p{color : green;}
#div #header {color : red;}

2-1. The identifier of the parent selector &

#header div{
  color :  red;
  :hover : green;
}

• The original expectation was to add a hover to the div tag and change the color when it is overwritten, but the above approach will cause the color of the div's descendants to change . Therefore, SCSS provides an &identifier to indicate that the parent selector of the current module adds specified content.

#header div{
  color :  red;
  &:hover : green;
}

//编译后
#header div{
    color : red;
}
#header div:hover{
    color : green;
}

2-2. Group selector nesting

#header,#footer{
    a,p{
        color : red;
    }
}

//编译后
#header a{color:red}
#header p{color:red}
#footer a{color:red}
#footer p{color:red}

2-3. Same layer combination selector

• When you need to select adjacent elements at the same level, you can use +identifiers to indicate the elements at the same level

header{
    #h1 + #h2{
        color : red;
    }
}

• You can also use the group selector of the same layer to ~select all the articlefollowing articleelements of the same layer , no matter how many other elements are separated between them.

article ~ article { 
    border-top: 1px dashed #ccc
}

2-4. Nested attributes

• When you need to write a large number of attribute names with a prefix, you can add the prefix:, followed by a block to write the required attributes;

nav { 
    border:{
        style : solid;
        color : red;
        width : 1px;
    }
}

3. Import the SASS file

• When you need to re-import the scss file from the outside, you can @importadd the file path through the keyword .

@import './index.scss';
@import './index'
@import './style.css'

3-1. Partial files

• Add an underscore _ in front of the file name to indicate that this file is a partial file, and there is no need to generate a separate scss file;
• When quoting, you can omit the underscore and suffix name, and scss can also search for the file;

3-2. Default variable value

• When a variable is declared repeatedly, the following variable value will overwrite the previous variable value, scss provides a keyword !defalult, if the keyword is added to the variable, the subsequent assignment to the variable will be invalid.

$my-color : red !default;
header {
    a{
        color : $my-color;
    }
}

$my-color : blue;	//失效

3-3. Nested Import

• scss allows importing local scss files at the block level.

4. Silent comments

• scss provides a "//" comment method, this comment will not appear in the generated css file, so it is called silent comment.

5. Mixer

• When there are many styles in the website that need to be reused, these styles can be saved by means of a mixer;
• The mixer uses the @mixinidentifier definition. When it needs to be used in other places, it can @includebe quoted only by the method.

@mixin rounded{
    -moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
    border-radius : 10px;
}

content {
    background-color : skyblue;
    border : 1px solid green;
    @include rounded;
}

//编译后
content {
    background-color : skyblue;
    border : 1px solid green;
    border-radius : 10px;
}

5.1 CSS rules in the mixer

• The mixer can not only contain attributes, but also css rules

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

//scss可自动继承混合器的css规则

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5.2 Mixer parameter transfer and default values

• Yes, the mixer can also set parameters like a function.

@mixin link-color($color,$hcolor: $color){
    color : $color;
    &hover : $hcolor;
}

a {
    @include link-color(red,green);
}
p {
    @include link-color(red);
}

// 编译后

a {
   color : red;
}

a :hover {
    color : green;
}
p {
   color : red; 
}
p:hover{
    color : red;
}

6. Selector inheritance streamlined css

• scss provides @extendsyntax for selectors to implement inheritance.

.header {
    color : red;
    border : 1px solid green;
}

content {
    @extend .header;
    border-radius : 2px;
}