scss常用特性以及进阶使用

scss

scss作为css预处理器，提供变量、嵌套、混合、继承等特性，能够使css书写更有趣和程序化。

scss常用特性

变量

变量可以用于存储需要在css中复用的信息，例如颜色，字体，字号。维持全局的样式统一。

scss书写

<!-- 存储变量表 -->
$primary-color: #ddd;
$border-color: #d3d3d3;
$light-gray-color: #f3f3f3;
$gray-colir: #333;
$medium-font: 16px;
<!-- 实际使用 -->
body {
  font-size: $medium-font;
  color: $primary-color:
}

css效果

<!-- 实际使用 -->
body {
  font-size: 16px;
  color: #ddd;
}

嵌套

处理样式层级问题（不建议过度嵌套，导致css难以维护），用于书写更高可读性css。
scss书写

<style lang="scss" scoped>
.nav {
  color: #ddd;
  p {
      font-size: 14px;
  }
  span {
      font-size: 12px;
  }
  a {
    text-decoration: none;
  }
}
</style>

css效果

.nav {
  color: #ddd;
}
.nav p {
  fon