乐趣区

关于css:Sass的数据类型

Sass 语言中反对的数据类型有上面几种:

  • numbers:示意整数类型。
  • strings:在单引号 '' 或双引号 "" 内定义的字符序列。
  • booleans:布尔类型,有 truefalse 两个值。
  • colors:用于定义色彩值。
  • nulls:指定空值,是未知数据。
  • lists:值列表类型,示意由空格或逗号分隔的值。
  • maps:从一个值映射到另一个值。

numbers 类型

数字在 CSS 中利用的很宽泛,大多数都是联合单位一起应用的,然而在技术上仍然算是数字。例如字体大小、长高、外边距内边距等。Sass 中也有数字(numbers)类型,数字类型的值能够做一些加减乘除的运算。

示例:

例如定义一个变量 $num,给这个变量赋一个数字类型的值:

$num:24px;

.xkd{
    font-size: $num - 4;
    padding: $num + 6px;
    width: $num * 5;
    border-radius: $num / 6;
}

编译成 CSS 代码:

.xkd {
  font-size: 20px;
  padding: 30px;
  width: 120px;
  border-radius: 4px;
}

上述代码中,咱们能够对这个变量进行加减乘除运算。然而须要留神,在应用数字类型进行计算时,如果值的单位不兼容会导致报错,例如 12px + 2em,执行代码后会报错 Error: Incompatible units: 'em' and 'px'.,通知咱们单位不兼容。

string 类型

Sass 中的字符串能够应用单引号 '' 或者双引号 "" 突围,例如 "hello"'hello',即便突围的是一个空格,也算是字符串。字符串也能够不应用引号突围,例如 hello,也示意一个字符串。

示例:

咱们定义一个字符串类型的变量:

$msg:"hello";

.one{
    content: $msg;
    .two{content: $msg + ' ' + summer;}
}

编译成 CSS 代码:

.one {content: "hello";}
.one .two {content: "hello summer";}

booleans 类型

booleans 类型为布尔类型,此类型只有两个值,即 truefalse。在 Sass 中,只有当值为 false 或者 null 时,才会返回 false。其余的所有值都会返回 true

示例:
.one{a:type-of(true);
    b:type-of(false);
    c:type-of(10);
    d:type-of(null);
}

编译成 CSS 代码:

.one {
  a: bool;
  b: bool;
  c: number;
  d: null;
}

上述代码中的 type-of() 函数用于检测一个值的数据类型,能够看到只有 truefalse 两个值的数据类型为布尔值。

color 类型

Sass 中的 color 类型示意色彩类型,能够包含所有的色彩值,例如十六进制色彩值、色彩名称、rgbrgbahslhsla 等。

示例:
$color1:pink;
.one{
    color: $color1;
    background-color: $color1 + blue;
}

编译成 CSS 代码:

.one {
  color: pink;
  background-color: #ffc0ff;
}

从上述代码中能够看出,色彩值也是能够计算的,在进行计算时会先将色彩值转换为十六进制值,而后进行计算。

nulls 类型

null 类型是 Sass 中最根本的数据类型,示意一个空值,也就是说没有任何值。尽管说 null 示意什么都没有,然而当咱们应用 length() 函数返回长度时,返回值为 1。这是因为 null 依然示意的是一个实在存在的实体,只不过它不代表任何值。

示例:
$var:null;
.one{type: type-of($var);
    length:length($var);
}

编译成 CSS 代码:

.one {
  type: null;
  length: 1;
}

lists 类型

Sass 中的列表类型是由空格或者逗号分隔的一系列的值。

示例:
$padding: 10px 20px 30px 40px;
$font:Arial,sans-serif,Helvetica;
.one{
    padding: $padding;
    font-family: $font;
}

编译成 CSS 代码:

.one {
  padding: 10px 20px 30px 40px;
  font-family: Arial, sans-serif, Helvetica;
}

列表中除了能够蕴含简略的值,还能够嵌套列表,例如上面这个列表就示意含有三个值,而不是四个值:

$list: 1, 2 100, 3;

等同于:

$list: 1, (2 100), 3;

maps 类型

在 Sass 中,maps 类型示意映射类型。常以键值对(key/value)的模式呈现。在定义映射时,整个映射必须通过小括号() 括起来,值与值之间应用逗号分隔。

maps 中,一个给定的 key 只能有一个相干的 value,但一个给定的 value 能够被映射到许多不同的 key上。value 值能够是任何数据类型,包含 maps

示例:
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);
.one{color: map-get($color-map,color1);
    background-color: map-get($color-map, color2);
}

编译成 CSS 代码:

.one {
  color: #fa0000;
  background-color: #fbe200;
}

上述代码中,创立了一个名为 $color-map 的映射,这个映射中有三个键值对,别离为不同的 CSS 色彩值。其中 map-get 函数用于提供映射的值,能够承受两个参数,第一个参数为映射名称,第二个参数为须要取的 key 值。

退出移动版