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-width: 400px !default;
.fancybox {
	width: $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 后缀,即可直接导入了。

上一篇:关于sass-loader 和 node-sass 版本问题解决方案


下一篇:sass入门教程