你的位置:首页 > 网页设计

[网页设计]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;}