Less and sass are two commonly used css preprocessors
: Defines a new specialized programming language, compiles it to form a normal css file, adds some programming features to css, does not need to consider browser compatibility (fully compatible with css3), makes css more concise and more adaptable, Better readability, easier code maintenance and many other benefits. CSS preprocessing languages include SCSS (SASS) and LESS, POSTCSS
Scss can be understood as an upgraded version of sass, adding some functions
Install SaSS on the vue project
1, install sass-loader, node-sass
cnpm install sass-loader node-sass --save
Note: After installation, if an error is reported during operation, it may be because the sass-loader version is too high, you can install the specified version cnpm install [email protected] --save
2, Add the attribute lang="sass" to the style tag of the component
Then you can write sass syntax in the style tag
For specific usage of sass, please refer to: Sass tutorial Sass Chinese document | Sass Chinese website
Install LESS on the vue project
1. Install less and less-loader.
命令: npm install less less-loader --save-dev
2. Add the lang="less" attribute to the style tag in the code to use it, or import the .less file through @import
For specific usage of less, please refer to:
Less Quick Start | Less.js Chinese Documentation - Less Chinese Website
The css precompiler can be selected when the vue project is created, and the scss/less syntax can be used directly after the project is created
Note: less and scss syntax are 100% compatible with css syntax
Q: What are the advantages of less/scss over CSS?
Answer: Less is a CSS preprocessing language. It extends the CSS language and adds features such as variables, Mixins, and functions, making CSS easier to maintain and expand. Less can run on Node or the browser.
Q: What is the difference between sass and less?
Answer: 1, less uses @ to define variables sass uses $ to define variables
2, sass supports loop judgment, less does not support loop judgment
If it is useful, please like it, follow it and add to favorites (｡･ω･｡)ﾉ♡