格线系统(2) DAY44

今天要先来介绍 Sass @each 与 map

Sass map-get

这里要先宣告变数(有点类似js宣告物件)

$themes:(
    //key    ,   value
    'primary' : rgb(0, 110, 255),
    'secondary' : gray,
    'danger' : red
);
.box-primary{
    background-color: map-get($themes, 'primary' );
}

宣告完变数要记得补上分号

map-get(变数名称, key值 )
CodePen: https://codepen.io/wemyferb/pen/ExyjrpG

Sass @each
@each 搭配 in

$themes:(
    //key    ,   value
    'primary' : rgb(0, 110, 255),
    'secondary' : rgb(70, 69, 69),
    'danger' : rgb(160, 23, 23)
);

@each $key , $value in $themes {
    .box-#{$key}{
        background-color: $value;
    }
}

CodePen: https://codepen.io/wemyferb/pen/bGedZEa
上述的集合变数($themes)
也称为 Sass Map

CSS撰写格线系统

CodePen: https://codepen.io/wemyferb/pen/XWKbGYW

这里的 max-width : 100%
可以避免内容宽度超过容器时
导致 flex 格线没有办法如预期呈现的问题

flex空间计算 可参考https://wcc723.github.io/css/2020/03/08/flex-size/

Sass撰写格线系统

CodePen: https://codepen.io/wemyferb/pen/zYBGVBQ
这里有利用到 Sass extend 技巧

@extend 的用途在於整合相同且重复的样式
有点类似 @mixin
但 @mixin 可以把它想像成一个包装好的功能只需要引入即可

那我们的 Sass 介绍就到这里结束啦~~
若有任何问题 或 内容有误
请别吝啬的跟我说唷~~