sass变量的声明和使用

xylinzi

已于 2022-06-07 15:29:20 修改

阅读量978

点赞数

分类专栏： sass 文章标签： sass 前端 css

于 2022-06-07 14:26:08 首次发布

本文链接：https://blog.csdn.net/xylinzi/article/details/125164361

版权

sass 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Sass变量的声明方法，如$color:#fff;，并展示了如何在CSS中使用。此外，详细讲解了Sass支持的不同数据类型，如数字、字符串、颜色等，以及特殊字符串处理和数组、map的使用实例。

摘要由CSDN通过智能技术生成

sass变量的声明和使用

1.1 变量声明

$color:#fff;

sass变量可以在大括号内或者大括号外声明。

1.2 变量使用

$color:#fff;

.box{

border:1px solid $color;

}

1.3 sass的数据类型

（1）数字，如1, 2, 13, 10px

（2）字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

（3）颜色，blue, #04a3f9, rgba(255,0,0,0.5)

（4）布尔型，true,false

（5）空值，null

（6）数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

（7）maps，相当于 JavaScript 的 object，(key1: value1, key2: value2)

1.4 sass中的字符串

两种字符串类型：有引号字符串和无引号字符串，编译 CSS 文件时不会改变其类型，只有一种情况例外，使用 #{}时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

1.5 数组 (Lists)

CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。

操作数组的函数：

nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)

1.6 集合Maps

map-get函数用于查找键值，map-merge函数用于map和新加的键值融合，@each命令可添加样式到一个map中的每个键值对。 Maps可用于任何Lists可用的地方，在List函数中 Map会被自动转换为List ，如 (key1: value1, key2: value2)会被List函数转换为 key1 value1, key2 value2 ，反之则不能。