1 Introduction
Preprocessing Preprocessing CSS frame, by definition, previously treated CSS. That stylus pre-ye deal with it? CSS stylus to add programmable features, that is, you can use variables, functions, judge, a series of CSS cycle is not something stylus to write in the style file, after executing this operation a show, this file can be compiled into CSS file.
2. Install Stylus
First, install stylus, win + r to open cmd (already installed prior to ensure nodejs, input node -v under cmd, Enter tips node version number), - g represents the global installed.
npm install stylus -g
3. Obtain related command-line support
stylus -h
4. How will stylus compiled into css file
stylus stylus.styl -o style.css
Create a new file in the project stu css directory folder used to store css file, and then create a new folder used to store the stylus stylus files.
In the stylus folder New test1.styl file, which added (stylus grammar code from the official website)
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius 5px
Cmd mode under stu cd to the project directory, compile the following code compiles successfully displayed compiled css \ test1.css, generate test1.css in css
E:\stu>stylus stylus\test1.styl -o css\test1.css
compiled css\test1.css
If you modify the file every time I have to re-enter at the command line, it would mean a lot of trouble.
The following is a listening mode .styl file
5. How to monitor .styl there are changes automatically compile files
stylus stylus.styl -o style.css -w
In this command more than just the -w among the fields, he means that real-time monitoring, .styl save each file once compiled once.
Cmd mode under the same stu cd to the project directory, compile the following code compiles successfully displayed compiled css \ test1.css, generate test1.css in css
E:\stu>stylus stylus\test1.styl -o css\test1.css -w
watching C:/Users/AppData/Roaming/npm/node_modules/stylus/lib/functions/index.styl
compiled css\test1.css
watching stylus\test1.styl
compiled css\test1.css
compiled css\test1.css
6. Finally happy to learn grammar stylus bar
stylus official website: https://stylus-lang.com/
Zhangxin Xu Chinese translation of the document: https://www.zhangxinxu.com/jq/stylus/
Reference documents: https://blog.csdn.net/qq_42876835/article/details/102839176?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task