current position:Home>Three commonly used CSS preprocessors in front-end development

Three commonly used CSS preprocessors in front-end development

2022-01-27 00:57:20 Guangdong embedded Education

  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

copyright notice
author[Guangdong embedded Education],Please bring the original link to reprint, thank you.

Random recommended