文档章节

Compass的模块介绍

小致dad
 小致dad
发布于 2016/12/07 15:50
字数 569
阅读 26
收藏 0
点赞 0
评论 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
粉丝 116
博文 514
码字总数 560933
作品 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
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
60
0
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang
2016/11/17
9
0
「续集」Sass简易指南:多风格编译和运行以及文件注释

1.使用Compass创建工程 一般情况下可以在编辑器中直接创建Sass或者Scss文件。如果项目比较复杂那么我们可以使用Compass创建工程,命令如下: compass create 这样创建出的项目会自带几个文件夹...

GeCoder
04/24
0
0
Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

grunt.initConfig方法 用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义...

菜鸟的进阶
2017/10/25
0
0
什么是3DOF,6DOF,9DOF,10DOF,11DOF

DOF(degree of free) 自由度 "Degrees Of Freedom" or "DOF" is a number of axis and sensors combined for balancing a plane, a helicopter or a robot. 3DOF : 可以是3轴的加速度计或者......

KyJason
2016/06/21
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部