sass 变量

2023-11-15 18:23:16

声明变量

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 提供的相应服务
被导入文件的名字是 CSS 的 url() 值

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