scss与less的基本语法和区别

1、scss基本语法

scss官网

1、变量

$primary-color: #3498db;
$font-size: 16px;

.element {
  color: $primary-color;
  font-size: $font-size;
}

2、嵌套

.navigation {
  ul {
    margin: 0;
    padding: 0;
    
    li {
      list-style: none;
      
      a {
        text-decoration: none;
      }
    }
  }
}

3、混合

@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
}

.button-primary {
  @include button(#3498db, #fff);
}

.button-secondary {
  @include button(#ccc, #333);
}

4、继承

button-base并不是类名啥的，定义的公共样式，类似于混合

%button-base {
  padding: 10px 20px;
  border: none;
}

.button-primary {
  @extend %button-base;
  background-color: #3498db;
  color: #fff;
}

.button-secondary {
  @extend %button-base;
  background-color: #ccc;
  color: #333;
}

5、运算符

SCSS支持各种运算符，如+、-、*、/和%，用于执行算术运算

$base-width: 200px;

.element {
  width: $base-width * 2;
}

2、less基本语法

less官网

1、变量

@primary-color: #3498db;
@font-size: 16px;

.element {
  color: @primary-color;
  font-size: @font-size;
}

2、嵌套

.navigation {
  ul {
    margin: 0;
    padding: 0;
    
    li {
      list-style: none;
      
      a {
        text-decoration: none;
      }
    }
  }
}

3、混合

.button(@bg-color, @text-color) {
  background-color: @bg-color;
  color: @text-color;
  padding: 10px 20px;
  border: none;
}

.button-primary {
  .button(#3498db, #fff);
}

.button-secondary {
  .button(#ccc, #333);
}

4、继承

.button-base是一个标签的类名，不同与scss

.button-base {
  padding: 10px 20px;
  border: none;
}

.button-primary {
  &:extend(.button-base);
  background-color: #3498db;
  color: #fff;
}

.button-secondary {
  &:extend(.button-base);
  background-color: #ccc;
  color: #333;
}

5、运算符

LESS 支持各种运算符，如 +、-、*、/ 和 %，用于执行算术运算。

@base-width: 200px;

.element {
  width: @base-width * 2;
}

3、区别

1、变量定义

• SCSS： 使用 $ 符号来定义变量。
• LESS： 使用 @ 符号来定义变量。

2、混合

• SCSS： 使用 @mixin 和 @include 来创建和使用混合。
• LESS： 使用 .mixin() 和 .mixin 来创建和使用混合。

3、继承

• SCSS： 使用 @extend 来实现样式的继承。
• LESS： 使用 :extend() 来实现样式的继承。

4、运算符

• SCSS： 支持标准的数学运算符，如 +、-、*、/ 和 %。
• LESS： 同样支持标准的数学运算符，但是它还支持在颜色值之间进行运算。