总结一下个人项目中用到的sass语法
@extend:继承样式块
继承已经存在的样式块
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
}
.btn-primary {
background-color: #f36;
@extend .btn;
}
继承不存在的样式块(占位符%)
%placeholder{
color:red;
}
他跟直接继承已经存在的样式不同的是如果占位符不被@extend调用的话,不会产生任何代码(就是说这个占位符不在样式中占用空间,压根不存在)
变量引用
$fontSize:14px;
.demotest{
font-size:$fontSize;
}
还有一种变量设置多个参数(用nth)
$color:#fff #ec9035 #ec5f3a #ED5F3B #000;
a{
color:nth($color,1)
}
嵌套(选择器嵌套、属性嵌套、伪类嵌套)
选择器嵌套
.nav{
backgrond-color:red;
a{
color:#fff;
}
}
属性嵌套
.box{
border:{
top:1px solid #eee;
bottom:1px solid #ddd;
}
}
伪类嵌套(需要借助’&’符)
.clearfix {
display: block;
&:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
@include调用声明好的混合宏
混合宏通过**@mixin声明,用于需要重复使用大段样式,比如一些带前缀的兼容性写法,需要传参的带参数混合宏,还有复杂的混合宏(带有if else判断**的)
运算
可以加减乘除,注意单位,加减单位相同,乘只能有一个带单位
for循环
@for $i from through //关键字 through 表示包括 end 这个数
@for $i from to //而 to 则不包括 end 这个数
$grid-prefix: money-bg !default;
$grid-img: bg !default;
@for $i from 1 through 2{//through表示包含2,to表示不包含2
.#{$grid-prefix}#{$i}{
background:url(../img/#{$grid-img}#{$i}.png);
line-height: 35px;
}
}
编译后:
.money-bg1 {
background: url(../img/bg1.png);
line-height: 35px;
}
.money-bg2 {
background: url(../img/bg2.png);
line-height: 35px;
}
@debug、@warm、@error
用来调试的,当编译出错时输出你设置的提示信息
@at-root
使用选择器嵌套时跳出根元素
.c { color: yellow;
@at-root .d { color: green; }
}
此时class c、d为兄弟标签
percentage($value)
将一个不带单位的数转换成百分比
.footer{
width : precentage(20px / 200px);
}
类似还有ceil()(只做入不做设比如12.3编译出来为13),**round()**四舍五入,floor()
与ceil())相反只做舍不做入,**abs()**返回绝对值,max(),min(),random()
join,append
合并添加值
map-get
根据给定的key值,返回map中相关的值
$length:(
baifenbai:100%,
baifenwushi:50%,
baifensan:3%,
ling:0,
);
html{
width:map-get($length,baifenbai);
}
@import
嵌套
//example.scss文件
.example{ color:red};
//引用
#main{@import "example";}
//编译后
#main .example{color:red}