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 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 .
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
author[Guangdong embedded Education],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Spring IOC container loading process
- [thinking] the difference between singleton mode and static method - object-oriented programming
- Hadoop environment setup (MySQL environment configuration)
- 10 minutes, using node JS creates a real-time early warning system for bad weather!
- Git tool
- Force deduction algorithm - 92 Reverse linked list II
- What is the sub problem of dynamic programming?
- C / C + +: static keyword summary
- Idea does not have the artifacts option when configuring Tomcat
- Anaconda can't open it
guess what you like
I don't know how to start this
Matlab simulation of transportation optimization algorithm based on PSO
MySQL slow log optimization
[Vue] as the window is stretched (larger, smaller, wider and higher), the text will not be displayed
Popular Linux distributions for embedded computing
Suzhou computer research
After installing SSL Certificate in Windows + tomcat, the domain name request is not successful. Please answer!!
Implementation time output and greetings of jQuery instance
The 72 year old uncle became popular. Wu Jing and Guo fan made his story into a film, which made countless dreamers blush
How to save computer research
- Springboot implements excel import and export, which is easy to use, and poi can be thrown away
- The final examination subjects of a class are mathematical programming, and the scores are sorted and output from high to low
- Two pronged approach, Tsinghua Professor Pro code JDK and hotspot source code notes, one-time learning to understand
- C + + recursive knapsack problem
- The use of GIT and GitHub and the latest git tutorial are easy to understand -- Video notes of crazy God speaking
- PostgreSQL statement query
- Ignition database test
- Context didn't understand why he got a high salary?, Nginxfair principle
- Bootstrap switch switch control user's guide, springcloud actual combat video
- A list that contains only strings. What other search methods can be used except sequential search
- [matlab path planning] multi ant colony algorithm grid map path planning [including GUI source code 650]
- [matlab path planning] improved genetic algorithm grid map path planning [including source code phase 525]
- Iinternet network path management system
- Appium settings app is not running after 5000ms
- Reactnative foundation - 07 (background image, status bar, statusbar)
- Reactnative foundation - 04 (custom rpx)
- If you want an embedded database (H2, hsql or Derby), please put it on the classpath
- When using stm32g070 Hal library, if you want to write to flash, you must perform an erase. If you don't let it, you can't write continuously.
- Linux checks where the software is installed and what files are installed
- SQL statement fuzzy query and time interval filtering
- 69. Sqrt (x) (c + + problem solving version with vs runnable source program)
- Fresh students are about to graduate. Do you choose Java development or big data?
- Java project: OA management system (java + SSM + bootstrap + MySQL + JSP)
- Titanic passenger survival prediction
- Vectorization of deep learning formula
- Configuration and use of private image warehouse of microservice architect docker
- For someone, delete return 1 and return 0
- How does Java dynamically obtain what type of data is passed? It is used to judge whether the data is the same, dynamic data type
- How does the database cow optimize SQL?
- [data structure] chain structure of binary tree (pre order traversal) (middle order traversal) (post order traversal) (sequence traversal)
- Webpack packaging optimization solution
- 5. Operation element
- Detailed explanation of red and black trees
- redhat7. 9 install database 19C
- Blue Bridge Cup notes: (the given elements are not repeated) complete arrangement (arrangement cannot be repeated, arrangement can be repeated)
- Detailed explanation of springboot default package scanning mechanism and @ componentscan specified scanning path
- How to solve the run-time exception of test times
- Detailed explanation of k8s management tool kubectl
- Android system view memory command