Sass-4【字符串函数、数字函数、列表函数、判断函数、三元、map】

最新推荐文章于 2023-11-08 20:34:54 发布

可乐雪碧薄荷糖

最新推荐文章于 2023-11-08 20:34:54 发布

阅读量337

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Sass 文章标签： sass

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/113985757

Sass 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Sass中的字符串函数如unquote和quote，数字函数如percentage和round，以及列表、判断和三元条件的用法。通过实例演示了如何进行大小写转换、数值格式化和列表操作，适合前端开发者深入理解Sass的实用功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.字符串函数

(1).unquote()/quote()

quote给字符串添加上双引号

h1{
    &::before{
        content:quote(Girl)
    }
}
h1{
    &::before{
        content:quote('Girl')
    }
}
//输出结果
    h1::before{
        content:quote("Girl")
    }

如果是一段话的话要用单引号括起来

去除引号unquote

h1{
    &::before{
        content:unquote('Girl')
    }
}
//输出结果
    h1::before{
        content:quote(Girl)
    }

只能去掉外层的引号

h1{
    &::before{
        content:unquote("Gi'all");
    }
}
h1::before{
    content:'Gi' all
}

(2).to-upper-case/to-lower-case

大小写转换

h1{
    &::before{
        content:to-lower-case('AAA');
    }
}

二.数字函数

(1).percentage

转换百分比

h1{
    &::before{
        content:percentage(2);
        content:percentage(2px);//会报错，不可以传入单位
    }
}
//编译结果
h1::before{
    content:20%;
}

(2).round

四舍五入函数

div{
    width:round(10.2px);
}
//编译结果
div{
    width:10px;
}

(3).ceil/floor

向上取整

div{
    width:ceil(1.4px);
}
//编译结果
div{
    width:2px;
}

向下取整

div{
    width:floor(1.1px);
}
//编译结果
div{
    width:1px;
}

(4).abs

绝对值

div{
    width:abs(-10px);
}
//编译结果
div{
    width:10px;
}

(5).min/max

取最小

div{
    width:min(1px,2px,3px);
}
//编译结果
div{
    width:3px;
}

最大同理

(6).random

随机函数0-1

div{
    width:random();
}
//编译结果
div{
    width:0.5994026302;
}

可以与其他函数嵌套使用

三.列表函数

(1).length

sass -i 开启命令
length<10px 20px 30px>
3

(2).nth

找列表项-从1开始

nth<10px 20px 30px,1>

(3).join

不能传递超过两个的参数

join<10px 20px, 30px 40px>
<10px 20px, 30px 40px>

解决问题

join<<10px 20px, 30px 40px>,<50px 60px>>

(4).append

列表中追加值

append((10px,20px),30px)
(10px,20px,30px)

(5).zip

一个维度转换为多维列表，以逗号为分隔

zip(1px 2px 3px solid dashed dotted, green blue red)
((1px "solid" green),.....)

(6).index函数

也是从1开始

index(1px 2px 3px, 1px) 1

四.判断函数

(1).typeof

type-pf(100) "number"
type-pf(100px) "number"
type-pf(qwe) "string"
type-pf("qwe") "string"
type-pf(true) "bool"
type-pf(#fff) "color"

number string bool color

(2).unit

单位函数

unit(100px)
"px"
unit(100px/5em)
"px/em"

(3).unitless

检查是否不存在单位

unitless(100)
true
unitless(100px)
false

(4).comparable

是否可以做加减

comparable(1px,2px) true
comparable(1px,2em) false

五.三元条件函数

(1).三元条件函数

if(true,1px ,2px ) 1px
if(false,1px ,2px ) 2px

六.map数据地图

(1).map-get

获取数据

$color:(default:blue,primary:red);
.box{
    background-color:map-get($color,default)
}

嵌套情况

$color:(
    default:(bgcolor:blue,primary:red),
    default1:(bgcolor:blue,primary:red)
    );
.box{
    background-color:map-get(map-get($color,default),"bgcolor")
}

(2).map-has-key

判断是否存在

$theme-color:(
    bgcolor:#fff,
    text-color:#999
)
@if map-has-key($theme-color,bgcolor){
    .box{
        
    }
}

@warn报错

$theme-color:(
    bgcolor:#fff,
    text-color:#999
)
@if map-has-key($theme-color,bgcolor){
    .box{
        
    }
}@else{
    @warn "这hi错误"
}

(3).map-keys

key全部变列表

$theme-color:(
    bgcolor:#fff,
    text-color:#999
)
$list: map-keys($theme-color);
@each $name in $list{
    .btn-#{$name}{
        color:colors($name)
    }
}
//编译结果
.btn-bgcolor{
    color:#fff;
}
.btn-text-color{
    color:#999;
}

(4).map-merge map合并

$theme-color:(
    bgcolor:#fff,
    text-color:#999
)
$typo:(
    font-size:20px
)
$newmap:map-merge($theme-color,$typo)

(5).map-remove

移除

$theme-color:(
    bgcolor:#fff,
    text-color:#999
)
$typo:(
    font-size:20px
)
$newmap:map-remove($theme-color,bgcolor)

(6).kewords

动态创建map

@mixin map($args...){
    @debug keywords($args)
}
@include map(
    $bgcolor:red,
    $font-size:14px,
    $line-height:10px
)