#yyds干货盘点#sass中的数据类型

1.代码

ul {
/**
  1.数据类型
    map、list、数字类型、字符串类型、boolean类型、null、color
**/
// 1.1 map类型 -> 用小括号括起来
$style: (color: #fb3,
    fontSize: 30px);

li:nth-child(1) {
  color: map-get($style, 'color'); // map-get 通过key来获取value值
  font-size: map-get($style, 'fontSize'); // map-get 通过key来获取value值
}


// 1.2 list累心 -> 可以用空格分开或者逗号分开或者括号分开
$colors: red green blue;
$padding: 5px 10px 5px 10px;

li:nth-child(1) {
  color: nth($colors, 1); // 通过nth可以取出list中的数据,注意索引值是从1开始不是从0开始的
  padding: $padding;
  // padding-left: nth($padding, 4);
}

// 1.3 数字类型
$n1: 20;
$fontSize: 30px;

li:nth-child(2) {
  font-size: $n1 + px; // 注意: 这个地方的px不需要加单引号或者双引号
}

li:nth-child(3) {
  font-size: $fontSize;
}

// 1.4 字符串类型
$s1: 'success';
$s2: 'error';
$s3: 'warning';

.#{$s1} {
  color: green;
}

.#{$s2} {
  color: red;
}

.#{$s3} {
  color: yellow;
}

// 1.5 boolean类型
$t: true;
$f: false;

li:nth-child(4) {
  @if $t {
    background: brown;
  }

  @else {
    background: yellow;
  }
}

// 1.6 null类型
$null: null;

li:nth-child(4) {
  @if $null==null {
    padding: 10px;
  }
}

2.总结

• sass中数据类型的使用