Sass primary syntax, sass

Sass primary syntax, sass

The sass syntax used is:

Sass -- watch test. scss: test.css -- style compact -- style expanded

For example:

1. Custom Variables

The content of test. scss is:

$color: black;.test1 {    background-color: $color;} 

Compiled into test.css:

.test1 {  background-color: black;}

 

2. Add a variable to the string.

The content of test. scss is:

$left: left;.test2 {    border-#{$left}:1px  #000 solid;}

Compiled into test.css:

.test2 {  border-left: 1px  #000 solid;}

 

3. Perform addition, subtraction, multiplication, division, and division in the style)

The content of test. scss is:

$para:4;.test3 {    height: 5px+3px;    width: (14px/7);    right: $para*4;}

Compiled into test.css:

.test3 {  height: 8px;  width: 2px;  right: 16;}

 

4 child element writing

The content of test. scss is:

.test4 {    .lala {        color: pink;    }}

Compiled into test.css:

.test4 .lala {  color: pink;}

 

5 inheritance (SASS allows one selector and inherits another selector)

The content of test. scss is:

.class1 {    border-left: 1px #000 solid;}.class2 {    @extend .class1;    font-size: 15px;}

Compiled into test.css:

.class1, .class2 {  border-left: 1px #000 solid;}.class2 {  font-size: 15px;}

 

6. reuse code blocks

The content of test. scss is: (no variable)

@mixin test6 {    height: 5px;    left: 20px;    top: 10px;}.lili {    @include test6;}

Compiled into test.css: (no variable)

.lili {  height: 5px;  left: 20px;  top: 10px;}

This method can be used to set variables as follows:

The content of test. scss is: (variable)

@mixin test62($height) {    height: $height;    left: 20px;    top: 10px;}.lili2 {    @include test62(100px);}

Compiled into test.css: (with variables)

.lili2 {  height: 100px;  left: 20px;  top: 10px;}

 

7 Functions

The content of test. scss is:

@function aa($color) {    @return $color;}.test7 {    color: aa(pink);}

Compiled into test.css:

/*example 07*/.test7 {  color: pink;}

 

8. Import external scss or css files

The content of test. scss is:

@import 'more.scss' 

More. scss content is:

$width: 30px;.test8 {    width: $width;}

Compiled into test.css:

.test8 {  width: 30px;}