About
本文是我在学习Sass的过程中记录的，对于不想看官方文档但是又急需使用Sass的人具有一定参考作用，但是如果读者想深入学习Sass，请参考Sass官方文档：https://www.sass.hk/docs/
一、在SCSS文件中使用变量
1. 声明变量
sass变量的声明和css属性的声明很像：
$bgcolor: red;
上面的代码的意思是给变量bgcolor赋值为red，这样我们在后面的SCSS语句中就可以使用这个变量，例如：
$bgcolor: red;
#app {
background: $bgcolor;
}
上面的代码编译后：
#app {
background: red;
}
当然，为了方便，我们也可以这么声明：
$border: 1px solid red;
.content {
border: $border; /*等价于 border: 1px solid red */
}
2. 使用变量
如果我们需要在每个页面的SCSS文件中使用这些变量该怎么办呢？这时候我们可以在当前SCSS文件中引入其他的SCSS文件。比如，我们每个页面都需要背景色，和一个用来调试的边框，我们可以把这些变量写在一个SCSS文件中，然后在需要使用的页面中引入该SCSS文件，代码如下：
/* styles/styles.scss */
$bgcolor: #e5e5e5;
$border: 1px solid red;
/* src/pages/home.vue */
<style lang="scss" scoped>
@import 'styles/styles.scss'
#app {
background: $bgcolor;
.content {
border: $border;
}
}
这里有一个效果图（和上面的代码无关，是我测试用的）：
导入scss.gif
3. 变量中使用下划线还是中划线
sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。
二、嵌套规则
sass风格通过代码缩进来确定选择器的父子关系，并且不需要使用分号，例如：
#app
color: red
.content
border: 1px solid blue
scss风格则是通过大括号的嵌套来确定选择器的父子关系，并且需要使用分号，比较接近CSS的写法，所以使用范围更广。例如：
#app {
color: red;
.content {
border: 1px solid blue;
}
}
1. 父选择器的标识符 &
当我们使用例如:hover等伪类选择器时，比如：
article a {
color: blue;
:hover { color: red }
}
sass会编译成article a :hover, 然而我们期望的是article a:hover，所以此时我们需要用到 &：
article a {
color: blue;
&:hover { color: red }
}
2. 群组选择器的嵌套
sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来：
.container {
h1, h2, h3 {margin-bottom: .8em}
}
编译为：
.container h1, .container h2, .container h3 { margin-bottom: .8em }
完全符合我们的期望
3. 子组合选择器和同层组合选择器：>、+和~;
上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。
- 子组合选择器
>
article section { margin: 5px } /* 选择article里面所有的section */
article > section { border: 1px solid #ccc } /* 选择article里面紧跟着的第一个section */
- 同层相邻组合选择器
+
header + p { font-size: 1.1em } /* 选择header元素后紧跟的p元素 */
- 同层全体组合选择器
~
/* 选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素 */
article ~ article { border-top: 1px dashed #ccc }
三、导入Sass文件
sass的@import规则是在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。举例来说，@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。（--摘自官方文档）
image.png
1. 直接导入
@import 'path'
2. 嵌套导入
/* styles/styles.scss */
aside {
background: blue;
color: white;
}
/* src/pages/home.vue */
#app {
@import "styles/styles.scss"
}
编译为：
#app {
aside {
background: blue;
color: white;
}
}
3. 导入原生CSS
因为sass完全兼容css语法，所以只需要把我们需要导入的test.css的后缀改为test.scss，然后直接导入就行啦。
结束语
写了这么多好累，如果小伙伴看了觉得有帮助就点个赞吧，谢谢啦，以后会接着更新的。
网友评论