CSS (Sassy Cascading Style Sheets) is a CSS preprocessor that extends CSS and introduces many useful features, such as variables, nested rules, mixins, etc. Using SCSS allows you to write and manage CSS code more efficiently.
First of all, SCSS allows the use of variables to store information such as color, font, size, etc., so that these values can be easily reused throughout the style sheet, and when the style needs to be adjusted, only the value of the variable can be modified instead of modifying them one by one. Everywhere this value is used.
Secondly, SCSS supports nested rules, which means that you can express the hierarchical relationship between HTML elements more clearly without having to repeatedly write the selector of the parent element.
In addition, SCSS provides the Mixin function, allowing the definition of reusable style blocks, which can reduce repeated CSS code and make the style sheet more concise and easier to maintain.
Finally, SCSS also supports the import of other SCSS files, which can modularize the style sheet and split it into multiple files by function or component, which helps to improve the organization and maintainability of the code.
Overall, SCSS makes writing and maintaining CSS more efficient and flexible by introducing these functional and syntactic improvements.
Using SCSS in writing small programs
old project
In the project.config.json file, modify the useCompilerPlugins field under setting to ["typescript"] to enable the tool's built-in typescript compilation plug-in. If you want to enable the less compilation plug-in at the same time, you can modify this field to ["typescript", "less"]. Currently three compilation plug-ins are supported: typescript, less, and sass
New Project
You can select the corresponding language template when creating a mini program project. Currently supported language templates are
- TypeScript
- TypeScript + Less
- TypeScript + Sass