原生CSS扩展语言SASS的使用教程

原生CSS的短板

原生的CSS不支持层级写法，导致在书写CSS样式时，会写很多冗余的代码，比如下面这段代码

.jumbotron { position: relative; padding: 40px 0; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075); background: #020031; background: linear-gradient(45deg,#020031,#6d3353); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#020031″,endColorstr=”#6d3353″,GradientType=1); box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2) } .jumbotron a { color: #fff; color: hsla(0,0%,100%,.5); transition: all .2s ease-in-out } .jumbotron aa:hover { color: #fff; text-shadow: 0 0 10px hsla(0,0%,100%,.25) } .jumbotron .container { position: relative; z-index: 2 } .jumbotron:after { content: “”; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../img/bs-docs-masthead-pattern.png) repeat 50%; opacity: .4 }

代码的实际做用就是为了为jumbotron下元素添加样式，但每一个样式的定义都需要使用父类.jumbotron开头，这是为了增加权重。原生的CSS是不支持定义变量的，如果你要定义一个主题色，合作和菜单栏的宽度，都是不行的。有人觉得原生的css在应对更加复杂的排版时，显得有些力不从心。于是就开发了很多工具库，这些工具库补起来了CSS的短板，使其可以定义变量，编写函数，使用更复杂的方程式来生成属性值。其中一个就是我们今天要讲的sass，一个基于Ruby语言开发而成的CSS扩展语言。

Sass的使用

Sass的安装有很多方法，在各个平台都可以,这里使用npm来介绍安装。

npm install -g sass

Sass有一下几个特征

支持声明变量 支持嵌套CSS规则 导入Sass文件 静默注释 混合器 使用选择器继承来精简CSS 下面让我来一一解释其作用。 sass的文件扩展名是 .scss,我们要使用sass的文件，就要遵照其语法来来编写sass文件

目前你可以直接在Vue项目里使用Sass，只需下载几个库即可。

声明变量

sass使用$符号来标识变量 下面就是定义了二个变量

$width: 200px; $height:300px;

变量名使用$开头，并且以;结尾。 定义的变量可以直接在CSS属性中使用如

$width: 200px; $height: 300px; $cust-color: #ddd; .test-wrap{ margin: 0 auto; width: $width; height: $height; background: black; border: 1px solid $cust-color; }

编译之后就会变成这个样子

.test-wrap{ margin: 0 auto; width: 200px; height: 300px; background: black; border: 1px solid #ddd; }

变量名可以使用中划线-也可以使用下划线_,两种方式sass都是兼容的。

嵌套的CSS规则

CSS嵌套就是为解决 为子元素设置属性时，必须要地带上父元素的诟病， 原生css的写法

.jumbotron {} .jumbotron a {} .jumbotron aa:hover {} .jumbotron .container{} .jumbotron:after{}

SASS的写法

.jumbotron{ a{} aa{ &:hover{} } .container{} &:after{} }

是不是简单很多了，使用嵌套的方式来表明元素之间的包含关系。 二种方式可以达到同样的效果，此处需要注意的是 伪类，伪元素必须使用&符号

&:hover,&fouce &::after,&::before SASS的模块化导入

一个项目我们会使用很多的SASS文件，这些模块在CSS是可以进行分模块引入的，使用 @import。这种引入不同于原生CSS的引入，SASS中的@important是将一个SASS导入到另一个文件，相关的样式被归纳到了同一个CSS文件中。 如下图在项目中我们可以的sass可以包含这三个基本文件

@import 可以引入原生的CSS

sass的静默注释

这个特性是为了不让浏览网站源码的人看到注释

body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */ } 混合器

混合器是为增加css代码的公用性，减少代码的冗余 试想一下，目前有五个元素，他们都有着一个共同的CSS属性，border:1px solid #ddd，这是一个简单的例子，当然你可以编写一个类，这个类的规则就是border:1px solid #ddd，但实际开发中并不是只有这一条规则。对于复杂的情况我们可以使用封装，没错，就像vue中的组件封装一样，sass也可以封装一段代码，让你在任何地方调用。来看下具体的用法

@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; }

首先是定义一个混合器，使用@mixin关键词 其次在编写css是，使用@include关键词引入这个混合器。这样经过编译就就变成了这样

.notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

如果还有其他元素需要使用border-radius: 5px 只需要在该类的css声明底部使用 @include rounded-corners;即可。

混入器的命名一定要具有语义，让人看到名称就知道该混入器有什么作用.

此外混入器还可以使用参数，

@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } a { @include link-colors(blue, red, green); }

传入参数的混入器，很像一个函数。 而且混入器可以指定默认参数，这样就可以不用传入所有的参数了

@mixin link-colors( $normal, $hover: $normal, $visited: $normal ) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } 选择器继承来精简CSS

在编写CSS中我们最讨厌的就是编写重复的代码，除了使用混入器，sass还支持继承来减少代码的冗余

//通过选择器继承继承样式 .error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }

.seriousError 使用@extend来集成 .error

掌握了sass你不仅仅可以让你的css代码编写的更好，更精简，而且你能从sass的设计思想中得到很多精简工作的思路。