1. Install Ruby;
2. Install sass;
3. Create a project. Blue indicates the created files and folders;
2. To use the bourbom and neat in the project, you can use the gem in the command line to obtain the code and then install it. CD open the 0-plugins file and execute the following command in this path: After the command is executed, the bourbon and neat folders are generated.
gem install bourbonbourbon installgem install neatneat install
3. The file 0-plugin/plugins-dir.scss contains the two plug-ins:
@import ‘bourbon/bourbon‘;@import ‘neat/neat‘
Here we need to explain the path inclusion scheme of this project: The file contains-Dir, and the end is the file path in the folder where it is located; and the app. SCSs contains the path strength of these-Dir files; app. SCSs file content:
@import ‘0-plugins/plugins-dir‘;@import ‘1-base/base-dir‘;@import ‘2-modules/modules-dir‘;@import ‘3-layouts/layouts-dir‘;
4. after figuring out the file path, let's see how to use the sass command to compile the SCSs file into a CSS file. It wasn't just an app that contains all file paths. SCSs file, but what we need is a CSS file. In the CSS path, the command: keystore is automatically generated after the command is executed.
sass --watch app.scss:app.css
Note: Here is a headache for me, that is, you compile SCSs files, not sass files. Both of them are correct file types, but there are strict syntax differences. I usually compile SCSs files, because SCSs files are compatible with CSS syntax, so that you don't have to convert the idea of writing CSS before.
5.index.html:
<!DOCTYPE html>
Use sass command line, including projects of the Bourbon and neat packages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
