文档章节

Compass的模块介绍

小致dad
 小致dad
发布于 2016/12/07 15:50
字数 569
阅读 28
收藏 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
粉丝 139
博文 536
码字总数 580320
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

MySQL Replication 梳理详解

MySQL Replication 1 MySQL5.5以前的复制 异步、SQL线程串行化回放 MySQL内建的复制功能是构建大型,高性能应用程序的基础。主服务器将更新写入二进制日志文件,从服务器重新执行一遍来实现的...

PeakFang-BOK
5分钟前
0
0
.NET Core & ConsoleApp & appsettings.json

准备 Visual Studio 2017 .NET Core 2.1 新建控制台应用(.NET Core) 默认的 Program.cs // Program.csusing System;namespace ConsoleApp1{ class Program { static voi......

taadis
15分钟前
0
0
结合lucene谈谈日期的压缩问题

说起日期值的压缩,一般容易想到的办法是将日期转化成long类型,然后再通过变长整形进行压缩,我算了一下按照毫秒来算最多占用5个字节(可以通过“谈谈变长整型”中的表查看),确实节省了部...

FAT_mt
今天
1
0
导出私有函数与私有变量

在Go语言中, package中包含函数与变量通过identifier的首字母是否大写来决定它是否可以被其它package所访问。当一个函数或变量名称为小写字母时,默认是无法被其他package引用的. 有没有办法...

xtof
今天
1
0
new Date() 在Safari下的 Invalid Date问题

问题复现 var timeStr = '2018-11-11 00:00:00';var time = new Date(timeStr);// error: Invalid Date... 在safari浏览器下,time为Invalid Date, 导致后面代码执行错误; 其他浏览器诸...

会写代码的husky
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部