Install Sass and Compass
sassIt is developed based on the Rubylanguage, so Rubysass needs to be installed before installation . (Note: Ruby does not need to be installed under mac!)
To install SASS under window, you first need to install it. First download RubyRuby from the official website and install it. During the installation process, please pay attention to check Add to system environment variables. As shown below:Add Ruby executables to your PATH
After the installation is complete, you need to test whether the installation is successful, run and CMDenter the following command:
ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]The above has been installed successfully. gemHowever , we need to replace the source because of the intermittent interruption of the source due to the problem of the domestic network gem. (Use Taobao's gem source https://ruby.taobao.org/) as follows:
//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/ //3.打印是否替换成功 gem sources -l //4.更换成功后打印如下 *** CURRENT SOURCES *** https://ruby.taobao.org/RubyComes with a system called RubyGemsa system to install Rubysoftware based on. We can use this system to easily install Sassand Compass. To install the latest version Sassand Compassyou need to enter the following command:
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compassDuring 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 installedAfter 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/compassThe following sass commonly used update, view version, sass command help and other commands:
//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -hcompile sass
sassThere are many ways to compile, such as command line compilation mode, sublime plug-ins 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.
command line compilation;
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheetsCommand line compile configuration options;
Command line compilation sasshas configuration options, such as css typesetting after compilation, generating debug map, enabling debug information, etc. You can sass -vview details by using commands. We generally use two --style``--sourcemap.
//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map sass --watch input.scss:output.css --style expanded --sourcemap //开启debug信息 sass --watch input.scss:output.css --debug-info--stylecssIndicates what typesetting format is after parsing ;
sass has four built-in compilation formats:nested``expanded``compact``compressed.--sourcemapsourcemapIndicates that debugging is enabled .sourcemapAfter debugging is turned on , a.css.mapfile with the suffix name will be generated.
Four kinds of compilation and typesetting demos;
//未编译样式
.box {
width: 300px;
height: 400px; &-title { height: 30px; line-height: 30px; } }nested compilation and typesetting format
/*命令行内容*/
sass style.scss:style.css --style nested /*编译过后样式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }expanded compilation and typesetting format
/*命令行内容*/
sass style.scss:style.css --style expanded /*编译过后样式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }compact compilation and typesetting format
/*命令行内容*/
sass style.scss:style.css --style compact /*编译过后样式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }compressed compiling format
/*命令行内容*/
sass style.scss:style.css --style compressed /*编译过后样式*/ .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}software compilation;
Here we recommend koala & codekit , they are excellent compilers with clear and concise interface and very easy to operate. Given that koala is a free compiler, the simple operation is as follows:
Introduction to LESS/Sass compilation tool Koala
The easy-to-use Sass compilation tool koala supports installation files for multiple environments Download Koala
Koala is a domestic free front-end preprocessor language graphics compilation tool that supports Less, Sass, Compass, CoffeeScript, helping web developers to use them more efficiently for development. Cross-platform operation, perfectly compatible with windows, linux, mac.