sass初级语法

用到的sass语法是:

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

如下图:

登录后复制

1 自定义变量

test.scss内容是:

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

登录后复制

编译成test.css内容是:

.test1 {  background-color: black;}

登录后复制

2 在字符串内加变量

test.scss内容是:

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

登录后复制

编译成test.css内容是:

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

登录后复制

3 样式内进行加减乘除(注意除法书写)

test.scss内容是:

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

登录后复制

编译成test.css内容是:

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

登录后复制

4 子元素书写

test.scss内容是:

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

登录后复制

编译成test.css内容是:

.test4 .lala {  color: pink;}

登录后复制

5 继承(SASS允许一个选择器，继承另一个选择器)

test.scss内容是:

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

登录后复制

编译成test.css内容是:

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

登录后复制

6 复用代码块

test.scss内容是:(无变量)

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

登录后复制

编译成test.css内容是:(无变量)

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

登录后复制

这个方法很好用的是可以设置变量,如下:

test.scss内容是:(有变量)

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

登录后复制

编译成test.css内容是:(有变量)

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

登录后复制

7 函数

test.scss内容是:

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

登录后复制

编译成test.css内容是:

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

登录后复制

8 导入外部scss或者css文件

test.scss内容是:

@import 'more.scss' 

登录后复制

more.scss内容是:

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

登录后复制

编译成test.css内容是:

.test8 {  width: 30px;}

登录后复制