[Day 10] Sass - Values

Values

有写过任何一门程序语言的应该都知道，对於每个变数的值来说都会有其对应的资料型态，而在Sass内也存在这种机制，今天就来介绍一下Sass中的资料型态!

Numbers

在Sass中，整数、小数、单位的型态都是Numbers，Numbers型态值也可以直接做四则运算~
举常见的例子来说:

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (square pixels)
@debug 4.5em;

Strings

在Sass中，型态是String的值会被引号包裹起来，中文称之为字串，可能是一个字或是一个句子
举例来说:

@debug "IT铁人赛"; // "IT铁人赛"
@debug "Hello World"; // "Hello World"
@debug "C:\\Program Files"; // "C:\\Program Files"

这边也附带讲解一下字串拼接的方式:

// 范例1:
// 宣告一个型态为字串的变数
$anyword: "World";
// 拼接时用#{}就可以将字串替换进去
@debug "Hello #{$anyword}"; // "Hello World"

// 范例2:
// 宣告一个class name
$class-name: "foo";
// 替换字串
a.#{$class-name} { // a.foo
   color: blue;
}

Colors

常见的颜色表示方式都算Colors型态，举例来说:

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

Lists

一个变数的值是由多个值组成的，且每个值会用空格或是逗号隔开，详细的用法会在之後的文章中说明
这边简单举几个常见例子:

$body-margin: 0 0 10px 15px;
$body-font: Helvetica, Arial, sans-serif;
$random-list: 10, 10 0, 3;

Maps

Maps在开发Sass时是非常常用到的一种型态，详细的用法也会在之後的文章中说明，可以将它理解成类似Javascript Object的概念，是一种key-value pairs的表示方式，这边先简单举个例子就好:

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
// 也可以缩排程序比较好读
$colors: (
  light: #ccc,
  dark: #000
);

Booleans

Booleans型态的值表示为true和false，常用来判断一段逻辑最後的结果，进阶的用法也会在之後的文章说明
这边简单举几个例子:

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false

null

null型态的值表示式就只有null一种，代表不存在的值、没有这个值
一般会用到的观念为: 如果一个值是null，编译出来并不会编译成css，举例来说:

$color: null;
div {
  width: 23px;
  color: $color;
  border: 2px solid $color;
}

编译出来的CSS会是:

div {
  width: 23px;
  border: 2px solid;
} 

这在之後搭配Function或是Mixin的时候会是很常使用的一种用法~

今天将所有资料型态都介绍完了，上方的范例都可以开启任一.SCSS档案做练习

参考资料

https://sass-lang.com/documentation/values