Compass入门
compass compile
compass compile --output-style compressed
Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数。
compass compile --force
output_style = :expanded
output_style = :compressed
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
compass watch
@import "compass/reset";
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
@include border-corner-radius(top, left, 5px);
@import "compass/css3";
#opacity {
@include opacity(0.5);
}
#opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
}
@include opacity(0);
@include opacity(1);
@import "compass/css3";
#inline-block {
@include inline-block;
}
#inline-block {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
@import "compass/layout";
#stretch-full {
@include stretch;
}
link-colors($normal, $hover, $active, $visited, $focus);
@import "compass/typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
import "compass/utilities/";
.clearfix {
@include clearfix;
}
@import "compass/utilities";
table {
@include table-scaffolding;
}
table th {
text-align: center;
font-weight: bold;
}
table td,
table th {
padding: 2px;
}
table td.numeric,
table th.numeric {
text-align: right;
}
@import "compass";
.icon { background-image: inline-image("icon.png");}
.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
Compass入门的更多相关文章
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
- Sass和Compass入门
一.前言 1.Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者 ...
- Lucene、Compass学习以及与SSH的整合
一.准备 个人在学习中采用Struts2 + Hibernate3.2 + Spring2.5 + Compass2.2.0, 一下图片为本次学习中用到的jar包: 图中圈出的jar包为本次学习的主要 ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less
写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...
- Compass 更智能的搜索引擎(1)--入门
学完了前面的Lucene系列教程: 全文检索 Lucene(1)–入门 全文检索 Lucene(2)–进阶 全文检索 Lucene(3)–分页 全文检索 Lucene(4)–高亮 Lucene确实是个 ...
- html5快速入门(一)—— html简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- MATLAB入门教程
MATLAB入门教程 1.MATLAB的基本知识 1-1.基本运算与函数 在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可.例如: ...
- sass、less和stylus的安装使用和入门实践
刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...
随机推荐
- Scrapy 分布式数据采集方案
运行环境 CentOS7. + Python2. + Scrapy1. + MongoDB3. + BeautifulSoup4. 编程工具 PyCharm + Robomongo + Xshell ...
- centos7下使用yum安装mysql数据库
CentOS7的yum源中默认是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载并安装MySQL官方的 Yum Repository wget -i -c http: ...
- C#中将一个引用赋值null的作用
有类A,以及A类型的变量a和b.初始化a之后,将a赋给b.之后将a赋为null.之后b还是可以使用. 思维误区:本来以为a=null之后,b也应该等于null. 实际测试效果如下 class Prog ...
- PHP Fatal error: Call to undefined function imagecreatetruecolor()
是因为没有安装gd apt-get install libgd2-xpm-dev* apt-get install php5-gd
- Asp.Net MVC向视图View传值的三种方法
本文将总结Asp.Net MVC向视图View传值的三种常见的方法: ----------------------------------------------------------------- ...
- Java subList的使用
1. 在看<阿里巴巴java编程手册的时候>有如下强制约束 顺便学了一下subList. java.util.List中有一个subList方法,用来返回一个list的一部分的视图. Li ...
- Oracle登录被拒绝; 权限不足或用户名/口令无效
第一步: 打开CMD命令窗,输入如下命令:sqlplus "/as sysdba",回车 第二步: 输入命令:alter user sys identified by Orcl12 ...
- JS返回一个数据的千分位格式
/** * 价钱转换-从右往左每3位数字加一个逗号 * @param price 需要转换的价格 */ formatPrice(price){ var newPrice = price.split(' ...
- I/O复用服务器端+回声客户端
并发服务器的第二种实现方法:I/O复用 服务器端: #include <arpa/inet.h> #include <unistd.h> #include <algori ...
- bzoj2929
题解: 网络流裸题 代码: #include<cstdio> #include<cstring> #include<algorithm> #include<c ...