Sass与Compass——回顾
compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能,
安装: compass是用 ruby语言开发的,所以安装它之前必须安装ruby。 命令:
gem install compass 项目初始化: 要创建一个你的Compass 项目,如果项目的名字叫 myproject compass create myproject 会在当前的目录下生成这个目录,里面有config.rb文件,还有两个子目录sass 和 stylesheets 前者存放sass 源文件,后者放编译后的 css文件。
编译: 我在开发的时候写出来的是文件后缀名为scss的文件。只有编译成css文件,才能用到网站上。 compass 的编译命令为 compass compile 该命令在项目根目录下运行,将会sass 子目录中的scss 文件编译成css文件,保存在stylesheets子目录中。 默认编译出来的css 文件带有大量的注释,生产环境需要压缩后的css文件 compass compile --output-style compressed 如果重新编译未修改过的文件 compass compile --force 除了使用命令参数,还可以在配置文件config.rb 中指定编译模式。
output_style = :expanded :expanded 表示编译后保留原格式, 其他值还包括: nested, :compact和compressed 进入生产阶段后,就要改为:compressed模式。 output_style = :compressed 也可以通过指定environment的值(:production或者:development),智能判断编译模式。
environment = :development output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下,除了一次性编译命令,compass还有自动编译命令
compass watch 只要scss文件发生变化,就会被自动编译成css文件。
compass 的模块
compass采用模块结构,不同模块提供不同的功能,内置5个模块。 reset css3 layout typography unilities
reset模块
在编写自己的样式之前,有必要重置浏览器的默认样式。 写法是: @import "compass/reset" 上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码。
CSS3模块 该模块提供24 中css3命令。如: 圆角(border-radius) 的写法, @import "compass/css3"; .rounded { @include border-radius(5px); } 上面的@include命令,表示调用某个mixin(类似于C语言的宏),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);
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/";
.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;
}
Helper函数 除了模块外,compass还提供了一系列函数。 有一些有用的函数,image-width() 和image-height() 返回图片的宽和高 再比如,inline-image()可以将图片转为data协议的数据。
@import "compass";
.icon { background-image: inline-image("icon.png");}
编译后得到 .icon { background-image: url('data:image/png;base64,iBROR...QmCC');} 函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。
- 小论线性变换
- 谈谈基于OAuth 2.0的第三方认证 [下篇]
- Razor Engine,实现代码生成器的又一件利器
- 谈谈基于OAuth 2.0的第三方认证 [上篇]
- 我所理解的RESTful Web API [Web标准篇]
- ASP.NET Web API中的Controller
- iOS 转场动画探究(二)
- Swift 面向对象解析(二)
- 谈谈基于OAuth 2.0的第三方认证 [中篇]
- [ASP.NET Web API]如何Host定义在独立程序集中的Controller
- ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事
- 【黑客解析】黑客是如何实现数据库勒索的 ?
- 直播回看:高可用架构入门 —— 腾讯云架构演变及经验
- 【腾讯云的1001种玩法】十分钟轻松搞定云架构之一 :从上云开始
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法