scss的一些高阶函数

参考这篇文章

Sass中的Map 详解 - 走看看 (zoukankan.com)

Sass-语法小抄【简洁！易懂！好上手！】 - 知乎 (zhihu.com)

Vue3 Element-Plus 动态更换主题简单实现 - 掘金 (juejin.cn)

(46条消息) Sass中@at-root嵌套_longzhoufeng的博客-CSDN博客

@at-root

//单个选择器跳出
.parent-2 {
    color:#f00;
    @at-root .child {
        width:200px;
    }
}

//多个选择器跳出
.parent-3 {
    background:#f00;
    @at-root {
        .child1 {
            width:300px;
        }
        .child2 {
            width:400px;
        }
    }
}

编译

.parent-2 {
  color: #f00;
}

.child {
  width: 200px;
}

.parent-3 {
  background: #f00;
}

.child1 {
  width: 300px;
}

.child2 {
  width: 400px;
}

map-merge

scss

$color1: (orange:  #f90, green: green);

$color2: (blue: blue);

$colorList:map-merge($color1, $color2);

翻译为一个map对象

$colorList:(orange: #f90, green: green, blue: blue);

1.map.get（$map,$key）

取出根据key名取出键值

color: map-get($colorList,orange);

2.map-has-key（$map,$key）

当$map 中有这个 $key，则函数返回 true，否则返回 false。

@if map-has-key($colorList,orange){
    .btn1 {
        color: map-get($colorList,orange);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}

可以写成一个函数判断

@function colors($color){
    @if not map-has-key($colorList,$color){
        @return map-get($social-colors,$color); 
    }
    @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
}

.btn-dribble {
    color: colors(black);
}