阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 默认变量值

      一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明:

      $link-color: blue;
      $link-color: red;
      a {
      color: $link-color;
      }
      

      在上边的例子中,超链接的color会被设置为red。这可能并不是你想要的结果,假如你写了一个可被他人通过@import导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值。使用sass!default标签可以实现这个目的。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

      $fancybox-width: 400px !default;
      .fancybox {
      width: $fancybox-width;
      }
      

      在上例中,如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量,那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明,则$fancybox-width将默认为400px

      接下来我们将学习嵌套导入,它允许只在某一个选择器的范围内导入sass局部文件。

      目录
      本文目录
      目录