sass primary grammar

The sass syntax used is:

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

As shown below:

1 Custom variable

test.scss content is:

<span style="color: #000000;">$color: black;
.test1 {
    background-color: $color;
} </span>

The content compiled into test.css is:

<span style="color: #000000;">.test1 {
  background-color: black;
}</span>

2 Add variables to the string

test.scss content is:

<span style="color: #000000;">$left: left;
.test2 {
    border-#{$left}:1px  #000 solid;
}</span>

The content compiled into test.css is:

<span style="color: #000000;">.test2 {
  border-left: 1px  #000 solid;
}</span>

3 Add, subtract, multiply and divide within the pattern (pay attention to writing division)

test.scss content is:

<span style="color: #000000;">$para:4;
.test3 {
    height: 5px+3px;
    width: (14px/7);
    right: $para*4;
}</span>

The content compiled into test.css is:

<span style="color: #000000;">.test3 {
  height: 8px;
  width: 2px;
  right: 16;
}</span>

4 sub-element writing

test.scss content is:

<span style="color: #000000;">.test4 {
    .lala {
        color: pink;
    }
}</span>

The content compiled into test.css is:

<span style="color: #000000;">.test4 .lala {
  color: pink;
}</span>

5 Inheritance (SASS allows one selector to inherit another selector)

test.scss content is:

<span style="color: #000000;">.class1 {
    border-left: 1px #000 solid;
}
.class2 {
    @extend .class1;
    font-size: 15px;
}</span>

The content compiled into test.css is:

<span style="color: #000000;">.class1, .class2 {
  border-left: 1px #000 solid;
}
.class2 {
  font-size: 15px;
}</span>

6 Reuse code blocks

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

<span style="color: #000000;">@mixin test6 {
    height: 5px;
    left: 20px;
    top: 10px;
}
.lili {
    @include test6;
}</span>

The content compiled into test.css is: (no variables)

<span style="color: #000000;">.lili {
  height: 5px;
  left: 20px;
  top: 10px;
}</span>

What’s very useful about this method is that you can set variables, as follows:

The content of test.scss is: (with variables)

<span style="color: #000000;">@mixin test62($height) {
    height: $height;
    left: 20px;
    top: 10px;
}
.lili2 {
    @include test62(100px);
}</span>

The content compiled into test.css is: (with variables)

<span style="color: #000000;">.lili2 {
  height: 100px;
  left: 20px;
  top: 10px;
}</span>

7 functions

test.scss content is:

<span style="color: #000000;">@function aa($color) {
    @return $color;
}
.test7 {
    color: aa(pink);
}</span>

The content compiled into test.css is:

<span style="color: #000000;">/*example 07*/
.test7 {
  color: pink;
}</span>

8 Import external scss or css files

test.scss content is:

@import 'more.scss' 

more.scss content is:

<span style="color: #000000;">$width: 30px;
.test8 {
    width: $width;
}</span>

The content compiled into test.css is:

<span style="color: #000000;">.test8 {
  width: 30px;
}</span>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn