Article understanding CSS preprocessor

Roller shutter still 2021-09-15 09:48:36

Preface

For front-end developers ,CSS(Cascading Style Sheet) No stranger , It is mainly used for web page style design , adopt CSS It can be done to HTML The display attribute of each tag in the web page element is controlled .

CSS Originally to make up for HTML The shortcomings of the original style , ordinary Web The website needs a small amount of CSS Code , Yes CSS Not very demanding , But now web In the trend of applications pursuing the ultimate user experience , Yes CSS The demand for is also increasing .

However CSS It's not a programming language , You can use it to develop web page style and appearance , But there's no way to program with it .CSS Unlike other programming languages, variables can be defined 、 Constant 、 Conditional statements, etc , Just a simple attribute description , It's hard to write , And the code is difficult to organize and maintain .

For the above problems ,CSS The preprocessor came into being , Designed to make CSS Like a programming language, you can do some procedural processing .

What is? CSS The preprocessor

CSS Preprocessor defines a new language , The basic idea is , In a special programming language , by CSS Add some programming features , take CSS Generate files as targets , Developers use this language to CSS Coding work . let me put it another way ,CSS The preprocessor uses a special programming language for web page style design , And then compile it into normal CSS file , For project use .

CSS And compilers are now almost development tools CSS Standard configuration of , From the following aspects CSS The efficiency of development :

  • Enhance programming ability
  • Enhance reusability
  • Enhance maintainability
  • Easier to solve browser compatibility

Although different precompiler features are different , But the core functions revolve around the same goal , such as :

  • nesting
  • Variable
  • mixin/ Inherit
  • operation
  • modularization

Nesting is a syntax feature supported by all precompilers ;mixin/ Inheritance is to solve hack Code reuse ; Variables and operations enhance the programmability of the source code ; Modular support is not only more conducive to code reuse , It also improves the maintainability of the source code

CSS What are the preprocessors

CSS Preprocessor technology is quite mature , Now there are many different CSS Preprocessor language , Include Sass(Scss), Less, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS etc. .

Sass: Born in 2007 year , The earliest and most mature one CSS Preprocessor language . You can use constants 、 Variable 、 function 、 Mix in 、 Functions and so on , Finally, it will be compiled into legal CSS Let the browser use .

current Sass There are already two sets of grammar rules :

  • Use indentation as a separator to distinguish code blocks
  • and CSS Use braces as well ({}) As a separator

The latter grammatical rule is called SCSS, stay Sass3 Later versions support this syntax rule .

Less: 2009 In open source , suffer Sass Greater impact , But use CSS grammar .

Stylus: 2010 The year was born , come from Node.js Community , Mainly for Node The project is going on CSS Preprocessing support , There is a certain popularity in this community , In a broad sense, the support rate is not as good as Sass and Less.

Stylus Support both indentation and CSS General style writing rules

CSS Preprocessor syntax rules

Each programming language has its own syntax rules ,CSS The same is true for preprocessor languages . Use CSS The preprocessor language should have a certain understanding of its syntax before . and Sass, Scss, Stylus These three CSS The syntax of the preprocessor language is the same as CSS The grammar is almost the same .

  1. Sass grammar

Sass3.0 The version started with the standard CSS grammar , Basic and SCSS equally . Default Sass Use .scss Extension .

// sass New grammar rules 
.container {
background: #f6f6f6;
min-height: 100%;
}
 Copy code 

meanwhile ,Sass Also supports old syntax , This is different from the conventional CSS It's a little different , More strictly , Any indentation and character errors will cause style compilation errors ,Sass It can be omitted {} and ;, And the file uses .sass Extension , The grammar is as follows :

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

Less yes CSS An extended form of , stay CSS Many additional functions have been added to the syntax . In terms of grammatical rules ,Less and Sass equally , It's all used CSS The standard grammar of , It's just Less The source file extension of is .less, Take a chestnut :

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

Stylus The grammar is more changeable , The file extension is .styl,Stylus Also accept standard CSS grammar , But with Sass The old grammar rules are the same , Use the indent control , meanwhile Stylus Also accept without {} and ; The grammar of , As shown below :

// Be similar to CSS Standard grammar 
.head {
color: #ebebeb;
background-color: #666;
}
// Omit braces 
.head
color: #ebebeb;
background-color: #666;
// Omit braces and semicolons 
.head
color: #ebebeb
background-color: #666
 Copy code 

The above syntax rules can be used in the same style file at the same time , The compiler also doesn't report errors .

PostCSS

In addition to using the preprocessor mentioned above in the project , Still can use PostCSS.PostCSS Not at all CSS The preprocessor , And Sass, Scss The precompiler does not conflict . Many people call it CSS Post processor , To some extent, it means that there is an in-line understanding of PostCSS The universal use of :

image.png

PostCSS Provides a way to use JavaScript Code to handle CSS, Responsible for the CSS Code parsing into Abstract syntax tree (Abstract Syntax Tree, AST), Then the plug-in pair AST To deal with , Plug ins can perform a variety of operations , such as :

  • It can support variables and mixing
  • Add browser related declaration prefix
  • Use future CSS The canonical style rules are translated into the current CSS The format supported by the specification

PostCSS The strength of is the evolving plug-in system , at present PostCSS There has been a 200 Multiple plug-ins with different functions , Developers can also develop their own PostCSS plug-in unit

Based on the above understanding ,PostCSS There are two main functions of :

  1. take CSS It can be interpreted as JavaScript It can be operated AST
  2. Call the plug-in to process AST And get the result

PostCSS There are many tasks that can be performed , It also covers pretreatment and post-processing in the traditional sense , Therefore, it cannot be simply classified as CSS Pretreatment or post-treatment tools .

PostCSS Generally, it inherits from the existing construction tools , such as webpack, After integration , Select the plug-in that meets the functional requirements and configure it . Common plug-ins are :

  • AutoPrefixer

effect : by CSS Add browser specific prefixes to properties in , You can specify the supported browser types and versions as needed , Automatically add the required prefixed property declaration . in addition ,Autoprefixer You can also remove CSS Redundant attribute name prefix in code , Legacy CSS The code may contain prefixed attribute names supported by older browsers manually added by developers ,Autoprefixer These redundant prefixes are removed by default .

Autoprefixer Use Can I Use Browser data provided on , Keep the rules up to date , Sure Click here to see Autoprefixer How it works .

  • CSSnext

CSSnext Allow developers to use future CSS grammar ,W3C There are many new ones CSS The rules , These rules are not currently implemented by browsers , But it can enable developers to write more complex CSS,CSSnext That's what we do .

CSSnext github

  • PreCSS

PreCSS Developers can be allowed to use things like Sass The markup language of

$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 code 

summary

Yes Web The high requirements of the project prompted CSS The emergence of pre-processing and post processor , Tradition CSS Part of the complex problem comes from CSS Its own inflexibility , Part of it comes from the compatibility problems caused by different implementations of browsers .CSS The appearance of preprocessor is CSS Compiling 、 Management and maintenance provide new ideas ,Sass, Scss, Stylus The preprocessor can be programmed css style ,PostCSS Through a powerful plug-in system CSS Make different transformations and processes , So as to hand over the cumbersome work to the program . This paper deals with CSS Preprocessor and PostCSS To introduce , I hope it can help you to CSS Have a more comprehensive understanding .

Reference link

amplifying css And preprocessor ( as well as less、sass、stylus The difference between )

CSS The preprocessor -MDN

Simple books - Use postCSS Conduct CSS Handle

CSS Precompile and PostCSS as well as Webpack structure CSS Comprehensive plan

Please bring the original link to reprint ,thank
Similar articles

2021-09-15