Sass简介、安装与环境配置

Sass简介

css并非一门真正的“编程”语言，它没有变量，无法嵌套、循环等。为了解决css的不足，开发者们在css中加入编程元素，这就是css预处理器。基本思想是，用一种专门的编程语言作为预处理的“中间语言”，进行网页样式设计，再编译成css文件。

sass是采用Ruby语言编写的一款css预处理语言。sass因其一开始的缩进式语法使用率不高，从sass第三代开始，放弃了缩紧式风格，完全向下兼容普通的css代码，也被称为scss。

sass文件有两种后缀名：“.sass” 和 “.scss”。“.sass”是sass语言文件的扩展名后缀，“.scss”是scss语言文件的扩展后缀名。两者功能特性一样，但书写规则不同。“.sass”文件对代码的排版有非常严格的要求。

 

我们来对比一段同样效果的样式写法：

css写法

/*------ css -------*/
.box{  
  color: blue;  
  font-weight: bold;  
  text-decoration: underline; 
}  
.box .item{  
  color: black; 
} 

scss写法

/*------ scss -------*/
.box{  
    color: blue;  
    font-weight: bold;  
    text-decoration: underline;  
    .item {  
        color:black;  
    }   
}

sass写法

/*------ sass -------*/
.box
    color: blue;  
    font-weight: bold;  
    text-decoration: underline; 
    .item
        color: black;     

所以可见scss更常用，更符合css书写习惯，推荐使用scss。

 

Mac OS 系统下安装 Sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。Mac下自带Ruby，无需再安装。Windows系统需先安装Ruby，可以前往 Windows系统下安装sass 查看步骤。

输入命令：

gem install sass 

如遇权限问题：

ERROR:  While executing gem ... (Gem::FilePermissionError)
You don‘t have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

// mac安装遇到权限问题
sudo gem install sass    

安装成功：

1 gem installed

sass更新、查看版本、帮助命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

 

Sublime text 2 配置 Sass 环境

Sublime Text 2的强大之处在于简洁的界面下面有一套强大的插件。若要在Sublime Text 2下开发Sass，我们需要先安装两个插件。

1、Sass插件，用来语法高亮显示Sass源文件。

2、Sass Build插件，用来编译Sass文件，前提是已经安装好了Ruby环境与sass.gem。

安装sass、sass bulid的前提是已经安装了Package Control，如还未安装，请先移步完成Package Control安装 。 

 

1. command+shift+p 打开命令面板

a) 在命令栏中输入”install”然后回车，继续在命令栏中输入”Sass”然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果

b) 在命令栏中输入”SassBuild"然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果

也可以直接将下载的压缩包，解压后放到Sublime Text 2目录下的data/Packages目录下面来进行安装。

 

2. 创建test.scss

$color: #369;  
body {
    background: darken($color, 10%);
}

按Command+B进行编译，如果安装了sass编译环境，这时候应该在下面的console中显示编译结果。

如编译出现如下问题：

Error: Invalid US-ASCII character "\xE2"

表示.scss文件中出现了中文字体，编码错误，只需要引入utf-8，就可解决：

@charset "UTF-8";

编译成功，文件夹中将多一个test.css文件

SASS的官方网站，提供了一个在线编辑器SassMeister，你可以在那里，试运行各种例子。 

 

3. HTML中只要正常引入 test.css 就行了

scss与css的区别就在于：css是经过scss编译生成的，并不是直接编写的。scss的用法与优势将在下一章说明。

 

 

 

/*此随笔内容根据网上内容整理而成。如有侵权，表示歉意，请告知。*/

 

参考内容：

［1］ SASS用法指南－阮一峰的网络日志

［2］ sass中国 

［3］sass技术中后缀名.sass和.scss的区别与个人推荐