Recently he is learning sASS, see the gods are in nuggets hair articles to help others, I also try to write in nuggets, because it is my first time to write an article, write bad please forgive!

What is Sass?

Sass is an auxiliary tool to enhance CSS. It provides many advanced functions that native CSS does not have, such as variables, nested rules, mixins, inline imports, etc. It allows us to develop efficiently, make it simple and maintainable.

The installation of Sass

Sass is written in Ruby, so you need to install Ruby before installing Sass. There is no need to install Ruby on the MAC. To install SASS on Windows, you need to install Ruby first. Download Ruby from the official website and install it. Because I am a Mac environment, the following focuses on the Mac environment installation. To install the gem, run the following code

  sudo gem install sass  
Copy the code

Sudo is a tool that allows administrators to authorize regular users to execute some or all of the root commands. That is, it allows administrators to assign reasonable “rights” to regular users and then asks you to enter a password, which is then installed. However, you may encounter another problem with the following error message

ERROR: Error installing sass: ERROR: Failed to build the gem native extension. / System/Library/Frameworks/Ruby framework Versions / 2.0 / usr/bin/Ruby extconf. Rb mkmf.rb can't find the header files for the ruby at/System/Library/Frameworks/ruby framework Versions / 2.0 / usr/lib/ruby/include/ruby. H Gem Files will remain installed in/Library/Ruby/Gems / 2.0.0 / Gems/ffi - 1.9.6 for inspection. The Results logged to / Library/Ruby/Gems / 2.0.0 / Gems/ffi - 1.9.6 / ext/ffi_c/gem_make. OutCopy the code

I ran into this problem, and some of the answers I found were to run the following code

sudo apt-get install ruby-all-dev
Copy the code

Command not found: Apt-get, at this moment, MY inner thought was that it was so difficult to learn Sass, but I should not give up. Then I looked back and found that the main reason for this mistake was the sentence “You have to install development tools first “. Originally I did not install developer tools, the developer tools on the Mac is Xcode, happily rushed to install Xcode, but I was reminded that the system is not the latest, need to update before downloading. After a few more hours of fiddling, the system and Xcode finally worked out. Then run the install command again and you’ll be pleasantly surprised

Building native extensions. This could take a while... Successfully installed ffi - 1.9.23 Fetching: Gem (100%) Successfully installed rb-inotify-0.9.10 Fetching: Gem (100%) Successfully installed sens-listen-4.0.0 Fetching: Gem (100%) Successfully installed Sass-3.5.5 Parsing documentationforFfi - 1.9.23 Installing ri documentationforFfi - 1.9.23 Parsing documentationforRb - way - 0.9.10 Installing ri documentationforRb - way - 0.9.10 Parsing documentationforSass - listen - 4.0.0 Installing ri documentationforSass - listen - 4.0.0 Parsing documentationforSass - 2.6.2 Installing ri documentationforSass - 2.6.2 Done installing documentationfor ffi, rb-inotify, sass-listen, sass after 34 seconds
4 gems installed
Copy the code

We also need to confirm the installation:

 sass -v
Copy the code

If the version information appears, the installation is successful and you can enjoy playing sass.

Sass initial experience

First we create an SCSS file, and then run the following command for automatic real-time compilation:

sass --watch demo.scss:demo.css
Copy the code

So you can practice sass grammar. Please refer to Teacher Ruan Yifeng’s sASS usage guide for specific syntax of SASS. Today I wrote here, and later I will share with you some pits I step on, if there is wrong, please also point out.