使用sass创建工程
2016-12-11 19:53
281 查看
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.css2-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 = :development output_style = (environment ==:development)?:expanded : :compressed
4.sass注释
//单行注释:不会输出到css的文件中/**/多行注释:会输出到css的文件中
相关文章推荐
- Web布局连载——两栏固定布局(五)
- SASS编译
- SASS调试
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的