sass+compass笔记系列1--compass配置简介

2016-10-15 08:43:52来源:CSDN作者:u013389528人点击

第七城市

前言

发现scss搭配compass去使用的人不是非常多,很多只用scss,这次主要想记录一下compass。它是利用sass开发出来的一套工具,有7大sass模块和其他的一些插件,和内置功能,可到compass中文网先睹为快。我也会记录某些模块的作用。


compass的安装

安装之前先在这里安装ruby,慢慢等待一下,因为安装ruby这网站使用的jq是谷歌的地址,安装的时候:

ruby的安装

强烈建议勾选第二和第三项目。
安装compass:

//win:gem install compass//mac:sudo gem install compass// 查看安装情况compass help

由于淘宝源的rubygem镜像似乎不再更新维护,安装方法可以查看我另一篇博文


compass的项目创建

打开命令行工具CMD,用cd命令进入到你的项目目录,然后输入

    compass create youProjectName

youProjectName(名字随便起),运行后看到
compass新建的目录

可以看到有
1. config.rb文件
2. sass文件夹–放置scss文件
3. stylesheets文件夹–放置css文件

在英文描述中说到有两种方法可以编译sass文件

 1. compass compile [path/to/project] 2. compass watch [path/to/project]

[]是可选参数,第一个是单次编译,第二个是自动编译,一般都用第二种
用法就是打开命令行工具,用cd命令进入到你的项目目录中,输入:

compass watch

运行监听
若想停止监听,按Ctrl+C即可。


compass的配置

在config.rb中,可以修改compass项目的配置。
compass.rb

require 'compass/import-once/activate'

这个require的意思是,当你@import 引入多次重复文件的时候,它只会引入一次, _dir是文件夹名的意思。


compass的命令

compass中的使用命令:

命令 作用
compass create 创建一个新的compass项目
compass init 为一个已经存在的项目(Rails)添加compass;
compass clean 移除生成的文件和缓存
compass stats 查看样式表的统计数据
compass clean 移除生成的文件和缓存
compass validate 验证你生成的CSS文件
compass version 显示版本、许可证,等等
compass compile 生成你的样式表
compass watch 自动编译sass文件

小结

  • 下一篇会记录compass的各种模块。
  • 大家若想知道命令行的常用命令可以移步到我另一篇博文中
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台