阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 变量引用

      凡是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的值是一样的。最后,我们来了解一下变量命名的实用技巧,以结束关于变量的介绍。

      目录
      本文目录
      目录