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英文文檔