作者:empty 出版社:empty |
Swidth这个变量定义在了nav的() 规则块内, 所以它只能在nav规则块内使用。这意味着是你可以在文档内容由网友们编写和整理, 书栈(Bookstack.CN) 难以确认文档内容知识点是否错满, 如果您在阅读文档同时, 如果您在日常工作、生活和学习中遇到有价值有营养的知识文档, 欢迎分享到书栈(BookStack.CN) ,为知识的传承献上您的一份力量!文档地址:http://www.bookstack.cn/books/sass-quickstart书栈官网:http://www.bookstack.cn书栈开源:https://github.com/TruthHun分享,让知识传承更久远!感谢知识的创造者,感谢知识的分享者,也感谢每一位阅读到此处的读者,因为我们
1.使用变量;sass让人们受益的一个要特性就是它为css引入了变量。你可以把反复使用的cas属性值定义成变量, 然后通过变量名来引用它们,而无需重复书写这一厦性值。或者,对于仅使用过一次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。sass使用s符号来标识变量(老版本的6ass使用·来标识变量。改成是多半因为thigh11ght-calor看起来太丑了。) , 比如s highlight-cpl or和Ssi rebar-width, 为什么选择s符号呢?因为它好认、更具美感, 且在CSS中并无他用, 不会导致与现存或未来的css语法冲突。1-1.变量声明;soss变量的声明和css属性的声明很像:这意味着变量s highlight-color现在的值是nEB.任何可以用作css属性值的限值都可以用作sass的变量值,甚至是以空格分割的多个属性值,如sbasic-border:ipxcolidblack;,或以逗号分割的多个国性值,如splain-font:NyriadPro 、Hyriad, “Helvetica Neue*.Helvetica, “Liberata on Sans Arial和sans-serif; sans-serif; .这时变量还没有生效,除非你引用这个变量一我们很快就会了解如何引用。与css属性不同, 变量可以在css规则块定义之外存在。当变量定义在ess规则块内, 那么该变量只能在此规则块内使用。如果它们出现在任何形式的() 块中(如ered i a或者ef out-face块) , 情况也是如此:4.S nav color:#F 99;样式表的其他地方定义和使用wld th变量, 不会对这里造成影响,只声明变量其实没啥用处, 我们最终的目的还是使用它们, 上例已介绍了如何使用trav-cul or和suid tn这两个变量,接下来我们将进一步探讨变量的使用方法。
2.变量引用;凡是Ess属性的标准值(比如说1px或者bold) 可存在的地方, 变量就可以使用。css生成时, 变量会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的伍,则所有引用此变量的地方生成的值都会随之改变。看上边示例中的s highlight-color变量, 它被直接赋值给borda r属性, 当这段代码被编译输在声明变量时,变量值也可以引用其他变量。当你通过粒度区分,为不同的值取不同名字时,这相当有用。下例在独立的颜色值粒度上定义了一个变量,且在另一个更复杂的边框值粒度上也定义了一个变量:
2.嵌套CSS规则;8中重复写选择器是非常恼人的。如果婴写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID:像这种情况,sass可以让你只写一遍, 且使样式可读性更高。在Sass中, 你可以像俄罗斯套娃那样在规则块中嵌套规则块。suss在输出css时会帮你把这些嵌套规则处理好, 避免你的重复书写。上边的例子, 会在输出css时把它转换成跟你之前看到的一样的效果, 这个过程中,sass用了两步, 每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。首先, 把x can tent(父级) 这个id放到article选择一个给定的规则块, 既可以像普通的CSS那样包含属性, 又可以嵌套其他规则块。当你同时要为一个容器元素及其子元容器元素的样式规则会被单独抽离出来,而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器里边立刻应用一个类似