用到的sass语法是:
sass --watch test.scss:test.css --style compact --style expanded
如下图:
1 自定义变量
test.scss内容是:
<span style="color: #000000;">$color: black;
.test1 {
background-color: $color;
} </span>
编译成test.css内容是:
<span style="color: #000000;">.test1 {
background-color: black;
}</span>
2 在字符串内加变量
test.scss内容是:
<span style="color: #000000;">$left: left;
.test2 {
border-#{$left}:1px #000 solid;
}</span>
编译成test.css内容是:
<span style="color: #000000;">.test2 {
border-left: 1px #000 solid;
}</span>
3 样式内进行加减乘除(注意除法书写)
test.scss内容是:
<span style="color: #000000;">$para:4;
.test3 {
height: 5px+3px;
width: (14px/7);
right: $para*4;
}</span>
编译成test.css内容是:
<span style="color: #000000;">.test3 {
height: 8px;
width: 2px;
right: 16;
}</span>
4 子元素书写
test.scss内容是:
<span style="color: #000000;">.test4 {
.lala {
color: pink;
}
}</span>
编译成test.css内容是:
<span style="color: #000000;">.test4 .lala {
color: pink;
}</span>
5 继承(SASS允许一个选择器，继承另一个选择器)
S_Space 商城系统
下载
系统特色及功能简介，主要包括以下方面： 合一：包括语言、模板风格、用户群；此版本内订简体、繁体、英文于一体；可另增设其它语言选项；模板风格指可以存在多界面的情况下进行界面互换；用户群指可写于单用户版本，也可用于多用户商城版本，具体设置可通过会员组权限修改 会员组定制：系统初安装时，内订６级会员分组，即 游客组、管理员组、ＶＩＰ用户组、柜台用户组、柜台ＶＩＰ用户组；此６级会员组不可以删除。另管理
test.scss内容是:
<span style="color: #000000;">.class1 {
border-left: 1px #000 solid;
}
.class2 {
@extend .class1;
font-size: 15px;
}</span>
编译成test.css内容是:
<span style="color: #000000;">.class1, .class2 {
border-left: 1px #000 solid;
}
.class2 {
font-size: 15px;
}</span>
6 复用代码块
test.scss内容是:(无变量)
<span style="color: #000000;">@mixin test6 {
height: 5px;
left: 20px;
top: 10px;
}
.lili {
@include test6;
}</span>
编译成test.css内容是:(无变量)
<span style="color: #000000;">.lili {
height: 5px;
left: 20px;
top: 10px;
}</span>
这个方法很好用的是可以设置变量,如下:
test.scss内容是:(有变量)
<span style="color: #000000;">@mixin test62($height) {
height: $height;
left: 20px;
top: 10px;
}
.lili2 {
@include test62(100px);
}</span>
编译成test.css内容是:(有变量)
<span style="color: #000000;">.lili2 {
height: 100px;
left: 20px;
top: 10px;
}</span>
7 函数
test.scss内容是:
<span style="color: #000000;">@function aa($color) {
@return $color;
}
.test7 {
color: aa(pink);
}</span>
编译成test.css内容是:
<span style="color: #000000;">/*example 07*/
.test7 {
color: pink;
}</span>
8 导入外部scss或者css文件
test.scss内容是:
@import 'more.scss'
more.scss内容是:
<span style="color: #000000;">$width: 30px;
.test8 {
width: $width;
}</span>
编译成test.css内容是:
<span style="color: #000000;">.test8 {
width: 30px;
}</span>
