前端vue的样式

sass/scss 语法说明

less sass stylus 都是 css 预处理器，语法上稍有差异，作用一样

都是让 css，增强能力，具备变量，函数.. 的能力

• sass的语法两种语法 .sass 和 .scss

  • .sass 和 .stylus 语法很像 (了解)
  • 要求省略 {} 和 分号， 缩进表示嵌套

<style lang="sass">
// sass 和 stylus 的语法基本一样（要求去掉花括号和分号）
.outer
  background-color: pink
  padding: 10px
  .inner
    background-color: red
</style>

• .scss 和 .less 语法很像， 都支持嵌套, 变量......

  • scss 声明变量：$变量名
  • less 声明变量: @变量名

<style lang="scss">
// scss和less特别像，稍有差异
$color: red;

.outer {
  background-color: $color;
  padding: 20px;
  .inner {
    background-color: blue;
  }
}
</style>