CSS、SCSS、LESS语法的区别详解

目录

CSS、SCSS、LESS语法的区别详解

1. CSS

2. SCSS

变量

嵌套规则

混合

函数

3. LESS

变量

嵌套规则

混合

函数

区别对比

总结

---

CSS、SCSS、LESS语法的区别详解

1. CSS

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、XUL等等）文档的外观和格式。CSS描述了如何将元素显示在屏幕上，打印出来，或者以其他方式呈现给用户。
 

css
body {
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    font-size: 2em;
}

CSS没有变量、嵌套规则、混合、函数等高级功能。

2. SCSS

SCSS（Sassy CSS）是CSS预处理器Sass的一种语法格式。它使用全新的语法结构，相比于原生的CSS，SCSS可以使用变量、嵌套规则、混合、函数等高级功能。

变量

在SCSS中，我们可以使用$符号来定义一个变量：
 

scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

嵌套规则

SCSS支持嵌套规则，这意味着你可以在一个选择器内部定义另一个选择器：

scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合

混合是一种可以重复使用的代码块，你可以在任何地方引用它：

scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

函数

SCSS还支持自定义函数：

scss
@function double($n) {
  @return $n * 2;
}

.box { width: double(5px); }

3. LESS

LESS是一种动态样式语言，也是一种CSS预处理器，它扩展了CSS的语法，增加了变量、混合、函数和许多其他的特性，使得CSS更易维护、主题化和可扩展。

变量

在LESS中，我们可以使用@符号来定义一个变量：

less
@base: #f938ab;

.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
}

 

嵌套规则

LESS也支持嵌套规则：

less
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合

混合在LESS中的使用方法和SCSS类似：

less
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
          border-radius: @radius;
}

.box { .border-radius(10px); }

函数

LESS也支持自定义函数，但是它们被称为"懒惰求值"，因为它们只有在被调用时才会计算：

less
@lazy-eval: 3;
.lazy-eval(@a: @lazy-eval) {
  width: (@a * 2);
}

.lazy-loaded {
  .lazy-eval();
}

区别对比

特性	CSS	SCSS	LESS
变量	不支持	$var: value;	@var: value;
嵌套规则	不支持	支持	支持
混合	不支持	@mixin name{}; @include name;	.name{}; .name();
函数	不支持	@function name{}; name();	支持（懒惰求值）

总结

总的来说，CSS、SCSS和LESS各有各的优点。CSS简单易学，适合小型项目和初学者；SCSS和LESS功能强大，适合大型项目和需要高度定制的场景。在实际开发中，我们可以根据项目的需求和个人的喜好，选择最适合自己的样式表语言。