scss基础语法的简单使用

1. 变量声明及使用

$color: red;
.box {
 color: $color;
}

2. mixin和include

2.1 简单使用
$bgColor: red;
@mixin bg {
 background: $bgColor;
}
.box {
 @include bg;
}

编译结果:

.box {
 background: red;
}
2.2 进阶使用
$namespace: 'zz';
@mixin B($name){
 $aaa: $namespace + '_' + $name;
 .#{$aaa} {
 @content;
 }
}
@include B(input) {
 font-size: 12px;
}

编译结果:

.zz_input {
 font-size: 12px;
}

3. 列表和循环

3.1 for循环
$list: red, green, blue;
@for $i from 1 through 3 {
 .status-#{$i} {
 color: nth($list, $i)
 }
}
@for $i from 1 to 4 {
 .status-#{$i} {
 color: nth($list, $i)
 }
}

注:nth可以获取数组的某个元素;
throughto的编译结果一致,要注意是的to走不到最后一个数

.status-1 {
 color: red;
}
.status-2 {
 color: green;
}
.status-3 {
 color: blue;
}
3.2 each循环
$list:red,green,blur;
@each $item in $list {
 .#{$item} {
 color: $item
 }
}

编译结果:

.red {
 color: red;
}
.green {
 color: green;
}
.blur {
 color: blur;
}

4. map结构

$colorMap: (
 fail: 'red',
 success: 'green',
 pendding: 'blue'
);
$bgColorMap: (
 fail: 'red',
 success: 'green',
 pendding: 'blue'
);
@each $key, $value in $colorMap {
 .#{$key} {
 color: $value;
 border-color: map-get($bgColorMap, $key)
 }
}

编译结果:

.fail {
 color: "red";
 border-color: "red";
}
.success {
 color: "green";
 border-color: "green";
}
.pendding {
 color: "blue";
 border-color: "blue";
}

5. 函数

@function vw($n) {
 @return calc($n*100vw/750)
};
@function px($n) {
 @return calc(#{var(--rootWidth)} * #{$n} / 1920);
}
@function vh($n) {
 @return calc($n * 100vh / 1080);
}
body {
 font-size: vw(10)
}
作者:明未为洺原文地址:https://segmentfault.com/a/1190000043605852

%s 个评论

要回复文章请先登录注册