Scss VS Less

LESS 和 SCSS 都是非常流行的 CSS 预处理器，它们都扩展了传统 CSS 的功能，提供了如变量、嵌套、混合、继承等强大特性。以下是基本的用法：

LESS 基本语法

1、定义变量

在 LESS 中，你可以使用变量来存储颜色、字体、间距等常用值，从而避免重复。

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

body {
font-size: @font-size;
color: @primary-color;
}

h1 {
margin-bottom: @spacing;
}

2、嵌套规则

nav {
background-color: @primary-color;
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-right: 10px;
}
a {
color: white;
text-decoration: none;
}
}

注意:nav 选择器内的 ul, li, 和 a 是嵌套在 nav 内部的，表示它们是 nav 的子元素。

3、混合宏（Mixins）

.rounded-corner(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

.box {
.rounded-corner(10px);
background-color: @primary-color;
}

4、运算

@base-width: 100px;
@base-height: 50px;

.container {
width: @base-width * 2;
height: @base-height + 20px;
}

5、继承：

.submit-button 通过 .button 实现了继承，继承了 .button 的所有样式。

.button {
padding: 10px 20px;
border: none;
background-color: @primary-color;
}

.submit-button {
.button;
font-weight: bold;
}

6、控制结构

在LESS中，if和else语法并不像在传统的编程语言中那样直接支持，但可以使用 @ 变量和条件表达式来实现类似的功能LESS 提供了if的变种——when语法，用于根据条件来动态设置样式。

1.使用 when 来模拟 if-else 逻辑

 @theme: light;
.button {
  color: @theme == light ? #fff : #000;
  background-color: @theme == light ? #3498db : #2c3e50;
}

2.你可以在 LESS 中使用多重条件判断，来模拟复杂的 if-else 结构。

@theme: dark;
@font-size: large;

.button {
  // 基于主题的背景色
  @bg-color: @theme == light ? #fff : #333;
  background-color: @bg-color;

  // 基于字体大小的字体大小
  @font-size: @font-size == small ? 12px : (@font-size == medium ? 16px : 20px);
  font-size: @font-size;
}

3.模拟完整的 if-else 结构

@theme: dark;
.button {
  // 模拟 if-else 逻辑
  .theme-light() {
    background-color: #fff;
    color: #000;
  }

  .theme-dark() {
    background-color: #333;
    color: #fff;
  }

  // 使用条件选择执行的样式
  .when(@theme == light) {
    .theme-light();
  }
  .when(@theme == dark) {
    .theme-dark();
  }
}

SCSS 示例

1、变量

SCSS 使用 $ 符号定义变量，语法上和 LESS 类似、

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

body {
font-size: $font-size;
color: $primary-color;
}

h1 {
margin-bottom: $spacing;
}

2、嵌套规则

nav {
background-color: $primary-color;
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-right: 10px;
}
a {
color: white;
text-decoration: none;
}
}

注意：SCSS 中的嵌套与 LESS 类似，但不需要写大括号后面紧跟子元素。

3、混合宏（Mixins）

@mixin rounded-corner($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}

.box {
@include rounded-corner(10px);
background-color: $primary-color;
}

使用 @mixin 定义一个混合宏，@include 用于调用该混合宏。 与 LESS 的语法相比，SCSS 使用了 @mixin 和 @include 来代替 LESS 的 .mixin() 和 .mixin。

4、运算

$base-width: 100px;
$base-height: 50px;

.container {
width: $base-width * 2;
height: $base-height + 20px;
}
<!-- 6、继承 -->
.button {
padding: 10px 20px;
border: none;
background-color: $primary-color;
}

.submit-button {
@extend .button;
font-weight: bold;
}

5、SCSS 提供了 @if 和 @else 指令来实现条件逻辑。

1.基本语法

@if <condition> {
    // 如果条件为真时执行的样式
    } @else {
    // 如果条件为假时执行的样式
    }
    
 
 $theme: dark;
 .button {
    @if $theme == light {
    background-color: #fff;
    color: #000;
    } @else {
    background-color: #333;
    color: #fff;
    }
    }
    

2.多重判断

    $color: red;
    .button {
    @if $color == red {
    background-color: red;
    } @else if $color == green {
    background-color: green;
    } @else if $color == blue {
    background-color: blue;
    } @else {
    background-color: gray;
    }
    }
    

三、 两者之间的区别：