陪玩源码开发，scss变量的正确使用

css变量使用

:root {
    --color: #333;
}

body {
    --border-color: #000;
}

.header {
    --background-color: #f2f2f2;
    --font-color: #f00;
    width: 100vw;
    height: 100px;
    background-color: var(--background-color);
}
span {
    color: var(--font-color); // .header中的span生效, 不在header中的span标签不生效
}

scss变量

$color: #fff; // scss变量以$开头
$border_color: #f00;
$border-color: #ccc; // 注意scss变量对中划线和下划线不敏感, 下面的覆盖上面的

.a {
    color: $color;
    border-color: $border_color;
}

转化为:

.a {
  color: #fff;
  border-color: #ccc;
}

 

scss变量同样存在作用域
但是

$color: null;
.a {
    $color: red !global; // 可以通过!global提升为全局变量, 虽然可以编译成功, 但是编译器会报错As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables. 需要在根节点声明$color: null;才能解决报错信息
}

.b {
    color: $color;
}

 

转化为:

.b {
  color: red;
}

 

// scss变量的数据类型:
// 1. 可以是任何css属性值;
// 2. 也可以是boolean/null用于判断
// 3. 可以是逗号分隔的list
// 4. 可以是小括号包裹的key:value的类似于map的集合
$layer-index: 10;
$border-width: 3px;
$font-base-family: 'Open Sans', Helvetica, Sans-Serif;
$top-bg-color: rgba(255, 147, 29, .6);
$block-base-padding: 6px 10px 0 10px;
$block-mode: true;
$var: null;
$color-map: (color1: #f00, color2: #ff0, color: #0ff);
$fonts: (serif: 'Helvetica Neue', monospace: 'Consolas');
$font-size: null;
.container {
    @if $block-mode {
        background-color: #000;
        $var: 'hahaha'
    }@else {
        background-color: #fff;
        $var: 'heiheihei'
    }

    content: type-of($var);
    content: length($var);
    color: map-get($color-map, color2);
}

.wrap {
    font: 10px blod map-get($map: $fonts, $key: 'sans'); // map-get如果找不到对应key值会返回空值
}

 

转化为:

.container {
  background-color: #000;
  content: null;
  content: 1;
  color: #ff0;
}

.wrap {
  font: 10px blod;
}

 

$color: #333;

$color: #666 !default;

p {
    color: $color;
}

 

转化为:

p {
  color: #333;
}

 

scss中使用css变量

$color: #333;

:root {
    --color: #{$color}; // 注意不能直接使用$color, 需要用插值语法
}

 

以上就是陪玩源码开发，scss变量的正确使用， 更多内容欢迎关注之后的文章