Home > Article > Web Front-end > 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>