！我是在vue脚手架安装的1安装npminstall--save-devsass-loader//sass-loader依赖node-sassnpminstall--save-devnode-sass2配置：webpack.base在build文件夹中添加配置.conf.js的规则//如果你是.sass文件，需要在APP中设置{test:/\.sass$/,loaders:['style','css','sass']}3.vue修改中的style标签4使用（一）变量1-1）使用变量sass的一个重要特点是造福于人，就是为css引入了变量。可以将可重用的css属性值定义为变量，然后通过变量名来引用，而不用重复写这个属性值。或者，对于一个只使用一次的属性值，可以给它起一个通俗易懂的变量名，让人一眼就知道这个属性值的用途。sass使用$符号来标识变量（老版本的sass使用!来标识变量，主要是因为!highlight-color看起来很丑。）1-2）变量声明$back:red#appcolor:$back//变量声明也分为全局变量和局部变量//这个也有用$highlight-color:#F90;$highlight-border:1pxsolid$highlight-color;.selected{border:$highlight-border;}//Compiled.selected{border:1pxsolid#F90;}1-3）sass中使用变量命名——其实和_一样，比如$link-color和$link_color其实指向同一个变量。$link-color:blue;a{color:$link_color;}//编译了一个{color:blue;}（2）在嵌套的css规则中重复写selector很烦人css.如果要写一堆指向页面同一部分的样式，往往需要一遍又一遍地写同一个ID：#contentarticleh1{color:#333}#contentarticlep{margin-bottom:1.4em}#contentaside{background-color:#EEE}在这种情况下，sass允许您只编写一次并使样式更具可读性。在Sass中，你可以像俄罗斯套娃一样在规则块中嵌套规则块。Sass会在你输出css的时候帮你处理好这些嵌套的规则，避免你重复写。#content{article{h1{color:#333}p{margin-bottom:1.4em}}aside{background-color:#EEE}}/*编译后*/#contentarticleh1{color:#333}#contentarticlep{margin-bottom:1.4em}#contentaside{background-color:#EEE}(2-1)父选择器的标识符&;使用后代选择器和伪类知道怎么写的时候可能会比较麻烦。这时候&就派上用场了文章一篇{color:blue;&:hover{color:red}}//编译后//其实&相当于父文章a{color:blue}articlea:hover{color:red}(2-2)组选择器的嵌套；只需要在处理groups的时候用到，split一下即可，完全可以完美解析，不费吹灰之力。container{h1,h2,h3{margin-bottom:.8em}}.containerh1{margin-bottom:.8em}.containerh2{margin-bottom:.8em}.containerh3{margin-bottom:.8em}这个nav也是一样，aside{a{color:blue}}//compilednava,asidea{color:blue}(2-3)子组合选择器和同级组合选择器：>,+和~;以上三种组合选择器必须与其他选择器结合使用，以指定浏览器只选择特定上下文中的元素。article{//同层所有组合选择器~article{border-top:1pxdashed#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;宽度：1px；颜色：#ccc；}}//编译完nav{border-style:solid;边框宽度：1px；border-color:#ccc;}你甚至可以这样写nav{border:1pxsolid#ccc{left:0px;右：0px；}}//编译后的nav{border:1pxsolid#ccc;左边框：0px；border-right:0px;}3导入SASS文件；css有一个特别不常见的特性，就是@import规则，它允许在一个css文件中导入其他css文件。但是这样带来的后果是浏览器只有在执行@import的时候才会去下载其他的css文件，导致页面加载非常慢。Sass也有@import规则，不同的是sass的@import规则是在生成css文件时导入相关文件。这意味着所有相关样式都被分组到同一个css文件中，而不需要额外的下载请求。4默认变量值通常，你重复声明一个变量，只有最后一次声明有效，它会覆盖之前的值。例如：$链接颜色：蓝色；$链接颜色：红色；一个{颜色：$link-color;//red}但是如果你不想出现这种情况，可以使用sass的!default标签来达到这个目的。它与css属性中!important标签的对立面非常相似。不同的是!default用于变量，意思是：如果变量声明并赋值，则使用声明的值，否则使用默认值。5评论正文{颜色：#333；//这种注释内容不会出现在生成的css文件中padding:0;/*这种评论内容会出现在生成的css文件中*/}6Mixer如果你的整个站点有一些小的样式相似之处（比如一致的颜色和字体），最好使用变量来处理这始终如一。但是当你的样式越来越复杂，需要大块的代码来重用样式时，自变量就无法处理这种情况了。您可以通过sass混合器重用大部分样式。混合器是使用@mixin标识符定义的。看起来很像其他CSS@identifiers，比如@media或@font-face。该标识符为大部分样式命名，以便您可以通过引用该名称轻松地重用一部分样式。下面的sass代码定义了一个非常简单的混合器，用于添加跨浏览器的圆角边框。@mixin圆角{-moz-border-radius:5px;-webkit-边框半径：5px；border-radius:5px;}然后你可以通过@include在你的样式表中使用这个混合器，把它放在你想要的任何地方。@include调用将提取mixin中的所有样式并将它们放在调用@include的位置。如果这样写：注意{background-color:green;边框：2px实心#00aa00；@includerounded-corners;}//sass最终生成：//在编译之后。notice{background-color:green;边框：2px实心#00aa00；-moz-边框半径：5px；-webkit-边框半径：5px；border-radius:5px;}这个混音器非常容易使用，如果你不小心，你可能会过度使用它。大量重用会导致生成的样式表很大并且加载速度很慢。因此，首先我们将讨论混音器的使用场景并避免其滥用。(6-1)向混音器传递参数；混音器并不总是必须生成相同的风格。您可以通过在@include混音器时将参数传递给混音器来自定义混音器生成的确切样式。当@includemixer时，参数实际上是可以分配给css属性值的变量。如果你写过JavaScript，这个方法和JavaScript的功能非常相似：@mixinlink-colors($normal,$hover,$visited){color:$normal;&:hover{颜色：$hover;}&:visited{颜色：$visited;}}当混合器被@included时，您可以将其作为css函数传递。如果你这样写：a{@includelink-colors(blue,red,green);}//Sass最终会生成：a{color:blue;}a:hover{颜色：红色；}a:visited{颜色：绿色；}其实@mixin的方法有很多，可以去官网查看7使用选择器继承来简化CSS；使用sass时，减少重复的最后一个主要功能是选择器继承。基于NicoleSullivan的面向对象CSS的概念，选择器继承是指一个选择器可以继承为另一个选择器定义的所有样式。这是通过@extend语法实现的，如下代码所示：//inheritancestylethroughselector.error{border:1pxsolidred;背景色：#fdd;}.seriousError{@extend.error;border-width:3px;}.seriousError不仅会继承.error本身的所有样式，任何与.error相关的组合选择器样式也会以组合选择器的形式被.seriousError继承，代码如下//。seriousError继承自.error.errora{//应用于.seriousErroracolor:red;font-weight:100;}h1.error{//应用于hl.seriousErrorfont-size:1.2rem;}关于@extend，你应该知道两件重要的事情。与Mixer相比，继承生成的CSS代码相对较少。因为继承只是重复选择器，而不是属性，所以使用继承往往会产生比mixin更小的css。如果您非常关心网站的速度，请记住这一点。继承遵循css级联的规则。当两个不同的css规则应用于同一个html元素，并且两个不同的css规则对同一个属性的修饰有不同的值时，css级联规则将决定应用哪种样式。很直观：通常是权重高的选择器获胜，如果权重相同则后面定义的规则获胜。mixer本身不会造成css级联的问题，因为mixer是直接把style放到cssrule中，继承存在样式级联的问题。继承样式会保持原来的定义位置和选择器权重不变。通常这不会造成任何问题，但知道也无妨。以上是我在官网上了解到的信息。不全面，但我觉得对于日常开发来说绝对够用了。附上官网地址Sass官网地址
