文档章节

Compass的模块介绍

小致dad
 小致dad
发布于 2016/12/07 15:50
字数 569
阅读 27
收藏 0

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

  * reset
  * css3
  * layout
  * typography
  * utilities

下面,我依次介绍这五个内置模块。它们提供Compass的主要功能,但是除了它们,你还可以自行加载网上的第三方模块,或者自己动手编写模块。

1、reset模块

通常,编写自己的样式之前,有必要重置浏览器的默认样式。

写法是

  @import "compass/reset";

上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码。

2、CSS3模块

目前,该模块提供19种CSS3命令。在这里,我介绍其中的三种:圆角、透明和行内区块。

2.1 圆角

圆角(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);

2.2 透明

透明(opacity)的写法为

  @import "compass/css3";

  #opacity {
    @include opacity(0.5); 
  }

编译后生成

  #opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
    opacity: 0.5;
  }

opacity的参数0.5,表示透明度为50%。

完全透明的写法是

  @include opacity(0);

完全不透明则是

  @include opacity(1);

2.3 行内区块

行内区块(inline-block)的写法为

  @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;
  }

3、layout模块

该模块提供布局功能。

比如,指定页面的footer部分总是出现在浏览器最底端:

  @import "compass/layout";

  #footer {
    @include sticky-footer(54px);
  }

又比如,指定子元素占满父元素的空间:

  @import "compass/layout";

  #stretch-full {
    @include stretch; 
  }

4、typography模块

该模块提供版式功能。

比如,指定链接颜色的mixin为:

  link-colors($normal, $hover, $active, $visited, $focus);

使用时写成:

  @import "compass/typography";

  a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
  }

5、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;
  }

© 著作权归作者所有

共有 人打赏支持
小致dad
粉丝 133
博文 533
码字总数 580132
作品 0
济南
技术主管
Compass用法指南

几个月前,我介绍了Sass的用法。 Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力。 本文介绍Compass的用法。毫不夸张地说,学会了...

阮一峰
2012/11/29
0
0
sass和compass

sass sass是一种css的开发工具,而且是一款基于ruby的开发工具,所以想要使用这个工具必须先安装ruby。sass提供两种后缀格式的文件:.scss和.sass。区别是,scss完全兼容css格式,而sass则必...

小昭归来
2016/10/17
3
0
Compass(更新中。。。)

compass Compass是Sass的工具库,就好像jQuery是js的库一样。 sass有了compass的配合,就会更加事半功倍。 Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补...

鋒o丫头
2017/09/01
0
0
Compass的误解与新发现

最后个人感觉 Compass是 css世界的.NET 很久以前看到 Compass 误以为是css编译器,因为总是在看到如何安装Scss的文章里面看到的 知道最近不小心进入 Compass官网溜达,才发现 The CSS3 modul...

互联网fans
2014/04/12
0
0
初接触 Sass 与Compass 遇到的几个坑

最近开始接触传说中高大上的CSS 预处理器之一Sass 以及Compass ,本文不会对Sass 与Compass 技术层面做过多介绍,只是记录自己折腾过程中遇到的几个坑。 前言 Jeff 本身也是刚接触Sass,因此...

Billydotzhang
2016/11/15
14
0

没有更多内容

加载失败,请刷新页面

加载更多

八月新增开源项目:假装自己是图形界面的 Git 命令行工具

每月新增开源项目。顾名思义,每月更新一期。我们会从社区上个月新收录的开源项目中,挑选出有价值的、有用的、优秀的、或者好玩的开源项目来和大家分享。数量不多,但我们力求推荐的都是精品...

编辑部的故事
昨天
7
0
20180918 find命令与Linux文件扩展名

命令find 用来查找搜索文件。 搜索文件相关命令: which 从环境变量里的目录中去搜索 whereis(不常用) 从一个固定的库中搜索 locate(需要单独安装 yum install -y mlocate) 查询时会从/var/...

野雪球
昨天
1
0
GO 数组相关操作

package mainimport("fmt""math/rand""time")func main() {//数组的几种定义方式var arr1 [3]int = [3]int{1,2,3}var arr2 = [3]int{4,5,6}arr3 := [3]string{"h", "w", ......

汤汤圆圆
昨天
1
0
JAVA 中interrupt、interrupted和isInterrupted的区别

首先,我们说明下三个方法的功能 interrupt() 向当前调用者线程发出中断信号 isinterrupted() 查看当前中断信号是true还是false interrupted() 是静态方法,查看返回当前中断信号并将中断信号...

我爱春天的毛毛雨
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部