使用sass创建工程

1.创建工程

1-1.使用sass创建

新建一个文件夹然后在里面直接书写sass文件即可(通常很少直接手动创建)

1-2.使用compass创建

命令:compass create filename

在指定文件夹下面使用命令行创建,会创建出三个文件(sass stylesheets config.rb)

同时可以带参数进行创建:compass create --bare--sass-dir "sass" --css-dir "css" --images-dir "img" --javascript-dir "js"

即创建指定的文件夹.

如果使用compass create,那么compass会根据配置文件中的参数进行创建文件.

2.使用命令行

2-1.编译sass

命令:sass  <sass file> <css file> 比如:sass test.scss test.css

2-2.监视sass文件

为了提升开发效率,使用sass监视能够实时监听文件是否改动或者更新,如果是,则会自动编译sass文件输出为css,则不用每次手动编译sass文件.

命令:sass --watch <sass file>:<css file> 例如:sass --watch test.scss:test.css

如果想监听文件夹:sass --watch sass文件夹:css输出文件夹  例如:sass --watch sass:stylesheets

2-3.使用compass编译,监听sass

编译命令:compass compile

监听命令:compass watch

开发中你也可以使用compass编译你的sass文件,这是有人想问,这几种方法都可以编译sass,那么应该用哪种呢?答案是在开发中如果用到了compass,那么就使用compass进行编译或者监听,因为项目中不只是只有sass文件需要监听,而且还有其他文件也需要进行实时监听变化,比如html,js等等.如果是平时是平时的练习demo,都可以尝试!

注意:监听命令只会监听发生更改的某个文件并且进行编译,如果想强制编译所有文件,那么可以使用该命令:compass watch --force

3.理解config.rb

在配置文件中可以自定义创建文件夹的名称,同时可以配置环境,自定义输出css的代码风格,配置代码如下:

environment = :developmentoutput_style = (environment ==:development)?:expanded :  :compressed

4.sass注释

//单行注释:不会输出到css的文件中

/**/多行注释:会输出到css的文件中