注释
支持常规的两种注释方法;
1. //双斜杠的单行注释, eg : //这是一个圆角按钮
2. /**/范围注释, eg:
/*
什么功能;
做什么用的;
*/设置文件编码
编码@charset "encoding-name"; , 若需要支持中文注释,在SCSS文件的顶部写上@charset "UTF-8";
变量
$fs:12px;
p{
font-size: $fs;
}- 默认变量;
sass 的默认变量仅需要在值后面加上 !default 即可。
$fs:12px !default;
p{
font-size: $fs;
}
$fs:15px;
$fs:12px !default;
p{
font-size: $fs;
}$fs:12px;
p{
font-size: $fs;
}$fs:12px;
p{
$fs : 20px;
font-size: $fs;
}CSS样式继承
除了个别选择符,基本和CSS一样,就是写法是内嵌格式
- 元素嵌套
#main{
p{ font-size:15px} //css : #main p{};
>a{
span{font-size:10px;}
}
}#main{
border{
top:1px solid #ccc;
left:2px solid #ddd;
}
}
& : 父类选择符
#main{
p{ font-size:15px} //css : #main p{};
>a{
&:link,
&:visited{}
&:hover{};
&:active{};
}
}% 占位符,减少CSS无用的样式的好方法
若是用调用,则占位符变量生效,无则不生效;可以避免@extend class的隐患
%mr5{
margin-right:5px;
}
body{
@extend %mr5;
}
声明宏
宏其实有点类似编程语言的函数,都是以达到复用为目的的
- 不带参数混合宏
@mixin ul-unstyle{
list-style:none;
} $width:50px;
$display:inline-block;
@mixin li-unstyle($width,$display){
list-style:none;
width:$width;
display:$display;
}
ul{
@include li-unstyle($width,$display);
}
@mixin li-unstyle($width:5px,$display:block){
list-style:none;
width:$width;
display:$display;
}
li{
@include li-unstyle;
}
$width:50px;
$display:inline-block;
@mixin li-unstyle($width,$display){
list-style:none;
width:$width;
display:$display;
}
ul{
@include li-unstyle(500px,block);
}
$shadow:0 0 3px rgba(#000,.5);
@mixin sw($shadow...){
text-shadow:$shadow;
}
p{
@include sw($shadow);
}
插值 #{}
可以设置参数以字符串的形式输出
$test:(margin,border);
@mixin t($t1, $t2){
@each $t3 in $test{
#{$t3}-#{$t1}:$t2;
}
}
.btn{
@include t(right,5px);
}
数据类型
SCSS有以下这么多数据类型数字,字符串,颜色,布尔值,空值,值列表
- 数字: 1、 2、 13、 10px；
- 字符串：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz；
- 颜色：blue、 #04a3f9、 rgba(255,0,0,0.5)；
- 布尔型：true、 false；
- 空值： null；
- 值列表：1.5em 1em 0 2em Helvetica, Arial, sans-serif。[用空格或者逗号分开]
加减乘除
都建议用括号包起来,只要单位相同,都可以做运算;不同单位,少数会报错
- 比如除法,因为CSS有双参数斜杆隔开的写法: 50px/30px , SCSS是无法识别的位除法的,加了括号即可
- 颜色也可以做运算;
- 变量也可以做运算;
逻辑处理
@mixin tt($b:false){
@if $b{
border-right:5px;
}
@else{
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
}
}
.b1{
@include tt($b:true);
}
.b2{
@include tt;
}
- @for : 循环
在 Sass 的 @for 循环中有两种方式：
@for $i from through
@for $i from to
- $i 表示变量
- start 表示起始值
- end 表示结束值
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
$num : 2;
$height: 10px;
@while $num > 0 {
.page-#{height}{
height:$height * $num;
};
$num : $num - 1;
}
@each 循环就是去遍历一个列表，然后从列表中取出对应的值
@each 循环指令的形式：@each $var in
$test:top,right,bottom,left;
@mixin btn-extend{
@each $i in $test{
border-#{$i}:5px;
}
}
.btn{
@include btn-extend;
}
函数功能
字符串与数字函数
- unquote()函数 : 只会去除最外层的字符串,不处理中间的字符串,没有字符串符号则不处理
p:before{
content:unquote("sss");
}
p:before{
content:unquote('"sss"');
}
- to-upper-case(),to-lower-case() : 转换大小写
.test {
text: to-upper-case(aaaaa);
text: to-upper-case(aA-aAAA-aaa);
}
.test2{
text: to-lower-case(AAAZDc)
}
/*
.test {
text: AAAAA;
text: AA-AAAA-AAA;
}
.test2 {
text: aaazdc;
}
*/数字函数
- percentage($value)：将一个不带单位的数转换成百分比值；
- round($value)：将数值四舍五入，转换成一个最接近的整数；
- ceil($value)：将大于自己的小数转换成下一位整数；
- floor($value)：将一个数去除他的小数部分；
- abs($value)：返回一个数的绝对值；
- min($numbers…)：找出几个数值之间的最小值；
- max($numbers…)：找出几个数值之间的最大值；
- random(): 获取随机数
$fs:5.3;
$t:10 99 1 2 3 4 5 6;
.test{
height:percentage($fs);
width:round($fs);
width:ceil($fs);
width:floor($fs);
width:abs($fs);
width:min($t...);
width:max($t...);
border-radius:random();
}
列表函数
- length($list)：返回一个列表的长度值； input
length(10px)print 1 ,inputlength(border 1px solid)print3; - nth(list,n)：返回一个列表中指定的某个标签值; input
nth(10px 20px 30px,2),print20px; - join(list1,list2, [$separator])：将两个列给连接在一起，变成一个列表(最多只能两个)。input:
join((blue,red),(#abc #def)),print(#0000ff, #ff0000, #aabbcc, #ddeeff)； - append(list1,val, [$separator])：将某个值放在列表的最后；input:
append(10px 20px ,30px), print(10px 20px 30px); - zip($lists…)：将几个列表结合成一个多维的列表；input:
zip(1px 2px 3px,solid dashed dotted,green blue red), print((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000)); - index(list,value)：返回一个值在列表中的位置值; input :
index(1px solid red, solid), print 2;
总结
还有一些终端相关的命令,以后有空再更新,比较少用scss终端版本,基本用gulp来编译,也就很少调试寻找这些了..
