Sass与Compress实战：第二章

Posted 2020-07-18

1.使用变量

　　Sass使用$符号来标识变量，比如$highlight-color。

1.1声明变量

　　Sass声明变量和CSS声明属性很像：

 

$highlight-color : #abcdef;

 

　　这意味着变量$highlight-color现在的值时#abcdef。任何可以用作CSS属性值的赋值都可以用作Sass的变量值，甚至是以空格分割的多个属性值，如$basic-border : 1px solid black;或以逗号分割的多个属性值，如$plain-font : "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica。只有当引用了变量时它才会生效。

　　与CSS属性不同，变量可以在CSS规则块定义之外存在。当变量定义在CSS规则块内，那么该变量只能在此规则块内使用。例如：

$nav-color: #abcdef;
nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
}

　　在这段代码中，变量$nav-color定义在规则块外部，因此这个样式表中的任意位置都可以引用这个变量，而$width定义在了规则块内部，因此只有在nav的规则块内部才可以引用它。也就意味着你可以在样式表的其他地方定义和引用$width不会影响到nav的规则块内部的$width变量。

1.2变量引用

　　凡是CSS属性的标准值(比如说1px或者bold)可存在的地方，变量就可以使用。CSS生成时，变量会被它们的值所替代，之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用到这个变量的地方生成的值都会被改变。

　　在声明变量时，变量值也可以引用其他变量。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：

 

$highlight-color : #abcdef;
$highlight-border : 1px $highlight-color solid ;

.selected {
    border : $highlight-border;
}

 

　　这里，$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。

1.3变量名用中划线还是下划线分隔

　　Sass的变量名可以与CSS中的属性名和选择器名称相同，包括中划线和下划线。这两种方法互相兼容，用中划线声明的变量可以用下划线的方式引用，例如：

$link-color : blue;

a {
    color : $link_color;
}

$link-color 和 $link_color其实指向的是同一个变量。除了变量，混合器和Sass函数的中划线命名内容和下划线命名内容也是互通的。但在Sass中纯CSS部分不通，比如类名、ID或属性名。

2.嵌套CSS规则

　　Sass的嵌套规则能够避免重复书写CSS选择器。假设有这么一段代码：

#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #eee }

　　Sass文件代码：

#content {
    article {
        h1 { color : #333 }
        p { margin-bottom : 1.4em }
    }
    aside { background-color : #eee }
}

　　上边的例子，Sass会在输出CSS时把它转换成跟你之前看到的一样的效果。在这个过程中，Sass用了两步：首先，把#content（父级）这个ID放到article（子级）选择器和aside（子级）选择器的前边：

#content article { 
    h1 { color : #333 }
    p { margin-bottom : 1.4em }
}
#content aside { background-color : #eee }

　　然后，#content article里面还有嵌套的规则，Sass重复一遍上边的步骤，把新的选择器添加到内嵌的选择器前边：

#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #eee }

　　一个给定的规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时，这种能力就非常有用：