前端vue的样式

sass/scss 语法说明

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

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

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

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

<style lang="sass">
// sass 和 stylus 的语法基本一样（要求去掉花括号和分号）
.outerbackground-color: pinkpadding: 10px.innerbackground-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>