使用sass解析.pdfVIP

使⽤sass 1. 使⽤变量; sass让⼈们受益的⼀个重要特性就是它为css引⼊了变量。你可以把反复使⽤的css 属性 定义成变量，然后通过变量名来引⽤它们，⽽⽆需重复书写这⼀属性 。或 者，对于仅使⽤过⼀ 次的属性 ，你可以赋予其⼀个易懂的变量名，让⼈⼀眼就知道 这个属性 的⽤途。 sass使⽤$符号来标识变量(⽼版本的sass使⽤!来标识变量。改成$是多半因 为!highlight-color看起来太丑了。) ，⽐如$highlight-color和$sidebar- width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS 中并⽆他⽤，不会 导致与现存或未来的css语法冲突。 1-1. 变量声明; sass变量的声明和css属性的声明很像： $highlight-color: #F90; 这意味着变量$highlight-color现在的 是#F90。任何可以⽤作css属性 的赋 都 可以⽤作sass的变量 ，甚⾄是以空格分割的多个属性 ，如$basic- border: 1px solid black;，或以逗号分割的多个属性 ，如$plain-font: yriad Pro、 yriad、Helvetica Neue、Helvetica、Liberation Sans、Arial和sans-serif; sans-serif;。这时变 量还没有⽣效，除⾮你引 ⽤这个变量——我们很快就会了解如何引⽤。 与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块 内，那么该变量只能在此规则块内使⽤。如果它们出现在任何形式的{...}块中 （如 @media或者@font-face块），情况也是如此： $nav-color: #F90; nav { $width: 100px; width: $width; color: $nav-color; } //编译后 nav { width: 100px; color: #F90; } 在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都 可以像 nav规则块那样引⽤它。$width这个变量定义在了nav的{ }规则块内，所以 它只能在nav规则块 内使⽤。这意味着是你可以在样式表的其他地⽅定义和使 ⽤$width变量，不会对这⾥造成影响。 只声明变量其实没啥⽤处，我们最终的⽬的还是使⽤它们。上例已介绍了如何使 ⽤ $nav-color和$width这两个变量，接下来我们将进⼀步探讨变量的使⽤⽅法。 1-2. 变量引⽤; 凡是css属性的标准 （⽐如说1px或者bold ）可存在的地⽅，变量就可以使⽤。css ⽣成时，变量会被它们的 所替代。之后，如果你需要⼀个不同的 ，只需要改变这 个变量的 ，则所有引⽤此变量的地⽅⽣成的 都会随之改变。 $highlight-color: #F90; .selected { border: 1px solid $highlight-color; } //编译后 .selected { border: 1px solid #F90; } 看上边⽰例中的$highlight-color变量，它被直接赋 给border属性，当这段代 码被编译输出css时，$highlight-color会被#F90这⼀颜⾊ 所替代。产⽣的效 果就是给selected这个类⼀条1像素宽、实⼼且颜⾊ 为#F90的边框。 在声明变量时，变量 也可以引⽤其他变量。当你通过粒度区分，为不同的 取不同 名字时，这相当有⽤。下例在独⽴的颜⾊ 粒度上定义了⼀个变量，且在另⼀个更复 杂的边框 粒度上也定义了⼀个变量： $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected { border: 1px solid #F90; } 这⾥，$highlight-border变量的声明中使⽤了$highlight-color这个变量。 产⽣的效 果就跟你直接为border属性设置了⼀个1px $highlight-color solid 的 是⼀样的。 最后，我们来了解⼀下变量命名的实⽤技巧，以结束关于变量的介 绍。 1-3. 变量名⽤中划线还是下划线分隔; sass的变量名可