sass和compass学习笔记2（compass）

头像
summer7310
    阅读 6 分钟
    2

    在学习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();

    支持的浏览器如下：

    这ddd里写图片描述

    //设置只支持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]

    compass
    summer7310
    536 声望23 粉丝
    « 上一篇
    sass和compass学习笔记1（sass）
    下一篇 »
    实现侧边栏工具（1）使用背景图片方式

    引用和评论

    推荐阅读
    头像
    手写函数防抖节流

    summer7310赞 3阅读 6.2k评论 1

    0 条评论
    得票最新