preface

Familiar to front-end developers, CSS(Cascading Style Sheet) is used for styling web pages to control the display properties of the tags in HTML web elements.

CSS was originally designed to make up for the deficiency of HTML native style. Simple Web sites need a small amount of CSS code and have low requirements for CSS. However, with the trend of Web applications pursuing ultimate user experience, the requirements for CSS are also increasing.

CSS, however, is not a programming language. You can use it to develop the look and feel of a web page, but you can’t program with it. Unlike other programming languages that can define variables, constants, conditional statements, etc., CSS simply describes attributes, which is cumbersome to write and difficult to organize and maintain.

In view of the above problems, THE CSS preprocessor came into being, specifically for the implementation of CSS like a programming language can do some procedures.

What is a CSS preprocessor

The CSS preprocessor defines a new language. The basic idea is to use a special programming language to add some programming features to the CSS, and take the CSS as the target file. Developers use this language to encode CSS. In other words, CSS preprocessors style web pages in a specialized programming language and then compile them into normal CSS files for use by projects.

CSS and compilers are now almost standard for CSS development, which improves the efficiency of CSS development in the following aspects:

  • Improve your programming skills
  • Enhanced reusability
  • Enhance maintainability
  • Easier to resolve browser compatibility

Different precompilers have different features, but their core functions revolve around the same goals, such as:

  • nested
  • variable
  • Mixins/inheritance
  • operation
  • modular

Nesting is a syntactic feature supported by all precompilers; Mixin/inheritance is for hacks and code reuse; Variables and operations enhance the programmability of source code; Modularity support not only facilitates code reuse, but also improves source code maintainability

What are the CSS preprocessors

CSS preprocessor technology is quite mature, and there are many different CSS preprocessor languages, including Sass(Scss), Less, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS, etc.

Sass: Created in 2007, the earliest and most mature CSS preprocessor language. You can use constants, variables, functions, mixins, functions, etc., and eventually compile a legitimate CSS for the browser to use.

Sass now has two sets of syntax rules:

  • Use indentation as a separator to distinguish between blocks of code
  • andCSSAlso use curly braces ({}) as a separator

The latter syntax rule is called SCSS and is supported in versions after Sass3.

Less: Open source in 2009, heavily influenced by Sass, but using CSS syntax.

Stylus: Stylus was born in 2010 from the Node.js community to support CSS preprocessing for Node projects. It has a certain popularity in the community, and is generally Less popular than Sass and Less popular.

The Stylus supports both indentation and CSS regular style writing rules

CSS preprocessor syntax rules

Each programming language has its own syntax rules, and so do CSS preprocessor languages. Understand the syntax of the CSS preprocessor language before using it. The syntax of the three CSS preprocessor languages Sass, Scss, and Stylus is similar to that of CSS.

  1. Sass syntax

Sass3.0 starts with standard CSS syntax, basically the same as SCSS. By default, Sass uses the. SCSS extension.

// sass new syntax rule
.container {
    background: #f6f6f6;
    min-height: 100%;
}
Copy the code

Sass also supports the old syntax, which is slightly different from regular CSS and is more strict. Any indentation or character error will cause a style compilation error. And the file uses the. Sass extension. The syntax is as follows:

.container
    background: #f6f6f6
    min-height: 100%
Copy the code
  1. Less grammar

Less is an extension of CSS that adds additional functionality to the CSS syntax. In terms of syntax rules, Less and Sass use the same CSS standard syntax, but the source file extension of Less is. Less, for example 🌰:

.block {
    height: 30px;
    padding-bottom: 10px;
    color: # 666;
    font-weight: normal;
}
Copy the code
  1. Stylus

Stylus’s syntax is a little more variable, with a. Styl file extension. Stylus also accepts standard CSS syntax, but like Sass’s older syntax rules, uses indentation control. Syntax, as follows:

// Similar to CSS standard syntax
.head {
    color: #ebebeb;
    background-color: # 666;
}

// omit the braces
.head 
    color: #ebebeb;
    background-color: # 666;

// omit the braces and semicolons
.head 
    color: #ebebeb
    background-color: # 666
Copy the code

The syntax rules above can be used together in the same style file without the compiler reporting an error.

PostCSS

In addition to the preprocessors mentioned above, PostCSS will be used in the project. PostCSS is not a CSS preprocessor and does not conflict with precompilers such as Sass and Scss. Many people refer to this as a post-CSS processor, which partly illustrates the common use of PostCSS within the line:

PostCSS provides a way to use JavaScript code to process CSS. It is responsible for parsing CSS code into Abstract Syntax Tree (AST), and then processing the AST by plug-ins. Plug-ins can perform various operations, such as:

  • Variables and mixins can be supported
  • Add browser-specific declaration prefixes
  • Translate style rules using future CSS specifications into formats supported by the current CSS specification

The power of PostCSS lies in the continuous development of the plugin system, PostCSS has more than 200 functions of various plug-ins, developers can also develop their own PostCSS plug-ins

Based on the above understanding, PostCSS has two main functions:

  1. willCSSResolve toJavaScriptoperableAST
  2. Call plug-in handlingASTAnd get the results

PostCSS can perform so many tasks, including both pre-processing and post-processing in the traditional sense, that it cannot be simply categorized as a CSS pre-processing or post-processing tool.

PostCSS is generally inherited from existing build tools, such as WebPack. After integration, select plug-ins that meet functional requirements and configure them. Common plug-ins are:

  • AutoPrefixer

Function: Add browser-specific prefixes for properties in the CSS. You can automatically add prefixed property declarations based on the supported browser type and version. In addition, Autoprefixer can remove redundant prefixes of property names from CSS code. Legacy CSS code may contain prefixed property names supported by older browsers manually added by developers. Autoprefixer removes these redundant prefixes by default.

Autoprefixer uses browser data provided on Can I Use to keep the rules up to date. You Can click here to see how Autoprefixer works.

  • CSSnext

CSSnext allows developers to use the CSS syntax of the future. The W3C has a lot of new CSS rules that aren’t currently implemented by browsers, but allow developers to write more complex CSS more efficiently, and CSSnext does just that.

CSSnext github

  • PreCSS

PreCSS allows developers to use markup languages like Sass

$blue: #056ef0;
$column: 200px;

.menu {
  width: calc(4 * $column);
}

.menu_link {
  background: $blue;
  width: $column;
}

/* becomes */

.menu {
  width: calc(4 * 200px);
}

.menu_link {
  background: #056ef0;
  width: 200px;
}
Copy the code

conclusion

The high requirements for Web projects have led to the emergence of CSS preprocessing and post-processing. The complex problems of traditional CSS are partly caused by the inflexibility of CSS itself, and partly by the compatibility problems caused by different implementations of browsers. The appearance of CSS preprocessors provides new ideas for the writing, management and maintenance of CSS. Preprocessors such as Sass, Scss and Stylus can write CSS styles programmatically, while PostCSS can transform and process CSS through powerful plug-in systems, so that tedious work can be handled by programs. This article introduces CSS preprocessor and PostCSS, hoping to help you have a more comprehensive understanding of CSS.

Refer to the link

Elaborate on CSS and preprocessors (and the differences between LESS, SASS, and Stylus)

CSS preprocessor -MDN

Simple book – Use postCSS for CSS processing

CSS precompilation with PostCSS and Webpack to build CSS comprehensive solution

6 great CSS plug-ins