网站建设资讯

NEWS

网站建设资讯

web前端中Sass有什么作用-创新互联

本篇内容主要讲解“web前端中Sass有什么作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“web前端中Sass有什么作用”吧!

10年积累的成都网站建设、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有三元免费网站建设让你可以放心的选择与我们合作。

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

sass变量声明;

sass变量的声明和css属性的声明很像:

$highlight-color:#F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值,甚至是以空格分割的多个属性值,如$basic-border:1pxsolidblack;,或以逗号分割的多个属性值,如$plain-font:"MyriadPro"、Myriad、"HelveticaNeue"、Helvetica、"LiberationSans"、Arial和sans-serif;sans-serif;。这时变量还没有生效,除非你引用这个变量——我们很快就会了解如何引用。

在这段代码中,$nav-color这个变量定义在了规则块外边,所以在这个样式表中都可以像nav规则块那样引用它。$width这个变量定义在了nav的{}规则块内,所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量,不会对这里造成影响。

只声明变量其实没啥用处,我们最终的目的还是使用它们。上例已介绍了如何使用$nav-color和$width这两个变量,接下来我们将进一步探讨变量的使用方法。

sass变量引用;

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

到此,相信大家对“web前端中Sass有什么作用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前题目:web前端中Sass有什么作用-创新互联
本文来源:http://cdweb.net/article/dgcoje.html