sass novice tutorial_html/css_WEB-ITnose

1. Install sass

You need to install ruby ​​before installing sass. When downloading ruby, you should pay attention to whether your computer is 32-bit or 64-bit. After downloading, install it normally, but pay attention: you must check For this item in the picture below, add environment variables (friends who have installed JDK should know about environment variables)

Next step, next step. . . After the installation is complete, click on the start menu:

Enter the command: gem install sass. I guess you will see a reminder that the installation failed:

Because the default sass download address https://rubygems.org/ is blocked, it cannot be connected to the installation. You can ping it. See:

But I "climbed" the "wall" and found that I still couldn't install it successfully, so I had to give up and change the download address, Taobao's: https://ruby.taobao .org/ . Ping is normal:

The next thing to do is to add the address of domestic Taobao and delete the address that is blocked by default. Enter the command: gem sources -a https://ruby .taobao.org/Add Taobao address:

The prompt message "added to sources" indicates that the addition is successful. You can run the command: gem sources to view the existing download address:

There are currently two, one is the default, and the other is the newly added Taobao one. You must delete the default one before you can install it. Run the command to delete the default one: gem sources -r https://rubygems.org / Prompt removed from sources means the deletion was successful.

Make sure there is only one Taobao address to successfully install sass:

Okay, now you can safely run gem install sass to install it. :

Perfect!

2. Compile the scss file into a css file

Create a new .scss file first, code: (Although the sass code is awkward to write, I believe you can still understand the meaning of the code )

.box {  background: #eee;  border: 2px solid #ccc;  .heading {    font-size: 14px;  }}.box2 {  @extend .box;  padding: 10px;}

I save it here as a test.scss file, then use the command line to enter the directory where the file is saved (mine is in the ts folder of the E drive), and then run the translation Command: sass test.scss test.css Compile the test.scss file into a test.css file (the css file name can be renamed):

Then return to the folder where the file is located , you will find that there are some more files, including the test.css file we want:

Open the test.css file and we will see the compiled css code. Compare The source code of the scss file before compilation can show the power of sass:

.box, .box2 {    background: #eee;    border: 1px solid #ccc;}.box .heading, .box2 .heading {    font-size: 2em; }.box2 {    padding: 10px; }/*# sourceMappingURL=test.css.map */

Of course, you can also compile the css file into a scss file, enter the command: sass -convert test.css newtest.scss can compile test.css into newtest.scss file, so I won’t go into details here. Now it’s time to learn sass syntax. I’m also a beginner, let’s make progress together.