SASS变量-css变量的定义与书写

1.css变量的定义与书写

CSS定义变量的方法

:root {
    --color: #F00;
}

body {
    --border-color: #f2f2f2;
}

.header {
    --background-color: #f8f8f8;
}

p {
    color: var(--color);
    border-color: var(--border-color);
}

.header {
    background-color: var(--background-color);
}

SASS的写法

$font-size:14px;
.container {
    font-size: $font-size;
}

2.Sass变量的定义

定义规则

1. 变量以美元符号($)开头，后面跟变量名；

2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；

3. 写法同css，即变量名和值之间用冒号(:)分隔；

4. 变量一定要先定义，后使用；

连接符与下划线

通过连接符与下划线 定义的同名变量为同一变量，建议使用连接符

$font-size:14px;
$font_size:16px;
.container{font-size: $font-size;}

3.变量的作用域

局部变量

定义：在选择器内容定义的变量，只能在选择器范围内使用

.container {
    $font-size: 14px;
    font-size: $font-size;
}

全局变量

定义后能全局使用的变量

第一种：在选择器外面的最前面定义的变量

$font-size:16px;
.container {
    font-size: $font-size;
}
.footer {
    font-size: $font-size;
}

第二种：使用 !global 标志定义全局变量

.container {
    $font-size: 16px !global;
    font-size: $font-size;
}
.footer {
    font-size: $font-size;
}

4.变量值类型

变量值的类型可以有很多种

SASS支持 7 种主要的数据类型

• 数字，1, 2, 13, 10px，30%

• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

• 颜色，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)

例如

$layer-index:10;
$border-width:3px;
$font-base-family:'Open Sans', Helvetica, Sans-Serif;
$top-bg-color:rgba(255,147,29,0.6);
$block-base-padding:6px 10px 6px 10px;
$blank-mode:true;
$var:null; // 值null是其类型的唯一值。它表示缺少值，通常由函数返回以指示缺少结果。
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);

$fonts: (serif: "Helvetica Neue",monospace: "Consolas");

使用

.container {
    $font-size: 16px !global;
    font-size: $font-size;
    @if $blank-mode {
        background-color: #000;
    }
    @else {
        background-color: #fff;
    }
    content: type-of($var);
    content:length($var);
    color: map-get($color-map, color2);
}

.footer {
    font-size: $font-size;
}

// 如果列表中包含空值，则生成的CSS中将忽略该空值。
.wrap {
    font: 18px bold map-get($fonts, "sans");
}

5.默认值

$color:#333;
// 如果$color之前没定义就使用如下的默认值
$color:#666 !default;
.container {
    border-color: $color;
}