Sass(Scss)学习，主要是在vue中使用

前言

参考了几篇文章之后，做一个笔记，对scss学习做一个总结
Sass.vs.Less | 简介与比较 这篇文章主要是进行一些对比，挺好的

自从用了Sass，我比以前更快了😆 这篇文章看完入门没问题

爆肝三天，学习Scss-看这篇就够了 这个更加详细，而且日期也是2022-10，是最新的

关于如何在Vue中使用scss vue中使用 重要
如何在vue项目中引入scss,并使用scss样式 更详细

我发现掘金的页面真好看，csdn审美还是low了一些。

必会

Scss是最新版的叫法

scss的变量有一点像shell编程里的变量： $

主要是加了变量和嵌套，这两个是最实用的，尤其是嵌套，这样可以少写很多代码，同时css结构也会更加清晰。

示例：省去前缀了

#content {
  article {
    h1 {
      color: #333;
    }
    p {
      margin-bottom: 1.4em;
    }
  }
  aside {
    background-color: #eee;
  }
}

2.1 父选择器的标识符&

在 scss 中，有时候我们需要在子级当中使用父级选择器，此时我们就需要使用&来选取父级选择器

.div1 {
  width: 100px;
  height: 100px;
}
.div1 img {
  width: 100%;
  height: auto;
}
.div1:hover {
  border: 1px solid black;
}

复制代码上面的 css代码经过scss换写后，可以简写为如下

.div1 {
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: auto;
  }
  &:hover {
    border: 1px solid black;
  }
}

2.2 子级选择器中的> ~与+

'>'代表是的子级选择器
空格代码的是后代选择器
'+'代表的是相邻兄弟选择器
‘～’代表兄弟选择器
以上的四种用法与 CSS 的选择器保持一致

变量
嵌套CSS规则
混合器
继承

以上的四种是 Sass 的核心内容，也是最基础内容，通过了解学习后，我们可以快速的编写页面样式，提高开发效率，做到 CSS 代码重复率低，可复用性高。

但是光看是学不会的，我建议各位小伙伴要有强上的精神，先强行使用到目前正在做的项目中，熟悉一段时间，自然可以写出优质的SCSS代码。

目前大部分的实现都是随着前端项目一起打包构建，所以主要是学会在vue中配置scss并使用