vue-cli 3.0脚手架，从入门到放弃（四）-UI（sass）

为你们学习操碎心啊。。（未完待续。。）

吐槽

既然我们创建好项目了，是不是已经按不住想写代码的手了呢！那么我们从哪里入手好。一般来说，前端项目是由我们可见的html+css样式决定的，然后加上js构成完整的一个页面。 html就不说了，最基本的东西。页面样式的好看程度，是由css控制的。

看个最基础的css。

然后它的展示

看来是不是还不错的样子？如果我们一个页面有几百个标签呢，而且还是包含形式的，UI要求复杂时，原始的css并不能满足我们的需求。因为太过于繁琐也不利于维护。这是有两个 css的扩展语言横空出世，咔咔咔，一个是 sass，另个是less. 我们目前只看下 sass。

sass引用

安装

首先，要在我们的项目中安装，使用两个命令

npm install node-sass --save-dev

npm install sass-loader --save-dev

如果安装失败，可以配置淘宝镜像

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

用的工具是 ·vscode，得在设置里配置

 "files.associations": {
        "*.vue": "vue"
    },

这样工具就不会对sass 报错了。先看下sass的代码

这是sass的基本语法，对照着我们的css来看，是不是css很明确，div包含了一个p和div标签，然后二级div又有文字和一个p标签，根据css就能看出来我们标签的层级。

使用和常用语法

在vue脚手架里，要在使用sass语法style上面加上rel="stylesheet/scss" lang="scss"。

1.使用变量

sass让人们受益的一个重要特性就是它为css引入了变量。你 可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。 或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。 sass使用$符号来标识变量，比如上方代码中的$color1: red; $height1: 100px;

2.变量声明

$color-black:#000000;

color-black为变量的名称，这个名称你可以随便命名，前提是你能容易的识别它，#000000为变量的赋值。这样的好处在于，在这个页面任何的一个css块中，你都可以使用color-black这个颜色为黑色的代码。

比如有些按钮是颜色统一的，哪天要改了，是不是只要改这个的变量值就行了。

3.变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。

并且变量可以引用变量，

效果

变量名用中划线还是下划线分隔

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。 用中划线声明的变量可以使用下划线的方式引用，反之亦然.

$link-color: blue;
a {
  color: $link_color;
}
//编译后
a {
  color: blue;
}

在上例中，$link-color和$link_color其实指向的是同一个变量。实际上，在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。 所以在使用时，所有命名要么都用-或者都用_

4.嵌套CSS 规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID：

#content div h1 { color: #333 }
#content div p { margin-bottom: 1.4em }
#content p { background-color: #EEE }

这个例子跟文章一开始写的那个一样，就是支持多级嵌套。

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器里边立刻应用一个类似于：hover的伪类。为了解决这种以及其他情况，sass提供了一个特殊结构&。

5.父选择器的标识符&

一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边.最常见的一种情况是当你为链接之类的元素写:hover这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况sass就无法正常工作:

div a {
  color: blue;
  :hover { color: red }
}

这意味着color: red这条规则将会被应用到选择器div a :hover，div元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。

解决方法：使用一个特殊的sass选择器，即父选择器。在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方，比如h1放在哪，它就可以放在哪。

从某人代码里拿个css。之前css是这么写的。一层和它的下层看似不关联但又关联的。

用sass表示如下代码：

这样，当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换。在遇到:link ，:visited，:hover， :active，等标签时，都可以用&来嵌套。

6.群组选择器的嵌套

什么是群组选择器呢 ↓↓↓↓↓

.div h1,  .div h2,  .div h3 {
  color: red;
}

这样的css 如果不多的话，还是很方便的，如果嵌套更多更复杂呢，那就麻烦了。 sass 也给我们提供了一套更简单的解决方法。

.div{
    h1,h2,h3{
        color:red;
    }
}

这样sass 会将上方编译成上上方那个代码。

ul,nav{
    a{
        color:blue;
    }
}

这也是一种写法。尤其在当嵌套级别达到两层甚至三层以上时，与普通的css编写方式相比，只写一遍群组选择器大大减少了工作量。

有利必有弊，你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小，但实际生成的css却可能非常大，这会降低网站的速度。