SASS是成熟,稳定,强大的 CSS预处理器 ,而 SCSS 是SASS3版本当中引入的新语法特性,完全兼容CSS3的同时继承了CSS强大的动态功能。
CSS书写代码规模较大的web应用时,容易造成选择器,层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量,嵌套,混合,继承等特性,让CSS的书写更加有趣和程式化。
1.变量
SASS中可以定义变量,用来存储需要在CSS中复用的信息,方便统一修改和维护。
sass代码:
$blue:#1875e7; div { color : $blue; }
对应生成的css代码:
div { color : #1875e7; }
如果变量需要镶嵌在字符串中,就必须写在 #{} 中:
$side : left; .rounded{ border-#{$side}-radius : 5px; }
2.嵌套