美文网首页
[sass/scss]常用内置函数测试代码

[sass/scss]常用内置函数测试代码

作者: 音无级鹦鹉螺号szhiku | 来源:发表于2019-07-15 07:59 被阅读0次

scss代码:

$number: 70;
$number2: 71;


$numberPercent: 0.77;

$numberRound: 25.9;

$abs: 3;

/*number*/

.div {
    zoom:percentage($numberPercent);

    zoom:round($numberRound);

    zoom:ceil($numberRound);

    zoom:floor($numberRound);

    zoom:abs($abs);

    zoom:min($number,$number2);

    zoom:max($number,$number2);

    zoom: random(100);
}

/*list*/
/*
$list:(1,'p',3,4,5);
.div {
    zoom: length($list);
    zoom: nth($list,2);

    @debug set-nth($list, 1 ,'x');
    @debug join($list, (6,7,8));

    @debug append($list,'999');

    @debug index($list,'p');
}
*/
/*string*/
$string:'hello';
$stringNo:hello;
/*
$stringUP: 'HELLO';
.div {
    background-image: unquote($string);

    background-image: quote($stringNo);

    background-image: str-length($string);


    @debug str-insert($string,'p',2);

    @debug str-index($string,'l');

    background-image: to-upper-case($string);

    background-image: to-lower-case($stringUP);

}
*/
/*map*/

$map:(top: 1px,left:2px,bottom: 3px,right: 4px);
.div {
    width: map-get($map,top);
    @debug map-remove($map,bottom);

    @debug map-keys($map);
    @debug map-values($map);
    @debug map-has-key($map,abc);
}

@mixin foo($args...) {
    @debug keywords($args);
}

@include foo($arg1:'abc',$arg2:'efg');


/*自定义函数*/
$rem1: 100px;
@function px2rem($px) {
    $rem: 37.5px;

    @debug $px;

    @return ($px/$rem) + rem;
};

.div {
    width: px2rem($rem1);
}

相关文章

网友评论

      本文标题:[sass/scss]常用内置函数测试代码

      本文链接:https://www.haomeiwen.com/subject/ygqgkctx.html