HarmonyOS元服务开发

Sass和Less ：CSS预处理器，让开发者更高效地编写css

预处理器能力：

• 变量
• 嵌套
• 混入
• 继承
• 条件判断
• 循环

  Sass基于Ruby，在服务器端处理。Less基于JavaScript，在客户端处理。

Sass: 

Sass官方文档：https://sass-lang.com/documentation/

Sass（Syntactically awesome stylesheets）

plain css存在样式重复等问题，sass通过编译器来解决这些问题，sass有2种语法：sass和scss

100秒了解Sass

1.sass：缩进的语法、移除;和{}

nav
    ul
        margin:0
        padding:10
        list-style:none
    li
        display:inlne-block

2.scss：

nav{
    ul{
        margin:0;
        padding:10;
        list-style:none;
    }
    li{ display:inline-block; }
}

一、变量：

sass中的变量：$variables

$red: hsl(0,100%,50%);
.button .danger{
    color:$red;
    border:1px solid $red;
}

css原生变量：

:root {
    --red: hsl(0,100%,50%);
}
.border .danger{
    color:var(--red);
    border:1px solid var(--red);
}

 二、嵌套nesting

.box {
    background-color: #fff;
    .title-icon {
        width: 40px;
        height: 40px;
    }
}

 三、混入mixin

多个类中存在相同的代码，可以通过@mixin进行统一封装，通过@include在需要的地方使用

@mixin cool-button($color,$bg){
    display:flex;
    color:$color;
    background:$bg;
}

.card{
    @include cool-button(black,orange);
}

mixin中可以使用i@f或@else来进行条件判断，@each进行循环

Less

Less官网：https://lesscss.org/#nesting

less中变量用@variable