安装使用sass、compass,小白指南

前言:因为自己也是刚入门的小白,所以次教程是从小白摸索的角度来帮组小白了解小白级别会遇到的问题。

一、Sass、Compass是什么?

Sass:css的预编译处理语言,css本身不支持变量,而Sass可以让css支持变量。比如web主色调是#ff0000,那么很多地方需要用到这个色值。用常规的css编写,就要在用到的地方定义一个css属性设置成主色调,这大大的增加了代码量和繁琐程度,并且遇到主色调更改的时候,你还需要每一处去修改,想想都麻烦。Sass的出现解决了这一个难题,只需要定义一个变量$red:#ff0000,然后需要用到的地方只需引用这个变量。修改的时候也只需要修改这个变量,其他地方无需修改。Sass的文件后缀有两种:.sass、.scss,.sass后缀因为语法比较谨慎,以被.scss后缀代替。.scss语法和css基本没有差异。

Compass:Compass是Sass的框架,Compass在Sass的基础上,封装了一系列有用的模块去补充Sass的功能,Compass和Sass的关系可以理解为 JavaScript和jQuery的关系。

二、安装Sass、Compass

1.安装ruby—ruby下载,mac系统默认已安装的,主要是windows系统。

2.安装好打开ruby命令行工具,安装Sass,输入:

gem install sass

等待提示完成后可输入:

sass -v

查看Sass版本信息,看是否安装成功。

Sass其他相关的命令行:

升级Sass↓

gem update sass

Beat版本安装↓

gem install sass --pre

从Git库中安装↓

git clone git://github.com/nex3/sass.git $ cd sass $ rake install

3.安装Compass,命令行输入

gem install compass

等待提示完成后可输入:

compass -v

查看Compass版本信息,看是否安装成功。

三、创建一个SASS项目

1.首先进入本地目录,假设在D:\test文件夹下,ruby命令工具下输入:

cd test

2.在test文件夹下创建一个“testSass”的项目

mkdir testSass

此时在test文件夹下有一个”testSass”项目文件夹。

3.为了让项目规化的更完美一些,我把.scss的SASS文件都放在sass目录中,而需要转译出来的.css文件都将放在css目录中。因此,我们还需要在testSas项目中创建sass和css两个文件夹:

cd testSass
mkdir sass
mkdir css

4.在sass文件夹下创建一个style.scss文件,加入代码:

$main-color: #ce4dd6;
$style: solid;
   .navbar {
        border-bottom: {
            color: $main-color;style: $style;
    }
}
a {
    color: $main-color; 
        &:hover {
            border-bottom: 1px $style;
    }
}

保持后就需要编译了。

四、编译SASS项目

1.单个文件编译

在“testSass”项目路径下

sass sass/style.scss css/style.css

就是把“testSass”项目下的sass/style.scss转译出来的style.css放入了css目录之下,这么编译只是对单个scss文件进行处理,且每次修改都需要重复此步骤。

2.单个文件修改后自动编译

sass --watch sass/style.scss

这样一来,你可以看到提示:

>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css

sass/style.scss转译到sass/style.css下,并没有转到css目录中,这是他不足的一处,转译出来的在不在css目录下。

3.整个文件夹自动编译

这样不但提高了效率,同时也可以弥补单个文件不能设置css存放指定路径的不足。

sass --watch sass/:css/

监控sass文件夹下的所有scss,有修改后自动编译css文件到css文件夹下。(包括在sass文件夹下创建新的文件夹,也会同步到css文件夹下。)

五、编译Compass创建的Sass项目

compass是sass必不可少的框架。配合sass使用才能真正的提高效率。

创建项目和sass类似,只是命令不一样,进入到要存放项目的目录下。

compass create myCompass

这是会在你的目录下出现“myCompass”这个项目文件夹。

其中config.rb文件非常重要,他可以设置sass、css等存放的路径。

compass框架不作详细介绍,主要是怎么使用compass。创建好了之后就需要实现编译。

只需要在“myCompass”这个项目根目录下输入

compass watch

就能自动编译。

路径是根据config.rb文件进行设置的。

六、Sass编译方式

我们一般常用的有–style,–sourcemap,–debug-info等。

sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

–style表示解析后的css是什么格式,有四种取值分别为:nested,expanded,compact,compressed

–sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。

–debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

七、推荐一款图形界面自动编译工具——koala

koala 是一款桌面程序,支持 less 、 sass 、 coffeescript 即时编译,帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。
项目地址: http://koala-app.com/index-zh.html

八、Sass编译时,中文注释报错的解决方法

因为Sass默认不支持‘utf-8’编码的中文字符,所需造成中文注释报错的问题。

1.官方Sass解决方法

找到ruby的安装目录,里面也有sass模块,如这个路径:C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass

在这个文件里面engine.rb,添加一行代码

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

2.koala可视化编译工具(和官方方法一致)

找到koala安装目录里面sass-3.3.7模块下面的engine.rb文件,例如下面路径:

C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass

在这个文件里面engine.rb,添加一行代码

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

 

分享到:

发表评论

电子邮件地址不会被公开。 必填项已用*标注