本文作者:开课吧无忧 图文编辑:开三金 通过前面几期,Sass的使用说明书已经发放给各位了,还没来得及看的同学可以查收一下。 需要复习的小伙伴,点击传送门就可以啦☟ Sass的使用说明书 今天来给大家掰扯掰扯Sass的功能说明书,各位看官准备好瓜子水果板凳,开始上课了; 关于变量的使用说明 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念。 由于变量让你能够把程序中准备使用的每一段数据都赋给一个简短、易于记忆的名字。 因此它们十分有用。 好吧好吧,其实简单来说,就是给人起外号。 我觉得250px这个值不好看,我给它起个外号叫SB,于是我以后就可以这么写了: 现在,box的宽度虽然我写的是SB,但是它实际代表的是250px。 至于前面那个美元”$”符号,它其实是一个标识。 告诉Sass, 这是一个外号,并不是一个真SB。 有了这个外号之后就很方便啦,以后如果想要修改box的宽度,直接喊一声: SB变身! 然后它就变成100px,接着box的宽度就变成100px了。 变量的操作案例 现在我在页面上写了一个矩形,一个三角形,一个按钮。 这些都是平常我们页面中很常见的元素,它们都用了一个我也说不清的颜色。 总之不是太好看,暂且先不管,来看看代码: 在代码的开头我定义了一个变量: $color: #899; 然后分别用在了代码中的标记处。 那这时候我们就可以说,上面图中的三个元素,它们的颜色都是由变量 $color来控制的。 现在这个颜色不好看,说不定哪天UI小姐姐就会让我改…… 但是没关系,我们有变量。 当需要修改颜色的时候,直接去修改变量的值就可以了。 比如现在我们要把他们变成粉色的: 这时候我只需要把变量修改掉就好了: $color: #f991ff; 得到结果: 另外,既然说到变量,那么变量它是有作用范围的。 它只能在一定范围里起作用。 比如我在a.scss中定义了 变量$color 那么在b.scss中就不能使用了,只能在a.scss中使用。 被“红杏出墙”的作用域 现在我们知道了在a.scss中声明的变量只能在a.scss中使用了。 其实这也是有前提的,这个前提就是这个变量的声明没有被任何东西所包裹。 比如说: 在这段代码里,变量 $zhuangBiFan 就可以说被选择器 .box 包裹起来了。 那么这时候这个变量在 .box的外面就不能使用了。 这时候我们可以说变量 $zhuangBiFan 的作用范围就是在选择器.box里面。 作用范围,还有一个比较专业的名称,叫做作用域。 其实域就是范围的意思,只不过叫作用域会显得稍微高大上一点点,所以就叫他作用域吧~ 不过呢,Sass还提供了一种变量越狱的方法,那就是在变量的后面加上一个global : 在这个情况下,#main里面的变量在#sidebar里面也可以使用(咋有种红杏出墙的赶脚) 另外有趣的一点是:变量的值可以引用其他变量!!! 给人起外号这么好玩的事情,你确定不get一下么? 赶紧用起来吧~ |
|
来自: wanglh5555 > 《待分类》