原文链接1:http://www.ruanyifeng.com/blog/2012/06/sass.html
原文链接2:http://www.ruanyifeng.com/blog/2012/11/compass.html
sass是一种“css预处理器”,而compass是sass的工具包,两者都是ruby实现,所以需要使用的话,先装ruby以及ruby的包管理器gem,然后安装即可。
1.sass的基本语法
编译
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
sass --style compressed test.sass test.css
变量
$blue : #1875e7;
div {
color : $blue;
}
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
计算
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
/*元素嵌套*/
div {
hi {
color:red;
}
}
/*属性也可以嵌套,比如border-color属性,border后面必须加上冒号*/
p {
border: {
color: red;
}
}
继承
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
mixin
类似c语言的宏,不过mixin还能有参数
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
/*还能定义参数,这个非常实用*/
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
引入外部文件
@import "path/filename.scss";
@if...@else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
@for、@while、@each
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定义函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
2.compass的用法
Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:
引用
* reset
* css3
* layout
* typography
* utilities
CSS3模块
目前,该模块提供19种CSS3命令,具体参见官方文档。
/*圆角*/
@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;
}
/*透明*/
@import "compass/css3";
#opacity {
@include opacity(0.5);
}
/*编译后*/
#opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
}
/*行内区块*/
@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;
}
/*更多参考官方文档*/
layout模块
该模块提供布局功能
/*指定页面的footer部分总是出现在浏览器最底端*/
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
/*指定子元素占满父元素的空间*/
@import "compass/layout";
#stretch-full {
@include stretch;
}
/*更多参考官方文档*/
typography模块
该模块提供版式功能
/*指定链接颜色的mixin*/
link-colors($normal, $hover, $active, $visited, $focus);
/*使用*/
@import "compass/typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
utilities模块
/*表格*/
@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;
}
Helper函数
@import "compass";
.icon { background-image: inline-image("icon.png");}
/*编译后*/
.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
分享到:
相关推荐
Sass和Compass 实战
Sass和Compass设计师指南 AZW3文字版本,更清晰,非PDF版 Sass and Compass for Designers
Sass和Compass设计师指南pdf+源码
Sass和 Compass设计师指南是中文扫描完整版
Chapter 1, Getting Started with Sass and Compass, explains, in layman's terms, what Sass and Compass are, how they relate, and how to get them installed and ready to use. Chapter 2, Setting Up a Sass ...
Sass和Compass设计师指南源代码 一分超值!谢谢支持!
Think of Sass and Compass as power tools that allow you to paint with remarkable speed and precision.Sass and Compass in Action is a hands-on guide to stylesheet authoring using these two ...
CSS高效开发实战 CSS 3、LESS、SASS、Bootstrap、Foundation PDF电子书下载 带书签目录 (试读版) 和 sass与compass实战 (全) 推荐看 sass与compass实战 就够了 我传了 2本书
[Packt Publishing] Sass and Compass for Designers (英文版) [Packt Publishing] Sass and Compass for Designers (E-Book) ☆ 出版信息:☆ [作者信息] Ben Frain [出版机构] Packt Publishing [出版日期] ...
作者通过丰富、完整的案例,循序渐进地展示了Sass和Compass的使用方法。既使不懂编程的设计师读完本书也能轻松生成跨浏览器的、易于维护的CSS代码,并学会编写media query代码,进行响应式设计。本书适合交互设计师...
Over 120 practical and easy-to-understand recipes that explain how to use Sass and Compass to write efficient, maintainable, and reusable CSS code for your web development projects
Sass和Compass预处理CSS,Sass(Scss)是世界上最成熟、稳定和强大的专业级CSS扩展语言,Sass(Scss)中文网主要致力于Sass(Scss)在中国的推广,通过Sass(Scss)来改变前端工程师,提高效率
Sass与Compass实战,sass结合compass快速开发。
sass与compass实战
[Manning Publications] Sass & Compass 实战 (英文版) [Manning Publications] Sass and Compass in Action (E-Book) ☆ 出版信息:☆ [作者信息] Wynn Netherland , Nathan Weizenbaum , Chris Eppstein , ...
如何对ExtJS 4的应用进行美化,看看强大的Sass和Compass吧。
CSS REM单位雪碧图合并 文章地址http://tommyhu.cn/sas-compass-rem/