Scss学习--Scss数据类型

13 篇文章 1 订阅

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值