学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的@-Rules也是重要的一部分。
普遍情况下这仨在实际项目中用得还是比较多的,玩起来吧!
1. 混合宏@mixin
如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
特点:可传参。
不足:如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余。
SCSS:
.fl{
@include float(left)
div{
@include float(left)
}
}
.fr{
@include float(right)
}
实际生成的CSS:
.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }
而我想要的是这样的CSS:
.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不会合并...看来'你'也就只有传参好使了!
SCSS:
@mixin br3{ /* 没有传参 */
border-radius: 3px;
}
@mixin br4($br4){ /* 传一个不带值的参数 */
border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 传一个带值的参数 */
border-radius: $br6;
}
@mixin position-center($width, $height){ /* 传多个参数 */
width: $width;
height: $height;
position: absolute;
left: 50%;
top: 50%;
margin: (-($height)/2) 0 0 (-($width)/2);
}
div{
@include br4(4px); /* 调用混合宏 */
@include br3(); /* 没有传值3px */
@include br6(); /* 如果不传值就是6px,传值会覆盖原始值 */
}
.pos-center{
@include position-center(600px, 300px);
}
2. 继承@extend()
如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 继承。
不足:如果是类(.class
),不管有没有调用(@extend
),在编译的时候,都会生成对应的CSS。
.db{ display:block; }
div{ @extend .db }
生成的代码:
.db, div{ display:block; } /* .db也生成出来 */
SCSS:
@mixin border-radius{
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
@include border-radius;
}
.box {
@extend .btn;
margin-bottom: 10px;
}
CSS:
/* 生成后的代码 */
.btn, .box { -webkit-border-radius: 3px; border-radius: 3px; }
.box { margin-bottom: 5px; }
3. 占坑符%placeholder
占坑和继承基本类似,唯一不同的是,相同的生成CSS块并没有在类中存在,而是额外声明。
如果不调用已声明的占位符,将不会产生任何CSS。
如果在不同选择器调用占位符,那么编译出来CSS将会把相同的代码合并在一起。
不足:就是不能传参啦!个人觉得%placeholder优于@extend
。
SCSS:
%mt15 {
margin-top: 15px;
}
%pt15{
padding-top: 15px;
}
.btn6 {
@extend %mt15;
@extend %pt15;
}
.block {
//@extend .btn6
@extend %mt15;
@extend %pt15;
}
CSS:
/* 生成的代码 */
.btn6, .block { margin-top: 15px; }
.btn6, .block { padding-top: 15px; }
/* 然而不会和已有代码合并,倒是合并啊 */
4. Reference API
SASS_REFERENCE — Sass Documentation #Directives
注:为了第一篇文章发布成功,回头整理整理SASS。
如有不正之处,欢迎指正。