scss使用常见问题

# 无法将scss变量复制给css变量

$color-primary: red;
.primary{
    color: $color-primary;
}
// 编译后为
.primary{
    color: $color-primary;
}

1
2
3
4
5
6
7
8

# 解决办法1，使用插值

$color-black: #000000;

body {
    --color: #{$color-black};
}

1
2
3
4
5

# 解决办法2，使用scss构建css变量

// sass variable map 
$colors: (
  color-black: #FFBB00
);

// loop over each name, color
:root {
  // each item in color map
  @each $name, $color in $colors {
    --#{$name}: #{$color};
  }
}
// 结果
:root {
  --color-black: #FFBB00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#scss

上次更新: 2023/09/22, 16:54:32

← CSS布局-多列布局 javascript常用操作→