ScssScript 支持 6 种主要的数据类型：

• 数字：1, 2, 13, 10px
• 字符串：
  • 有引号字符串："Lucida Grande",'http://sass-lang.com'
  • 无引号字符串：sans-serif,bold
• 颜色：blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型：true, false
• 空值：null
• 数组(list)，用空格或逗号作分隔符：1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• 映射(maps), 相当于 JavaScript 的 object：(key1: value1, key2: value2)

数字 (Numbers)

• 支持数字或带单位的数字
• 支持整数或小数
• 支持正数与负数

$number1: 30;
$number2: 6.9;
$number3: 16px;
$number4: 32a; // 不规范，但不会报错
// 注：数字后接的任何字母都会视为单位

官方文档-数学相关函数

字符串 (Strings)

$fontFamily: "Arial";
$fontWeight: bold;
$content: "Heylzh";

.container {
    // 使用 `#{}` (interpolation) 时，有引号字符串将被编译为无引号字符串
    font-family: #{$fontFamily}, sans-serif;
    font-weight: $fontWeight;
    &::before {
        content: $content;
    }
}

编译后

.container {
  font-family: Arial, sans-serif;
  font-weight: bold;
}
.container::before {
  content: "Heylzh";
}

官方文档-字符串相关函数

颜色 (Colors)

$color-word:red;
$color-HEX: #ff0000;
$color-RGB: rgb(255, 0, 0);
$color-RGBA: rgba(255, 0, 0, .99);
$color-HSLA: hsla(0, 100%, 50%, .99);

.p1{
    color: $color-word;
}
.p2 {
    color: $color-HEX;
}
.p3 {
    color: $color-RGB;
}
.p4{
    color: $color-RGBA;
}
.p5 {
    color: $color-HSLA;
}

编译后

.p1 {
  color: red;
}

.p2 {
  color: #ff0000;
}

.p3 {
  color: rgb(255, 0, 0);
}

.p4 {
  color: rgba(255, 0, 0, 0.99);
}

.p5 {
  color: hsla(0, 100%, 50%, 0.99);
}

官方文档-颜色相关函数

布尔型 (Booleans)

只有两个值 true 和 false，只有自身是 false 或 null 才会返回 false，其他一切都会返回 true，主要用于逻辑判断。

空值 (Null)

只有一个值 null，如$name: null;。由于它为空，因此不能使用它与任何类型进行运算，主要用于逻辑判断。

数组 (Lists)

通过逗号分隔、空格分隔或斜杠分隔的一系列的值，数组中还可以包含子数组，如下方的 “$list2” 和 “$list3″，当数组被编译为 css 时，圆括号不会被添加。

$list1: 1px 2px 3px 4px; //一维数字
$list2: 1px 2px, 3px 4px; //二维数字
$list3: (1px 2px) (3px 4px); //二维数字

// 指定数组中的某个值进行调用
.container {
    border-width: nth($list1, 1); // 1px
    margin: nth($list: $list2, $n: 1); // 1px 2px
    padding: nth($n: 2, $list: $list3);// 3px 4px
}

@each $element in $list1 {
    .box-#{index($list1,$element)}{
        border-width: $element;
    }
}

编译后

.container {
  border-width: 1px;
  margin: 1px 2px;
  padding: 3px 4px;
}

.box-1 {
  border-width: 1px;
}

.box-2 {
  border-width: 2px;
}

.box-3 {
  border-width: 3px;
}

.box-4 {
  border-width: 4px;
}

官方文档-数组相关函数

映射 (Maps)

映射包含成对的键和值:(key:value,key:value)，通过相应的键可以很容易地查找值。键必须是唯一的，但值可能是重复的。与列表不同，地图必须用括号括起来。由于map不是有效的CSS值，它们本身没有做很多事情 。这就是为什么Sass提供了一堆函数来创建映射并访问它们包含的值。

$font-weights: (
    "regular": 400,
    "medium": 500,
    "bold": 700
);

.p{
    font-weight: map-get($font-weights, "medium"); // 500;
}

编译后

.p {
  font-weight: 500;
}

官方文档-映射相关函数