世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
我是在vue脚手架中安装的
1 安装
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
2 配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置
// 如果你是.sass文件要设置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
3 在APP.vue中修改style标签
<style lang="scss">
4 使用
(1) 变量
1-1) 使用变量
sass
让人们受益的一个重要特性就是它为css
引入了变量。你可以把反复使用的css
属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。sass
使用$
符号来标识变量(老版本的sass
使用!来标识变量。改成$是多半因为!highlight-color
看起来太丑了。)
1-2) 变量声明
$back: red
#app
color: $back
// 变量声明也分为全局变量和局部变量
// 这样也是好用的
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
1-3) 变量命名
在sass
中使用-
和_
其实是一样的 例如$link-color
和$link_color
其实指向的是同一个变量。
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
(2) 嵌套css规则
css
中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个ID
:
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
像这种情况,sass
可以让你只写一遍,且使样式可读性更高。在Sass
中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass
在输出css
时会帮你把这些嵌套规则处理好,避免你的重复书写。
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
(2-1) 父选择器的标识符&;
使用后代选择器和为了伪类的时候可能就是比较麻烦了 不知道怎么写。这个时候&
就派上用场了
article a {
color: blue;
&:hover { color: red }
}
// 编译后
// 其实&相当于是父级
article a { color: blue }
article a:hover { color: red }
(2-2) 群组选择器的嵌套;
在处理群组的时候只需要用,
分割就好了,就能完美的解析不用内么麻烦
.container {
h1, h2, h3 {margin-bottom: .8em}
}
<!--编译后-->
.container h1 {margin-bottom: .8em}
.container h2 {margin-bottom: .8em}
.container h3 {margin-bottom: .8em}
这种也是一样的
nav, aside {
a {color: blue}
}
//编译后
nav a, aside a {color: blue}
(2-3) 子组合选择器和同层组合选择器:>、+和~;
上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。
article {
// 同层全体组合选择器
~ article { border-top: 1px dashed #ccc }
// 直接子元素
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
// 同层相邻组合选择器
nav + & { margin-top: 0 }
}
(2-4) 嵌套属性;
在sass
中,除了CSS
选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color
以及border-*
等也是非常烦人的。在sass
中,你只需敲写一遍border
:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
// 编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
你甚至还可以这样写
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
// 编译后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
3 导入SASS文件;
css
有一个特别不常用的特性,即@import
规则,它允许在一个css
文件中导入其他css
文件。然而,后果是只有执行到@import
时,浏览器才会去下载其他css
文件,这导致页面加载起来特别慢。sass
也有一个@import
规则,但不同的是,sass
的@import
规则在生成css
文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css
文件中,而无需发起额外的下载请求。
4 默认变量值
一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明:
$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}
但是你不想这种情况你可以使用sass
的!default
标签可以实现这个目的。它很像css
属性中!important
标签的对立面,不同的是!default
用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
5 注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
6 混合器
如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass
的混合器实现大段样式的重用。
混合器使用@mixin
标识符定义。看上去很像其他的CSS
@标识符,比如说@media
或者@font-face
。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass
代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
然后就可以在你的样式表中通过@include
来使用这个混合器,放在你希望的任何地方。@include
调用会把混合器中的所有样式提取出来放在@include
被调用的地方。如果像下边这样写:
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成:
// 编译后
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
混合器太好用了,一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大,导致加载缓慢。所以,首先我们将讨论混合器的使用场景,避免滥用。
(6-1)给混合器传参;
混合器并不一定总得生成相同的样式。可以通过在@include
混合器时给混合器传参,来定制混合器生成的精确样式。当@include
混合器时,参数其实就是可以赋值给css
属性值的变量。如果你写过JavaScript
,这种方式跟JavaScript
的function
很像:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当混合器被@include
时,你可以把它当作一个css
函数来传参。如果你像下边这样写:
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
其实@mixin 的方法还有很多 可以官网查看
7 使用选择器继承来精简CSS;
使用sass
的时候,最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan
面向对象的css
的理念,选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend
语法实现,如下代码:
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.seriousError
不仅会继承.error
自身的所有样式,任何跟.error
有关的组合选择器样式也会被.seriousError
以组合选择器的形式继承,如下代码:
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
关于@extend
有两个要点你应该知道。
跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css
体积更小。如果你非常关心你站点的速度,请牢记这一点。
继承遵从css
层叠的规则。当两个不同的css规则应用到同一个html
元素上时,并且这两个不同的css
规则对同一属性的修饰存在不同的值,css
层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。
混合器本身不会引起css层叠的问题,因为混合器把样式直接放到了css规则中,而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题,但是知道这点总没有坏处。
以上就是我在官网所了解到的信息, 不算全面, 但是觉得在日常开发肯定够用了. 附上官网地址