Three commonly used CSS preprocessors in front-end development

　　CSS The concept of preprocessor became the front end for the first time web The mainstream of development workflow has changed the way we write CSS The way , It's been a while . If it's pushing CSS The impact on the limits that can be reached is revolutionary , That would be a serious understatement .

　　CSS The preprocessor is a tool , It is used to extend the default common through its own scripting language CSS Basic functions of . It can help us use complex logical syntax , Like variables 、 function 、 blend 、 Code nesting and inheritance, etc , Make ordinary CSS More powerful . By using CSS The preprocessor , You can seamlessly automate daily tasks , Build reusable code snippets , Avoid code duplication and bloat , And write well-organized and easy to read nested code blocks .

　　 In this paper , We'll learn more about the tools currently used by developers around the world 3 The most popular CSS The preprocessor , namely Sass、LESS and Stylus.

　　1. Sass– Grammatically great style sheets

　　Sass yes “Syntactically Awesome Style Sheets” An acronym for . Even though Sass Yes, it is Ruby language-written , But the precompiler LibSass Allow parsing in other languages Sass, And with Ruby decoupling .Sass There is a large active community and a wide range of online learning resources , For beginners . Because of its maturity 、 Stability and strong logical ability ,Sass Already in CSS The preprocessor field is ahead of its competitors .

　　 so to speak , The most popular front-end framework boot is using Sass Compiling . In version 3 Before ,Bootstrap There are fewer languages to write , but Bootstrap4 Adopted Sass, Increased its popularity . 

　　2. LESS– More streamlined style sheets

　　LESS yes “Leaner Stylesheets” An acronym for .LESS Yes, it is JavaScript Compiling , in fact ,LESS It's a JavaScript library , It's through mixing 、 Variable 、 Nesting and rule setting loops extend the native normal CSS The function of .LESS One of the few drawbacks of is that it does not support functions . And Sass Different ,LESS Use @ To declare variables , This may lead to a conflict with @media and @keyframes confusion . However , Compared with other preprocessors ,LESS A key advantage of is that it's easy to add to the project . You can use the NPM Or merge LESS.js File to achieve this .

　　LESS Grammar and SCSS Very similar , Just when declaring variables ,LESS Use @ instead of $sign.

　　 In version 4 Before release , The popular Bootstrap Frame is to use LESS Compiling . and , Another call SEMANTIC UI The popular framework is also used LESS Compiling .

　　3. Stylus

　　Stylus from Node.JS To write , And JS The stack matches perfectly .Stylus suffer greatly Sass Logical ability and LESS The impact of simplicity . And Sass or LESS Version comparison ,Stylus One advantage of is that it has extremely powerful built-in functions , And can handle heavy calculations .

　　Stylus It provides great flexibility in writing grammar , Native support CSS, And the parentheses are allowed to be omitted 、 Colons and semicolons . in addition , Please note that ,Stylus Don't use @ or $ Symbols to define variables . contrary ,Stylus Use assignment operators to indicate variable declarations .

　　 Every CSS Each preprocessor performs a given task in its own unique way , Enable developers to use extremely powerful tools to write clean code at an extremely fast speed . although Sass Have the largest user base and active community , but LESS Easiest to compile and integrate . On the other hand ,Stylus Still Node.JS Popular choice for developers , Because it combines Sass Extensive logical ability and LESS The simplicity of . Last ,CSS The choice of preprocessor depends largely on the preferences of developers and project requirements .

In this paper, the source ：www.gec-edu.org