Sass和Less

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

预处理器能力：

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

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

（ChatGPT）css预处理器less和sass的区别是什么？

Less和Sass都是CSS预处理器，它们都提供了一些增强和扩展了CSS语法的功能，以便更方便地编写CSS样式。

下面是Less和Sass的区别：

1. 语法：Less使用类似于CSS的语法，并使用类似于JavaScript的函数和变量，而Sass使用类似于Ruby的语法，并使用缩进和嵌套来表示层级关系。

2. 扩展：Less使用.less作为扩展名，而Sass使用.sass或.scss作为扩展名。

3. 编译方式：Less使用JavaScript编写，需要在浏览器中运行Less.js来编译，而Sass使用Ruby编写，需要使用Sass命令行工具或插件来编译。

4. 兼容性：由于Less使用JavaScript编写并在浏览器中运行，所以在一些旧版本的浏览器上可能不兼容。而Sass使用Ruby编写，不受浏览器的限制。

总的来说，Less更接近于CSS的语法风格，适合前端开发者；而Sass的语法更加灵活和强大，适合后端开发者或有编程经验的开发者使用。选择使用哪个预处理器主要取决于个人的喜好和项目需求。

---

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