引用SCSS
- 已经使用vue-cli初始化过项目后,安装 node-sass和sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
- 在vue文件中就可以使用啦
<style lang="scss"></style>
使用SCSS,大概对scss有个了解,以便自己容易上手
-
嵌套规则Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
-
父选择器 &
常用的是设置样式(&:hover &:nth-child(2n) &:after 等等)
& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器 -
属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间.funky { font: { family: fantasy; size: 30em; weight: bold; } }
-
变量 $
变量以美元符号开头,赋值方法与 CSS 属性的写法一样