preface

Traditional CSS files need to write a lot of repeated code, there is no variable function and other concepts, then you can use THE CSS precompilation tool SCSS to simplify our code, improve the efficiency of development.

1. Install

yarn add sass
Copy the code

Install sass under the project and write lang=” SCSS “on the style tag of the VUE file to use it

2. Use variables

$border-color:#aaa; // Declare variable $border_color:# CCC; .container { $border-width:1px; border:$border-width solid $border-color; Container {border:1px solid # CCC; // Use variables} // compiled css. container {border:1px solid # CCC; // Use the variable}Copy the code

  • In the example above, two variables are defined: border-width, border-width, border-width, border-color. Border −color is outside the braces, called a global variable, and is used anywhere in the SCSS file. Border-color is outside the braces, called a global variable, and can be used anywhere in the entire SCSS file. Border −color is outside the braces, called a global variable, and is used anywhere in the SCSS file. Border-width is a local variable that can only be used inside a. Container.

  • Variable names with hyphens or underscores refer to the same variable

  • Postdefined variable declarations are ignored, but assignments are performed, just like var declarations in ES5.

3. Parent element, nested combination selector

SCSS provides a selector to select the parent element of the current element, denoted by &

#main { color: black; &-sidebar { border: 1px solid; }} compile to CSS #main {color: black; } #main-sidebar { border: 1px solid; }Copy the code

In addition to tag names, this also applies to pseudo-elements

.container{ &::after { display:block; content:""; clear:both; }} Compile to css. container::after {display:block; content:""; clear:both; }Copy the code

Nested rules can write any CSS code, including group selectors (,), child selectors (>), adjacent group selectors (+), group group selectors (~), and so on

For example, child selectors

li > a{ display:inline-block; padding:6px 12px; } can be written as li >{a {display:inline-block; padding:6px 12px; }} or li {>a {display:inline-block; padding:6px 12px; }}Copy the code

Nested properties. In SCSS, not only can selectors be nested, but properties can also be nested

li { border:1px solid #aaa { left:0; right:0; }} border:1px solid #aaa; border-left:0; border-right:0; }Copy the code

4.@import Import the SCSS file

In the CSS, you can use the @import command to import another CSS file. The browser will load the corresponding CSS file only after the @import statement is executed. As a result, the page performance deteriorates.

SCSS’s @import rule imports CSS files when they are generated. This means that all related styles are grouped into the same CSS file without making additional download requests.

/*test1.scss*/ $border-color:#aaa; // declare the variable @import test2.scss; Container {border:1px solid $border-color; container {border:1px solid $border-color; } /*test2. SCSS */ $border-color:# CCC; Container {border:1px solid # CCC; // Declare variables /* Generated CSS file for test1 */. Container {border:1px solid # CCC; // Use the variable}Copy the code

It can be seen from the example that the introduced SCSS file will overwrite the attributes originally defined by the SCSS file, which may not meet our some practical scenarios, this time we can use! Default.

/*test1.scss*/ $border-color:#aaa; // declare the variable @import test2.scss; Container {border:1px solid $border-color; container {border:1px solid $border-color; } /*test2. SCSS */ $border :# CCC! default; Container {border:1px solid #aaa; // Declare variables /* Generated CSS file for test1 */. Container {border:1px solid #aaa; // Use the variable}Copy the code

$border-color = “test1”; $border-color = “test1”; Default Indicates the default value of pocket bottom.

5.@mixin mixer (function) is used in conjunction with @include

Use the @mixin directive to declare a function. When CSS code has repeated code fragments, consider using a mixer to extract them for reuse.

@mixin get-border-radius($border-radius:5px,$color:red, $size:null){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
  	font-size:$size
}
Copy the code

If the get-border-radius function does not take a parameter, the default value is set to border-radius variable 5px, border-radius variable 5px, border-radius variable 5px, and border-radius variable 5px. The color variable red is set to null by default, which means that the function can be called without passing in size. Font size is not displayed by default.

Use the keyword @include for the function

.container { border:1px solid #aaa; @include get-border-radius; 5px @include get-border-radius($color:blue,$border-radius:10px); Container {border:1px solid #aaa; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color:red; }Copy the code

6. @ the extend of inheritance

Use % to define an inherited style

%border-style {
  border:1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
Copy the code

The common %border-style style can be inherited with @extend, or another class selector can be inherited

.container { @extend %border-style; }.container1 {// Extends another selector, @extend.container; }Copy the code

7.@mixin blending differs from @extend inheritance

Blending into CSS inserts styles under every selector that introduces blending styles, whereas inheritance adds inherited selectors to common style selectors and is not compiled into CSS files.

Mixed @ mixins:

@mixin border-style { border:1px solid red; } .container { @include %border-style; } .test { @include %border-style; Container {border:1px solid red; border-radius: 5px; } .test { border:1px solid red; border-radius: 5px; }Copy the code

Inheritance @ the extend:

%border-style { border:1px solid red; } .container { @extend %border-style; } .test { @extend %border-style; }.container,.test {border:1px solid red; border-radius: 5px; }Copy the code

8.#{} interpolation statement

You can use variables in a selector or property name

$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } border-color: blue; border-color: blue; }Copy the code

Use the #{} interpolation statement in a quoted text string to add dynamic values

p:before { content: "I ate #{5 + 10} pies!" ; } p:before {content: "I ate 15 pies!" ; }Copy the code

Use variables in the calc() function

&.test >span{
    left:calc(100% - #{$h2} - 2px);
}
Copy the code