Scss学习--Scss数据类型

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

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

• 字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz

• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)

• 布尔型，true, false

• 空值，null

• 数组 (list)，用空格或逗号作分隔符

• maps相当于 JavaScript 的 object，(key1: value1, key2: value2)

• SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明

1.字符串：

字符串分为有引号字符串和无引号字符串

@debug string.unquote(".widget:hover"); // .widget:hover 
//unquote转换为不带引号字符串
@debug string.quote(bold); // "bold"
//quote转换为带引号字符串
@mixin firefox-message($selector){
      body.firefox #{$selector}::before{
          content: 'hello,Siri';
      }
  }

 @include firefox-message(".header");

.

2、数组类型

$array:(40px,50px,60px);

@each $size in $array{
    .icon-#{$size}{
        font-size: $size;
        height: $size;
    }
}


$padding_number:(10px 20px 30px);
p{
    /*!添加数据*/
    padding: append($padding_number,10px);
    /*!索引数据*/
    $number_index:index($padding_number,30px);
    content: "#{$number_index}";
    /*!搜索数据*/
    $number:nth($padding_number,1);
    content: "#{$number}";
}

更多list方法请参考：Sass英文文档

3、map类型

$font-color: rgba(0,255,0,0.5);
$background-color:hsla(20, 20%, 85%, 0.7);
$font-weight:("normal":400,"medium":500,"bold":700);
@debug map-get($map: $font-weight, $key:medium );
#main{
    font-weight: map-get($map: $font-weight, $key: medium); 
    		//map-get获取数据
    @each $fw,$fwv in $font-weight{
        .divbox-#{$fw}{
            font-weight: $fwv;
        }
    }
    color:$font-color;
    background-color: $background-color;
}

 $maps:("color":green);
  $gups:("font-size":18px,"box-sizing":border-box);
  $maps:map.merge($maps,$gups); //增加数据
  @each $key,$value in $maps{
      div{
          #{$key}:#{$value};
      }
  }

更多list方法请参考：Sass英文文档