|
关于SASS，这里有一个方便的
默认变量
默认变量在后面使用!default，存在的意思是定义一个默认值，根据具体的需求专门用来覆盖的。想要覆盖只需要在重新定义变量即可(很多文章说要在前面重新定义，经过本人测试，顺序并不重要！)。
选择器嵌套
&:hover{
color:#ddd;
}
}
}
的编译结果是：
top_nav li {
float: left;
}
top_nav a {
padding: 0 10px;
color: #fff;
}
top_nav a:hover {
color: #ddd;
}
其中&表示父级。
属性嵌套
属性嵌套一般是具有共同的前缀，例如border-width,border-color都是以border开头的：
编译结果：
混合声明和调用
使用@mixin和@include可以声明宏和调用宏（关于宏可以理解为C语言中的宏替换）。主要目的是复用代码：
// 调mixin
button{
@include border-radius;
}
生成代码：
有参mixin
在上面的例子中是一个最简单的mixin，下面看一个稍微复杂点的例子,该例子传入了一个默认值：
编译的css：
.opacity-80 {
opacity: 0.8;
filter: alpha(opacity=80);
}
多参mixin
多组值mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点"..."表示，如$variables...。
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,.3),0 3px 3px rgba(0,0 4px 4px rgba(0,.3));
}
继承
选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。通过@extend语法实现:
编译结果：
.seriousError {
border-width: 3px;
}
关于extend和mixin的取舍
混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。
占位符%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
.btn {
@extend %mar;
@extend %pad;
}
.block {
@extend %mar;
span {
@extend %pad;
}
}
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
