zoukankan      html  css  js  c++  java
  • sass 变量

    声明变量

    sass 的变量声明,使用的是 $ 关键符

    $highlight-color: #F90;
    

    任何可以用作 sass 的变量值,甚至是以空格分隔的多个属性值,或以逗号分隔的多个属性值

    $basic-border: 1px solidblack;
    $plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"
    

    引用变量

    声明好的变量,可以直接引用在 css 属性中:

    $highlight-color: #F90;
    .selected {
      border: 1px solid $highlight-color;
    }
    
    //编译后
    .selected {
          border: 1px solid #F90;
    }
    

    关于变量名用中划线还是下划线,sass 中是可以互通的,即中划线 = 下划线

    $link-color: blue;
    a {
          color: $link_color;
    }
    
    // 编译后
    a {
          color: blue;
    }
    

    默认变量值

    一般情况下,在反复声明一个变量后,只有最后一处声明有效的变量会覆盖前面的值:

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

    假如你写了一个可被他人通过 @import 导入的 sass 库文件,你可能希望导入者可以定制修改 sass 库文件中的某些值。

    在不考虑默认覆盖和重写的方案,可以使用 !default 关键词

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

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

    在选择器范围内导入 sass 局部文件

    假设我们新建了一个名为 _blue-theme.scss 文件:

    aside {
    	background: blue;
    	color: white;
    }
    

    然后把它导入到一个 scss 文件的 css 规则内:

    .blue-theme {
    	@import "blue-theme"
    }
    
    //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
    .blue-theme {
      aside {
        background: blue;
        color: #fff;
      }
    }
    

    原生的 css 导入

    由于 sass 兼容原生的 css ,所以它也支持原生的 CSS@import

    下列三种情况下会生成原生的 CSS@import ,尽管这会造成浏览器解析 css 时的额外下载:

    • 被导入文件的名字以 .css 结尾
    • 被导入文件的名字是一个 URL 地址(比如 http://www.sass.hk/css/css.css),由此可用谷歌字体 API 提供的相应服务
    • 被导入文件的名字是 CSSurl()

    这就是说,你不能用 sass@import 直接导入一个原始的css文件,因为sass会认为你想用css原生的 @import 。但是,因为 sass 的语法完全兼容 css ,所以你可以把原始的 css 文件改名为 .scss 后缀,即可直接导入了。

  • 相关阅读:
    阿里P8架构师谈:阿里双11秒杀系统如何设计?
    秒杀系统设计的知识点
    秒杀系统架构优化思路
    秒杀系统解决方案
    Entity Framework Code First (七)空间数据类型 Spatial Data Types
    Entity Framework Code First (六)存储过程
    Entity Framework Code First (五)Fluent API
    Entity Framework Code First (四)Fluent API
    Entity Framework Code First (三)Data Annotations
    Entity Framework Code First (二)Custom Conventions
  • 原文地址:https://www.cnblogs.com/CreateBox/p/15196099.html
Copyright © 2011-2022 走看看