在vue项目中引用并使用SCSS

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_42301962/article/details/99054105

引用SCSS

1. 已经使用vue-cli初始化过项目后，安装 node-sass和sass-loader

npm install node-sass --save-dev
npm install sass-loader --save-dev

2. 在vue文件中就可以使用啦

<style lang="scss"></style>

使用SCSS，大概对scss有个了解，以便自己容易上手

1. 嵌套规则Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

2. 父选择器 &
   常用的是设置样式(&:hover &:nth-child(2n) &:after 等等)
   & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

3. 属性嵌套
   有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间

   .funky {
     font: {
       family: fantasy;
       size: 30em;
       weight: bold;
     }
   }
   

4. 变量 $
   变量以美元符号开头，赋值方法与 CSS 属性的写法一样