The difference between Sass and Less

"Which CSS preprocessor language should I choose?"

What is a CSS preprocessor?

The CSS preprocessor defines a new language. The basic idea is to use a specialized programming language to add some programming features to CSS and target CSS. Generate files, and then developers only need to use this language to code CSS.

Why use CSS preprocessor?

CSS is just a markup language. Variables cannot be customized or quoted.

CSS has the following specific shortcomings:

• The syntax is not powerful enough, for example, it cannot be nested, resulting in a lot of writing required in modular development. Duplicate selectors;

• There is no variable and reasonable style reuse mechanism, so that logically related attribute values ​​​​must be repeatedly output in the form of literals, making it difficult to maintain.

Pre-compilation can easily lead to the abuse of descendant selectors

Advantages of using preprocessors

• Provide a style layer reuse mechanism for missing CSS layers

• Reduce redundant code

• Improve the efficiency of style code Maintainability

Sass&Less

• ##Less (abbreviation for Leaner Style Sheets) is a backward-compatible CSS Extended language. Because Less is very similar to CSS, Less only adds a few convenient extensions to the CSS language, making it easy to learn.

• sass, as "the most mature, stable and powerful professional-level CSS extension language in the world". Compatible with all versions of CSS, and there are countless frameworks built with Sass, such as Compass, Bourbon, and Susy.

The suffix before SASS version 3.0 is .sass, while the suffix after version 3.0 is .scss.

Languages ​​such as Sass and Less can actually be understood as supersets of CSS. Based on the original syntax format of CSS, they add programming language features, such as the use of variables and the use of logical statements. Support, functions, etc. Make CSS code easier to maintain and reuse.

But the browser will definitely only recognize CSS files in the end. It cannot handle the variables and logical statements in CSS, so a compilation process is needed to convert the code written in Sass or Less into standard CSS. Code, this process is called CSS preprocessing.

Supplementary instructions

ruby sass

Ruby Sass is the original implementation of Sass, but it has He will pass away on March 26, 2019. We no longer provide any support for it, and Ruby Sass users are asked to migrate to another implementation (LibSass or Dart Sass).

why?

In the beginning, writing Sass in Ruby can easily attract existing users and even the entire Ruby ecosystem to use it

Later, Node.js became ubiquitous in front-end development is gone, and Ruby fades into the background. At the same time, the scale of the Sass project has far exceeded the author's original vision, and the performance requirements for Sass have exceeded Ruby's capabilities.

Dart-sass

Because I don’t use sass very much, thank you @WashingtonHua for the reminder

sass in November 2016 The alpha version of the Dart Sass 42 project was officially announced, that is, they rewrote Sass using Dart.

According to the sass-lang official website:

Dart Sass is the primary implementation of Sass, which means it gets new features before other implementations. It's fast, easy to install, and compiles to pure JavaScript, making it easy to integrate into modern web development workflows.

The pure JS version performs slower than the standalone version, but it is easy to integrate into existing workflows and allows you to customize functions and importers through JavaScript. Add it to the project by executing the npm install --save-dev sass command and import it through require().

When installed through npm, Dart Sass provides a JavaScript API for compatibility with Node Sass. Full compatibility is in progress

libSass

Sass was originally written in Ruby. LibSass is a Sass engine implemented in C/C. The core point is that it is simple, fast and easy to integrate.

LibSass is just a tool library. To run it locally (i.e., compile Sass code), you need a LibSass wrapper. There are already many packages for LibSass.

Sass C, a package developed in C language

sass.cr is a LibSass package for the Crystal programming language.

go-libsass is the most active Go language package

For details, please see

sass.bootcss.com/libsass

Less

Less is a CSS preprocessing language that extends the CSS language and adds variables, mixins, functions and other features to make CSS easier to maintain and expand.

Less can run on Node or the browser. A valid CSS snippet is itself a valid LESS snippet.

LESS provides abstract mechanisms required for general programming such as variables, nesting, mixins, operators, and functions.

Variables

Variables allow us to define a series of common values ​​in one place and then call them throughout the entire style sheet.

When making global style adjustments, you may only need to modify a few lines of code.

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

Compiles to:

#header {
  width: 10px;
  height: 20px;
}

Mixins

Mixins are a set of properties that are included from a rule set ( or mixin) into another ruleset. Suppose we define a class as follows:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

If you want to use these attributes in other rule sets, just enter the class name of the required attributes as follows

#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

Nesting

Less provides the ability to use nesting instead of or in conjunction with cascading. Suppose we have the following CSS code:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Using Less language we can write code like this:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Code written in Less is more concise and imitates the organizational structure of HTML.

You can also use this method to use pseudo-selectors with mixins. Here's a classic clearfix trick, rewritten as a mixin (& represents the parent of the current selector):

.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

Operations

Arithmetic operators, -, *, / can operate on any number, color or variable

Note that if the units of the variables on both sides of the operator are different, unit conversion will be performed before addition, subtraction or comparison. The calculated result is based on the unit type of the leftmost operand. If the unit conversion is invalid or meaningless, the units are ignored. Invalid unit conversions such as px to cm or rad to %.

No conversion will be done if there is no unit

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

Functions

Less has a variety of built-in functions for converting colors, processing strings, Arithmetic operations etc. These functions are described in detail in the Less function manual.

The usage of the function is very simple. The following example will introduce how to use the percentage function to convert 0.5 to 50%, increase the color saturation by 5%, reduce the color brightness by 25% and increase the hue value by 8. Usage:

@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Import ( Importing)

You can import a .less file, and all variables in this file can be used. If the imported file has a .less extension, you can omit the extension:

@import "library"; // library.less
@import "typo.css";

This article only lists a brief introduction to several features of less. For a more detailed introduction to less, please refer to the reference document 2 at the end of the article

Sass

Sass is an auxiliary tool that enhances CSS. It adds variables ( Variables, nested rules, mixins, inline imports and other advanced functions. These extensions make CSS more powerful and elegant.

Features

• Fully compatible with CSS3

• Add variables based on CSS , nesting, mixins and other functions

• Perform operations on color values ​​and attribute values ​​through functions

• Provide control instructions (control directives) and other advanced functions

• Customized output format

Variables

sass usage $ symbol to identify variables (older versions of sass use ! to identify variables.

$highlight-color: #F90;

Unlike CSS properties, variables can be defined outside the css rule block Exists. When a variable is defined within a css rule block, the variable can only be used within this rule block.

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

When declaring a variable, the variable value can also refer to other variables.

Nesting(Nesting)

The basic usage is the same as less

Subcombination selector and same-level combination selector:>, and~

this The three combination selectors must be used in conjunction with other selectors to specify that the browser only selects elements within a specific context.

These combination selectors can be easily applied to Sass's rule nesting . You can place them after the outer selector or before the inner selector:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass will unpack and combine these nested rules one by one as you wish:

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

Nested attributes;

In sass, in addition to CSS selectors, attributes can also be nested.

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

The rules for nested attributes are as follows: Break the attribute name at the dash -, add a colon: after the root attribute, followed by a { ​​} block, and write the sub-attribute part in this { } block. Just like css selector nesting, sass It will unpack your sub-attributes one by one, and connect the root attributes and sub-attributes through the dash -. The final effect will be the same as the css style you manually write over and over again:

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

For attributes Abbreviated form, you can even nest it like this to indicate exception rules:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

mixer;

Mixers are defined using the @mixin identifier, which The symbol gives a name to a large section of styles, which can be easily reused by referencing the name.

下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在样式表中通过@include来使用这个混合器。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

less及sass都支持混合器传参，具体内容参见参考文档 2、3

导入SASS文件;

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

使用SASS部分文件

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。

sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css

默认变量值;

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

相同与差异

相同之处：

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

、

目前大部分的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分使用环境，所以不用在意处理机制，以上只是单纯的对比两者本身。

请不要忘记Dart Sass，它快速，易于安装，并且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。

在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

条件语句

Less 中并不支持条件语句，当然，可以通过内置函数 if 以及 and，or，not 这些来模拟条件语句。

在 Sass 中是支持条件语句的，但也不是像其他编程语言直接 if 这样通过保留字来编写，需要加个 @ 符号

框架-

sass框架谁有空可以在评论区补充一下

用哪个？

不知道～

• LESS环境较Sass简单

• LESS使用较Sass简单，大概？

• 相对而言，国内前端团队使用LESS的同学会略多于Sass

• 从功能出发，Sass较LESS略强大一些

• Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation

• 就国外讨论的热度来说，Sass绝对优于LESS

• 就学习教程来说，Sass的教程要优于LESS(本身来说，less官方文档也够用了)。

推荐教程：《CSS教程》《PHP教程》

The above is the detailed content of The difference between Sass and Less. For more information, please follow other related articles on the PHP Chinese website!