Similarities and differences between SCSS and Sass: http://sass.bootcss.com/docs/scss-for-sass-users/ ;
Without further ado, let’s get straight to the point;
Install Sass and Compass
Sass is developed based on the Ruby language, so you need to install Ruby before installing sass . (Note: Ruby does not need to be installed under mac!)
To install SASS under window , you first need to install Ruby , first download Ruby from the official website and install it. During the installation process, please check Add Ruby executables to your PATH to add it to the system environment variable. As shown below:
After the installation is complete, you need to test whether the installation is successful. Run CMD and enter the following command:
ruby -v // If the installation is successful, it will print ruby 2.2.2p95 ( 2015 - 04 - 13 revision 50295 ) [i386-mingw32]
The above has been installed successfully. However, due to the problem of the domestic network, the gem source is intermittently interrupted, so we need to replace the gem source. (Use Taobao's gem source https://ruby.taobao.org/ ) as follows:
// 1. Delete the original gem source gem sources --remove https: // rubygems.org/ // 2. Add domestic Taobao source gem sources -a https: // ruby.taobao.org/ // 3. Print whether the replacement is successful gem sources - l // 4. After the replacement is successful, print as follows *** CURRENT SOURCES *** https://ruby.taobao.org/
Ruby comes with a system called RubyGems for installing Ruby -based software. We can use this system to easily install Sass and Compass . To install the latest version of Sass and Compass , you need to enter the following command:
// Install as follows (if mac installation encounters permission problems, add sudo gem install sass) gem install sass gem install compass
During each installation, you will see output like this:
Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installed
After the installation is complete, you should confirm that the application has been properly installed on the computer by running the following command:
sass -v Sass 3.x.x (Selective Steve) compass -v Compass 1.x.x (Polaris) Copyright (c) 2008-2015 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
The following sass commonly used update, view version, sass command help and other commands:
// update sass gem update sass // View sass version sass - v // View sass help sass -h
compile sass
There are many ways to compile sass , such as command line compilation mode, sublime plug-in SASS-Build , compilation software koala , front-end automation software codekit , Grunt to create front-end automation workflow grunt-sass , Gulp to create front-end automation workflow gulp-ruby-sass , etc. .
Create a new input.scss file and write the scss statement in it ==> For example, I want to convert it to output.css ==> Execute sass input.scss output.css
command line compilation
// Single file conversion command sass input.scss output.css // Single file monitoring command sass -- watch input.scss:output.css // If you have a directory with many sass files, you can also tell sass to watch the entire directory: sass --watch app/sass: public /stylesheets
Command line compile configuration options;
There are configuration options for compiling sass from the command line , such as css typesetting after compilation, generating debug map , enabling debug information, etc. You can view the details by using the command sass -v . We generally use two kinds of --style``--sourcemap .
// Compile format sass --watch input.scss:output.css -- style compact // Compile and add debug map sass --watch input.scss:output.css --sourcemap // Select the compilation format and add the debug map sass --watch input.scss:output.css --style expanded -- sourcemap // Enable debug information sass --watch input.scss:output.css --debug-info
- --style indicates the typesetting format of the parsed css ;
sass has four built-in compilation formats: nested``expanded``compact``compressed . - --sourcemap means to enable sourcemap debugging. After enabling sourcemap debugging, a file with a suffix of .css.map will be generated .
Four kinds of compilation and typesetting demonstrations:
// uncompiled styles .box { width: 300px; height: 400px; &-title { height: 30px; line-height: 30px; } }
1.nested compilation and typesetting format
/* Command line content */ sass style.scss:style.css --style nested /* Compiled style */ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
2.expanded compilation and typesetting format
/* Command line content */ sass style.scss:style.css --style expanded /* Compiled style */ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
3.compact compilation and typesetting format
/* Command line content */ sass style.scss:style.css --style compact /* Compiled style */ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
4.compressed compilation and typesetting format
/* Command line content */ sass style.scss:style.css --style compressed /* Compiled style */ .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}