Compass用法
一、什么是Compass?
Compass是Sass的工具库,Compass在SASS的基础上,封装了一系列有用的模块去补充Sass的功能,类似Javascript和jQuery
二、安装
之前已经写过文章讲了sass、compass的安装,地址:http://www.cnblogs.com/laayoune/p/4105105.html
三、创建项目
在Ruby的命令行中输入
compass create myproject
会在当前目录下创建一个myproject的目录,myproject也可以是一个路径参数
上面是创建的目录结构,下面是告诉你在html中的引用
config.rb是配置文件
上面的是css、sass、image、js的存放目录
最后是使用sass语法缩进
可以通过修改该文件进行项目配置,也可以在使用用compass create命令时进行配置:
--bare (不包含默认样式表进行安装);
--syntax sass (在默认样式表中使用缩进语法);
--sass-dir "cool" (使用'cool'目录存放Sass文件);
--css-dir "style" (使用'style'目录存放CSS文件);
--images-dir "img" (使用'img'目录存放图片);
--fonts-dir "type" (使用'type'目录存放字体文件);
--javascripts-dir "js" (使用'js'目录存放JavaScript文件)。
如:compass create myproject --sass-dir "cool" --css-dir "style"
四、项目编译
编译命令:compass compile
该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在config.rb配置的css-dir对应的目录中。
默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数。
compass compile --output-style compressed
Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用–force参数
compass compile –force
每次都要进行编译太麻烦,可以自动检测,只要sass文件夹发生变化(修改、增加文件),scss文件就会被自动编译成css文件。
compass watch
一些其他的命令
compass init——为一个已经存在的项目(Rails)添加compass;
compass clean——移除生成的文件和缓存;
compass stats——查看样式表的统计数据;
compass unpack <extension>——解压扩展到你的项目;
compass validate——验证你生成的CSS文件;
compass version——显示版本、许可证,等等;
compass interactive——进入一个用于测试Compass中SassScript的控制台。compass help <具体命令>——获得帮助/具体命令的详细描述
五、Compass模块
Compass采用模块结构,不同模块提供不同的功能
1、reset
@import "compass/reset"; //reset模块,重置浏览器的默认样式
有时不需要进行全局的样式重置,可以单独重置某一块
reset-html5 HTML5样式重置
reset-box-model 移除元素的内外边距和边框
reset-font 重置文字的字号和基线
reset-focus 移除浏览器提供的轮廓线(比如Safari给<input>元素加上的那一圈线)
reset-table 和 reset-table-cell 重置表格的边框和对齐方式
reset-quotation 为<blockquotes>添加仅存在于样式表中的双引号
用法:
@import "compass/reset/utilities";
@include reset-html5;
2、layout
@import "compass/layout";
如:
@include sticky-footer(54px); //页脚54px高,始终位于页面底部
3、CSS3
提供CSS3命令,常用的如圆角等
@import "compass/css3";
使用时:
@include border-radius(5px);
4、typography
该模块提供版式功能
@import "compass/typography";
如:链接颜色
link-colors($normal, $hover, $active, $visited, $focus)
5、utilities
提供某些不属于其他模块的功能,如reset中引入的混合器就包含在utilities中
@import "compass/utilities/";
如:清除浮动
@include clearfix;
六、Helper函数
Compass还提供一系列函数,如:
image-width($image)、cos($number)
有关compass的所有相关模块和函数,可以查看http://compass.aether.ru/,里面有详细的用法讲解和例子
Compass用法的更多相关文章
- Compass用法指南
Compass用法指南 Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护.但是,只有搭配Compass,它才能显出真正的威力. 本文介绍Compass的用法 ...
- sass,compass学习笔记总结
最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才 ...
- Sass使用教程
sass官网: http://sass-lang.com/ http://sass-lang.com/documentation/file.SASS_REFERENCE.html Sass和Scss的 ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less
写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...
- compass框架的sprite雪碧图的用法简要
---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...
- 揭开Sass和Compass的神秘面纱
揭开Sass和Compass的神秘面纱 可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些 ...
- compass和sass很好的两篇文章
Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护.但是,只有搭配Compass,它才能显出真正的威力. 本文介绍Compass的用法.毫不夸张地说,学会了Com ...
- Android pm命令用法
Sam综观有关PackageManager时,无意中发现Android 下提供一个pm命令,通常放在/system/bin/下. 这个命令与Package有关.且很有用.所以研究之. 0. Usage ...
- compass scss blueprint
[转载] 今天在执行compass create my-grid –using blueprint 命令时发现报错 google了一下,说是新版compass已经不包括compass-bluprint ...
随机推荐
- Robot Framework 常用关键字使用方法
1. Select From Listid=sourceConnoracle_source 从下拉框选取值. 2. Select Radio button name value 选择单选框.也可以点 ...
- 函数式编程--响应式编程 ---android应用例子
RxJava implements this operator as create. It is good practice to check the observer’s isUnsubscribe ...
- 51nod 1766 树上的最远点对——线段树
n个点被n-1条边连接成了一颗树,给出a~b和c~d两个区间,表示点的标号请你求出两个区间内各选一点之间的最大距离,即你需要求出max{dis(i,j) |a<=i<=b,c<=j& ...
- Tunnel Warfare(HDU1540+线段树+区间合并)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1540 题目: 题意:总共有n个村庄,有q次操作,每次操作分为摧毁一座村庄,修复一座村庄,和查询与询问的 ...
- python初步学习-pycharm使用
Pycharm简介 PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成. ...
- es6异步操作
异步编程对 JavaScript 语言太重要.JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可. ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发 ...
- 新建一个express工程,node app无反应
1.问题描述 新建一个express工程,node app以后无反应,浏览器输入localhost:3000,显示如下 2.解决方法 在app.js文件中加入如下代码 app.listen(3000, ...
- 概率DP入门学习QAQ
emmmm博客很多都烂尾了...但是没空写..先写一下正在学的东西好了 概率DP这东西每次考到都不会..听题解也是一脸懵逼..所以决定学习一下这个东东..毕竟NOIP考过...比什么平衡树实在多了QA ...
- docker使用小记
查看当前镜像:docker images 运行一个简单的镜像:docker run hello-world 拉取一个远程docker:docker pull centos docker中安装nginx ...
- Linux进程调度与源码分析(二)——进程生命周期与task_struct进程结构体
1.进程生命周期 Linux操作系统属于多任务操作系统,系统中的每个进程能够分时复用CPU时间片,通过有效的进程调度策略实现多任务并行执行.而进程在被CPU调度运行,等待CPU资源分配以及等待外部事件 ...