介绍几个scss 与css 中的新的特性

介绍几个scss 与css 中的新的特性

css 中的@layer。用法如下

@layer low,high;

@layer low{
    .btn{
        font-Size:10px;
    }
}

@layer high{
    .btn{
        font-Size:11px;
    }
}

@layer {
    .btn{
        font-Size:12px;
    }
}

.btn{
    font-Size:13px;
}

定义在命名的layer 中的css 规则，用于最低优先级，匿名layer 中的其次优先级，不在layer 中的优先级最高。

对于命名layer 的css规则，优先级顺序由它们定义的顺序决定，后出现的会覆盖先出现的。当然你可以先声明这些layer,这样后面的优先级更高。

@import "xxx" layer('xxx') 将某个css 文件导入到某个layer 中。也就是被导入的css 将拥有某个layer

sass 中的@import 被标记为deprecated. 建议使用@use

使用@use 被导入的scss, 它的内容分为：css 规则，mixin,function,variables. css规则直接被引入到全局样式中，其他的三个则会出现在一个独立的namespace 中。在父级scss中，必须通过namespace.xxx来访问。

//variables.scss
$color:red;
$size:10px;

// style.scss
@use 'varialbes'
.btn{
    color:variables.color;
}

scss 中的@forward,

简单的一句话就是类似于js 中的 export * from 'xxx';.自己意会