SASS-知识点总结
变量
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译为
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
继承
在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式,一般会这样写:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
Mixin
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。
混合指令的用法是在 @mixin 后添加名称与样式,比如名为 large-text 的混合通过下面的代码定义:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混合也需要包含选择器和属性,甚至可以用 & 引用父选择器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
对比extend和include
3.2版本后,选择器占位符%placeholder能解决继承中的缺点。使用(%)开始,而且编译出来的CSS代码中并不会包括%placeholder规则中的样式,除非是通过@extend对其进行调用。
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@extend %icon;
/*错误图标指定的样式... */
}
.info-icon {
@extend %icon;
/* 信息图标指定的样式... */
}
编译出的CSS:
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/*错误图标指定的样式... */
}
.info-icon {
/* 信息图标指定的样式... */
}
使用@mixin .icon来实现上面示例的效果:
@mixin icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@include icon;
/*错误图标指定的样式... */
}
.info-icon {
@include icon;
/* 信息图标指定的样式... */
}
编译出来的CSS:
.error-icon {
transition: background-color ease .2s;
margin: 0 .5em;
/*错误图标指定的样式... */
}
.info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
/* 信息图标指定的样式... */
}
使用@extend调用定义好的选择器占位符%placeholder有所限制,他不能在不同的@media中运行。
在某些情况下,@extend可以大大的减化你的CSS输出,并且显著的提高你的CSS性能。
压缩css
sass-loader -> 编译sass文件为css文件
css-loader -> 编译css文件为字符串
style-loader -> 把css字符串打入html文件的style标签中。