选择scss的原因
循环在js或者任何编程语言都是必须的,博主不太喜欢less 是因为它的判断和循环提供的不全面,
所以这篇主要聊scss
定义变量
scss 已$ 开头定义变量 例如
$c: '#fff'
// 数组
$liColor: yellow, #ffffff, green;
js中的map 或者数组 --》 type-of($colorsMap) 返回是 list
$colorsMap: (
primary: #007bff,
danger: #f56c6c,
success: #28a745
);
基本语法 ->循环
@for $i from 0 through 5{
}
$liColor: yellow, #ffffff, green;
@each $color in $liColor{
$i: index($liColor, $color);
li:nth-child(#{$i}) {
color: $color;
&:hover {
color: darken($color, 20%);
}
}
}
实用例子
$colorsMap: (
primary: #007bff,
danger: #f56c6c,
success: #28a745
);
$font: 26px;
.base {
border: none;
outline: none;
cursor: pointer;
padding: 3px 10px;
color: #ffffff;
font-size: calc($font / 2);
}
@for $i from 1 through length($colorsMap) {
$key: nth(map-keys($colorsMap), $i);
.#{$key} {
@extend .base;
background-color: map-get($colorsMap, $key);
&:hover {
background-color: darken(map-get($colorsMap, $key), 20%);
}
&:disabled {
background-color: lighten(map-get($colorsMap, $key), 15%);
}
&.active {
background-color: darken(map-get($colorsMap, $key), 30%);
}
}
}
上面的好处 我现在需要在新增一个class 那么我只需要在$colorsMap添加
$colorsMap: (
// 加一个
normal:'blue'
);
大大减少维护成本
判断
@if
例子 --> 混合和判断
本例子主要作用是画格子外界传入要画 几行几列
然后消除两个格子之间边框的border
@use "sass:math";
@mixin grid(
$rows: 3,
$columns: 3,
$containerClass: "grid-container",
$borderColor: #ccc,
$borderWidth: 1px
) {
$gridCount: $columns * $rows;
.#{$containerClass} {
width: 500px;
display: grid;
grid-template-columns: repeat($columns, 1fr);
grid-template-rows: repeat($rows, 1fr);
div {
@content;
border: $borderWidth solid $borderColor;
@for $i from 0 through $gridCount {
&:nth-of-type(#{$i + 1}) {
$r: math.floor(calc($i / $columns)) + 1;
$c: $i % $columns + 1;
border-left: none ;
border-bottom: none;
@if $r == $rows {
border-left: none;
border-bottom: $borderWidth solid $borderColor !important;
}
@if $c == 1 {
border-left: $borderWidth solid $borderColor !important;
}
}
}
}
}
}
.container {
@include grid(4, 2, "grid-containers", #ccc, 1px){
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
}
}