sass安装编译

sass是采用Ruby语言编写的CSS预处理语言,诞生于07年。Sass和SCSS其实是一种东西,两者不同:

1、扩展名不同,Sass意“.sass”为扩展名,而SCSS是以“.SCSS”为扩展名
 
Sass安装

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。

sass安装编译

 

 

Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示:

 sass安装编译

Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板,如下图所示:

sass安装编译

当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单,只需要在你的命令终端输入一行命令即可。

   1、通过命令安装 Sass

打开电脑的命令终端,输入下面的命令:

gem install sass

如果上面的方法没有安装成功,可以使用下面的两种方法。

  2、淘宝 RubyGems 镜像安装 Sass

碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。只是我们需要通过 gem sources 命令来配置源,先移除默认的 https://rubygems.org 源,然后添加淘宝的源 https://ruby.taobao.org:

第一步:移动默认的源

gem sources --remove https://rubygems.org/

第二步:指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步:查看指定的源是不是淘宝源

gem sources -l

返回结果如下:

*** CURRENT SOURCES ***
https://ruby.taobao.org

请确保只有 ruby.taobao.org。如果无误之后,执行下面的命令:

gem install sass
SASS语法a
sass convert main.scss main.sass 用main.scss文件生成main.sass文件
compass create 项目名 用compass创建一个项目
compass watch 实时监控项目是否有修改
定义变量:
$color
body{
    color:$color;
}
常见变量可以抽离到一个单独的文件中,起名带_variables,表明是个局部文件,不生成对应的css文件
引入其他的文件
@import "variables"; 
多个@import引入文件可以合并,中间用","分隔:
@import "variables",""compass/reset"";
1、当没有文件名的时候sass会尝试为这个文件添加.scss或者.sass
2、局部文件和非局部文件不能重名
 
这并不是CSS中原生的import,原生import有两大弊端
1、必须放在代码的最前面
2、解析渲染过程浏览器读到这个引入文件才会去下载,浏览器会阻塞。
 
sass重新定义了import指令,称为sass的control directives
sass将引入文件合并并输出到css文件,import指令可以在任何地方引用
 
sass引用原生import指令:
1、当@import后边跟的文件名以.css为结尾的时候;
2、当@import后边跟的是http://开头的字符串的时候;
3、 当@import后边跟的是一个url()函数的时候
4、当@import后边带有media queries的时候;
 
 
sass中的注释:
sass支持多行注释和单行注释,单行注释不会被输入到CSS文件中,多行注释会输出。
 
                                                                               compass
 

Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

二、安装

Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby。

假定你的机器(Linux或OS X)已经安装好Ruby,那么在命令行模式下键入:

gem install compass

如果你用的是Windows系统,那么要省略前面的sudo。

正常情况下,Compass(连同Sass)就安装好了。

 

三、项目初始化

接下来,要创建一个你的Compass项目,假定它的名字叫做myproject,那么在命令行键入:

compass create myproject

当前目录中就会生成一个myproject子目录。

进入该目录:

cd myproject

你会看到,里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。

四、编译

在写代码之前,我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件,只有编译成css文件,才能用在网站上。

Compass的编译命令是

compass compile

该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。

默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数。

compass compile --output-style compressed

Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数。

compass compile --force

除了使用命令行参数,还可以在配置文件config.rb中指定编译模式。

output_style = :expanded

:expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed。进入生产阶段后,就要改为:compressed模式。

output_style = :compressed

也可以通过指定environment的值(:production或者:development),智能判断编译模式。

  environment = :development

  output_style = (environment == :production) ? :compressed : :expanded

在命令行模式下,除了一次性编译命令,compass还有自动编译命令

compass watch

运行该命令后,只要scss文件发生变化,就会被自动编译成css文件。

更多的compass命令行用法,请参考官方文档。

 
compass/import-once/activate 多次引入同一个文件也只会插入一次
@import "reset!"告诉compass需要重复引入