sass和compass学习笔记2（compass）
jianqi 2019-06-20
在学习compass之前先看一下compass对compass是如何定义的。
compass是一个开源的CSS自动化处理框架，而之前讲的sass是一种css预处理器，类似于less,stylus等。compass包含了各种用于样式的模块，它与sass关系类似于jquery与js一样，使用compass中封装的模块能够更加方便快速的编写css样式文件。
关于compass的安装之前已经介绍过了，compass目前包含7个模块
Reset：浏览器样式重置
CSS3：提供支持css3的命令支持
Layout：提供页面布局模块
Helpers：提供一系列帮助函数
Typography：提供版式功能
Utilitie：提供不属于其他模块的功能
Browser Support：提供浏览器支持的模块
在使用这些模块的时候，都需要提前引入，引入的格式可以是@import "compass"全部引入，也可以是@import "compass/reset"格式引入具体的模块。下面对这几个模块分别具体介绍一下：
1 Reset模块
Reset 重置浏览器的默认样式
@import "compass/reset";
也可以从网上下载其他的样式重置模块，介绍一下normalize.css模块，git下载地址necolas.github.io/normalize.css或者也可以直接在控制台中安装
$gem install compass-normalize
在config.rb配置文件中头部添加
require 'compass-normalize'
使用时在screen.css引入该模块
@import "normalize";
normalize的核心样式模块主要有base,html5,links,typography,embeds,groups,forms,tables等，在使用时也可以引入单个模块
@import "normalize/base";
Reset模块还包含很多Mixin,，例如reset-table的mixin如下
@mixin reset-table {
border-collapse: collapse;
border-spacing: 0;
}具体其他模块可以查看官网文档
2 layout模块
指定页面整体布局，一般使用率不高
//生成垂直和水平的栅格布局 @import "compass/layout/grid-background"; //相对父类的绝对定位 @import "compass/layout/stretching"; //指定页面的footer一直也底部 @import "compass/layout/sticky-footer";
2.1 stretch-full模块
.stretch-full{
@include stretch();
}编译生成css
.stretch-full{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}同时还能修改stretch内参数
.stretch-full{
@include stretch(5px, 5px, 5px, 5px);
}编译产生css文件
.stretch-full{
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
}2.2 sticky footer
该模块需要特定的html文档结构
//html文档
<body>
<div id="root">
<p>
This is the main content area
</p>
<div id="root_footer"></div>
</div>
<div id="footer">
footer content goes here
</div>
</body>//scss @include sticky-footer(40px);
//css
#root {
clear: both;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -40px;
}
#root #root_footer {
height: 40px;
}
#footer {
clear: both;
position: relative;
height: 40px;
}
同时也可以自定义根和底部的名字
@include stick-footer(30px, "#my-root", "#my-root-footer", "#my-footer");
2.3 grid background
在上面例子的基础上添加栅格背景
#root{
@include grid-background();
}3 CSS3模块&Browser Support 模块
提供一些css3跨浏览器的支持，css3的一些新特定border-radius,text-shadow等，在使用css3时很多时候都要调整bowser_support模块的支持
3.1 box-shadow
一般如果自己写一个盒子边缘阴影效果
box-shadow:1px 1px 3px 2px #eee; -webkit-box-shadow: 1px 1px 3px 2px #eee; -moz-box-shadow: 1px 1px 3px 2px #eee;
为了兼容各个浏览器的版本，需要写CSS3非常令人头疼，可以用css3模块来解决
//引入CSS3模块
@import "compass/css3";
div{
@include box-shadow(1px 1px 3px 2px #eee);
}css文件
div{
-moz-box-shadow: 1px 1px 3px 2px #eee;
-webkit-box-shadow: 1px 1px 3px 2px #eee;
box-shadow: 1px 1px 3px 2px #eee;
}如果不需要-moz模块，这时可以调用browser模块，改变需要的模块
@import "compass/support"; browsers() //compass内置了browsers()函数，用来返回一个浏览器list
//利用sass的debug指令，打一条debug日志 @debug browsers();
支持的浏览器如下：
//设置只支持chrome $supported-browsers:chrome;
//只生成webkit -webkit-box-shadow: 1px 1px 3px 2px #eee; box-shadow: 1px 1px 3px 2px #eee;
同时还可以指定支持浏览器的最小版本号
$browser-minimum-versions:("ie": "8");3.2 opacity透明度设置：
.test-opacity{
@include opacity(0.3);
}.test-opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}3.3 border-radius
//指定圆角半径参数为5px，@include为调用相应的mixin
.rounded{
@include border-radius(5px);
}编译后css
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}4 Typography模块
主要用来修饰一下文本样式，链接样式等
4.1 links
//链接样式
@import "compass/typography/links";
a{
@include hover-link();
}css文件
a {
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}4.2 link-color
//修改不同状态下的超链接颜色
a{
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}//依次参数列表
a {
color: #00c;
}
a:visited {
color: #ccc;
}
a:focus {
color: #cc0;
}
a:hover {
color: #0cc;
}
a:active {
color: #c0c;
}4.3 修改列表布局Lists
@import "compass/typography/lists";
.list-unstyled{
@include no-bullets();
}css文件
.list-unstyled {
list-style: none;
}
.list-unstyled li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
}4.4 实现li 的横向布局
.list-inline{
@include inline-list();
}.list-inline {
list-style-type: none;
}
.list-inline, .list-inline li {
margin: 0;
padding: 0;
display: inline;
}4.5 Text
1. force-wrap
@import "compass/typography/text";
.text-force-wrap{
@include force-wrap();
}
----------
.text-force-wrap {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
}2. nowrap
.text-nowrap{
@include nowrap();
}
----------
.text-nowrap {
white-space: nowrap;
}3. Ellipsis
类似于QQ群查找时，文字超过容器的宽度，后面用省略号，hover的时候显示具体信息框
实现使用Text下的ellipsis
安装ellipsis插件
$ compass install compass/ellipsis
查看工程目录，在stylesheets下多一个xml文件夹和ellipsis.css文件
$use-mozilla-ellipsis-binding: true;
.text-ellipsis{
@include ellipsis();
}//自动兼容低版本的firefox
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('/stylesheets/xml/ellipsis.xml#ellipsis');
}5 Utilities
5.1 css sprites
css sprites图的设置
@import "compass/utilities/sprites";
@import "image/icon/*.png";
.myicon{
width: 20px;
height: 20px;
@include all-icon-sprites;
}5.2 clearfix
清除浮动，是经常要做到事
1. 方法一
@import "compass/utilities/general";
.clearfix{
@include clearfix();
}//*zoom兼容ie6
.clearfix {
overflow: hidden;
*zoom: 1;
}2. 方法二
引入伪类清除浮动
.clearfix{
@include pie-clearfix();
}.clearfix {
*zoom: 1;
}
//display: table不兼容ie6
.clearfix:after {
content: "";
display: table;
clear: both;
}3. 方法三
由于上述display: table 不能很好的兼容ie6,下面引入一种支持ie6的伪类清除浮动
.clearfix{
@include legacy-pie-clearfix();
}.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}5.3 float
兼容消除ie6中margin产生的浮动双倍边距
@import "compass/utilities/general/float"
平时我们通常采用
.pull-left{
float: left;
display: inline;
}引入float mixin
.pull-left{
@include float(left);
}//产生的css代码中没有display: inline;
.pull-left {
float: left;
}上面编译产生的css代码中没有display: inline，这里需要设置一下浏览器的最低版本
$browser-minimum-version:("ie", "6");完
[TOC]
