New knowledge storeFront end from entry to groundFor attention, star and suggestions, update from time to time ~

If you think it’s good, just give it a thumbs up

“Which CSS preprocessor language should I choose?”

What is a CSS preprocessor?

CSS preprocessor defines a new language, its basic idea is to use a special programming language, add some programming features to CSS, CSS as a target file, and then developers just use this language for CSS coding.

Why use CSS preprocessors?

CSS is just a markup language. You can’t customize variables or reference them.

The CSS has the following disadvantages:

  • Syntax is not strong enough, such as the inability to write nested, resulting in many repetitive selectors to be written in modular development;
  • The absence of variables and a reasonable style reuse mechanism makes it difficult to maintain logically related attribute values that must be repeatedly printed as literals.

Precompilation can easily lead to abuse of descendant selectors

Advantages of using a preprocessor

  • Provides a style layer reuse mechanism missing from the CSS layer
  • Reduce redundant code
  • Improve the maintainability of style code

Sass&Less

  • Less (short for Leaner Style Sheets) is a backward-compatible CSS extension language. Because Less is so much like CSS, it only adds a few handy extensions to the CSS language, making it easy to learn.

  • Sass, as “the most mature, stable and powerful professional CSS extension language in the world”. Compatible with all versions of CSS, and there are countless frameworks built using SASS, such as Compass, Bourbon, and Susy.

The suffix of SASS before 3.0 is. SASS, and that after 3.0 is. SCSS.

Languages such as Sass and Less can be understood as supersets of CSS. On the basis of the original syntax format of CSS, they add the features of programming languages, such as the use of variables, support for logical statements, functions and so on. Make CSS code easier to maintain and reuse.

However, the browser will only know CSS files. It can’t handle variables and logical statements in CSS, so there is a compilation process that converts Sass or Less code into standard CSS code. This process is called CSS preprocessing.

added

ruby sass

Ruby Sass was the original implementation of Sass, but will die on March 26, 2019. We no longer provide any support for it, so Ruby Sass users are requested to migrate to another implementation (LibSass or Dart Sass).

According to?

At first, writing Sass in Ruby made it easy for existing users and even the entire Ruby ecosystem to use it. Later, Node.js became ubiquitous in front-end development, while Ruby faded into the background. At the same time, the Sass project has grown much larger than the authors originally envisioned, and the performance demands on Sass have surpassed Ruby’s capabilities.

Dart-sass

Because I don’t use sass much, thanks @washingtonhua for reminding me

In November 2016, SASS officially announced the alpha version of THE Dart SASS 42 project, in which they rewrote SASS using Dart.

Dart Sass is the primary implementation of SASS, which means it gets new functionality before other implementations, according to the official Sass-Lang website. It is fast, easy to install, and compiles to pure JavaScript, making it easy to integrate into modern Web development workflows.

The pure JS version is slower than the standalone version, but it is easily integrated into existing workflows and allows you to customize functions and importer via JavaScript. Add it to the project by executing the NPM install –save-dev sass command and introduce it via require().

Dart Sass provides a JavaScript API for Compatibility with Node Sass when installed through NPM. Work on full compatibility is in progress

libSass

Sass was originally written in Ruby. LibSass is a Sass engine implemented in C/C++. The core is its simplicity, speed, and ease of integration. LibSass is just a tool library. To run it locally (that is, to 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 package for the GO language

See sass.bootcss.com/libsass for details.

Less

Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making the CSS easier to maintain and expand.

Less can run on Node or in a browser. A legitimate CSS snippet is itself a legitimate LESS snippet.

LESS provides abstraction mechanisms for variables, nesting, mixing, operators, functions, and more that are required for general programming.

variable

Variables allow us to define a set of generic values in one place and then call them throughout the stylesheet.

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

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
Copy the code

Compile as follows:

#header {
  width: 10px;
  height: 20px;
}
Copy the code

Mixins

A Mixin is a method of including (or mixing) a set of attributes from one rule set into another. Suppose we define a class as follows:

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

If you want to use these attributes in other rule sets, simply enter the class name of the desired attribute as follows

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

Nesting

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

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

In Less we can write code like this:

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

Code written in Less is much cleaner and mimics the organization of HTML.

You can also use pseudo-selectors with mixins in this way. Here is a classic Clearfix trick, rewritten as a mixin (& denotes the parent of the current selector) :

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden; }}Copy the code

Operations

The arithmetic operators +, -, *, and/can operate on any number, color, or variable

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

No units, no conversion

// All operands are converted to the same unit
@conversion-1: 5cm + 10mm; // The result is 6cm
@conversion-2: 2 - 3cm - 5mm; // The result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // The result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // The result is 10%
@other: @base + @filler; // The result is 15%
Copy the code

Multiplication and division do not convert. Because neither of these operations makes sense in most cases, a length multiplied by a length yields a range, and CSS does not support specifying ranges. Less will operate as the number is and will specify an explicit unit type for the result of the calculation.

@base: 2cm * 3mm; // The result is 6cm
Copy the code

You can also do color arithmetic:

@color: # 224488 / 2; // The result is #112244
background-color: # 112244 + # 111; // The result is #223355
Copy the code

Functions

Less has built-in functions for converting colors, manipulating strings, arithmetic operations, and more. These functions are described in detail in the Less function manual.

The usage of the function is very simple. Use the percentage function to convert 0.5 to 50%, increase color saturation by 5%, decrease color brightness by 25%, and increase hue value by 8.

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

Importing (Importing)

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

@import "library"; // library.less
@import "typo.css";
Copy the code

This article only lists a few features of LESS. For more details about less, see Reference 2 at the end of this article

Sass

Sass is an auxiliary tool to enhance CSS. It adds advanced functions such as variables, nested rules, mixins, inline imports and so on on the basis of CSS syntax. These extensions make CSS more powerful and elegant.

Features:

  • Fully compatible with CSS3
  • Add variables, nesting, mixins, and more to CSS
  • Color and attribute values are computed by functions
  • Provide advanced functions such as control directives
  • Customize the output format

variable

Sass uses the $sign to identify variables (older versions of Sass use! To identify variables.

$highlight-color: #F90;
Copy the code

Unlike CSS properties, variables can exist outside of the CSS rule block definition. When a variable is defined within a CSS rule block, the variable can only be used within that rule block.

$nav-color: #F90; nav { $width: 100px; width: $width; color: $nav-color; } // nav {width: 100px; color: #F90; }Copy the code

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

Nesting

The basic usage is the same as less

Subcombinatorial and hierarchical combinatorial selectors: >, +, and ~

These three combinatorial selectors must be used in conjunction with other selectors to specify that the browser selects only elements in a particular context.

These combinative selectors can be applied effortlessly to rule nesting in SASS. You can place them behind the outer selector or in front of the inner selector:

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

Sass will untangle and assemble these nested rules 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 }
Copy the code

Nested attributes;

In SASS, in addition to CSS selectors, properties can also be nested.

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

The rules for nested attributes are as follows: break the attribute name from the underscore -, add a colon: after the root attribute, and then a {} block in which the child attribute portion is written. Just like CSS selectors nested, sass unwinds your sub-attributes one by one, connecting the root and sub-attributes with a underlined -, resulting in the same CSS style that you would manually write over and over again:

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

For attribute abbreviations, you can even nest exceptions like the following:

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

Mixer;

The mixer is defined using the @mixin identifier, which gives a name to a large section of a style that can easily be reused by referring to it.

The sASS code below defines a very simple mixer to add rounded borders across browsers.

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

You can then use the mixer in your stylesheet via @include. The @include call extracts all the styles in the mixer and places them where the @include call was made. If I write it like this:

notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; } //sass generates:. Notice {background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }Copy the code

Less and SASS support mixer parameter transfer. For details, see Reference Documents 2 and 3

Import SASS file;

One particularly uncommon feature of CSS is the @import rule, which allows you to import other CSS files within one CSS file. The consequence, however, is that the browser will only download additional CSS files when @import is executed, which makes the page load very slow.

Sass also has an @import rule, but the difference is that sass’s @import rule imports the relevant CSS files when they are generated. This means that all related styles are grouped into the same CSS file without making additional download requests.

Using sass’s @import rule does not require specifying the full name of the file being imported. You can omit the.sass or.scss file suffix

Use SASS partial files

When spreading sASS styles over multiple files with @import, you usually only want to generate a few CSS files. Sass files written specifically for the @import command do not need to generate a separate CSS file. Such Sass files are called local files. The name of the sass local file begins with an underscore. This way, SASS will not compile this file separately at compile time to output CSS

Default variable value;

! Default is used for variables, which means: if the variable is declared, the declared value is used; otherwise, the default value is used.

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

In the example above, if the user declared a $fancybox-width variable before importing your sass local file, the 400px assignment to $fancybox-width in your sass local file is invalid. If the user does not make such a declaration, $fancybox-width defaults to 400px.

Sameness and difference

Similarities:

Less and Sass have some syntactic commonalities, such as the following:

1, Mixins — class in class;

Parameter mixing — classes that can be passed as arguments, just like functions.

3. Nesting rules — nesting classes within classes to reduce duplicate code;

4. Computing — CSS with math;

5, color function — can edit the color;

Namespaces — grouping styles so that they can be called;

7. Scope — locally modify styles

8. JavaScript Assignment — Use JavaScript expressions to assign values in CSS.

Differences:

category Sass less
The environment The dart or other Based on javascript, it can run on Node or in a browser
use complex Simple (relatively speaking)
function complex Simple (relatively speaking)
Processing mechanism Server-side processing It can run on Node or in a browser
variable Begin with $ Starting with the @
The file suffix Sass or. SCSS .less

Most current implementations are packaged with front-end projects and only distinguish the use environment for learning or demonstration purposes, so don’t worry about the processing mechanism. The above is simply a comparison between the two.

Don’t forget Dart Sass, which is fast, easy to install, and compiles to pure JavaScript, making it easy to integrate into modern Web development workflows.

  • In Less, only circular values are allowed. In Sass, we can iterate over any type of data. But in Less, we can only use recursive functions to loop over values.

  • Conditional statements are not supported in Less, but they can be simulated using the built-in functions if and AND, OR, or not. Conditional statements are supported in Sass, but they are not written by reserved words like other programming languages, which require an @ sign

  • Frameworks – SASS frameworks who have time to add in the comments section

Use what?

I don’t know ~

  1. LESS is simpler than Sass
  2. LESS is easier to use than Sass.
  3. In contrast, slightly more Chinese front-end teams use LESS than Sass
  4. In terms of functionality, Sass is slightly more powerful than LESS
  5. There are several mature frameworks for Sass on the market, such as Compass, and there are many frameworks that use Sass, such as Foundation
  6. In terms of foreign discussion heat, Sass is definitely better than LESS
  7. In terms of learning tutorials, Sass tutorials are superior to LESS(the official LESS documentation itself is good enough).

We use less, which generates CSS at compile time

If you learn something new, please give it a thumbs up

–

This article contains: a journey of large front end foundation building from scratch (simple and profound, constantly updated ~)

Recommended reading:

  • CSS Position and its sticky attribute (” sticky “)

  • Reflow and Repaint, KFC and MC are mentioned at the same time every time. The relationship is almost as close as MC beside KFC.

  • Viewport and 1 px | tools: this is a 1 px, designer: no, I can’t, this is not a design but ready to quarrel with me

  • Edible “dry” CSS layout, pure Html example, can debug | horizontal, vertical, multiple columns can watch, adjustable, can be taken away, the only, no branch

  • Front end must master “CSS cascade context” explain | handmade sample, BaoJiao package will sister with cat, what do you want?

Reference Documents:

  1. What’s the difference between Sass and less? In which good
  2. Less Quick Start
  3. Sass Quick start
  4. What are SASS and LESS? How to use it?