前端Sass回顾以及Compass入门小记

http://blog.csdn.net/qq_15096707/article/details/70216852

 

目录

 

• 目录
• 前言
• 下载安装
• SASS语法核心回顾
  • 变量及使用
  • import语法
  • 函数
  • Sass中的media
  • at-root
• Compass的入门使用
  • 常用命令
  • reset模块
    • 使用normalize替换Compass中的reset模块
  • layout模块使用率低
  • CSS3模块
  • Typography模块
    • links模块
    • lists模块
    • text模块
    • Vertical Rhythm模块
  • Helpers模块
  • Utilities模块
    • color模块
    • print模块
    • tables模块
    • general模块
    • Sprites模块
• 扩展知识点
  • 通过configrb设置Compass的编译环境
  • configrb
  • compressed输出模式下保留注释
  • 查看某一浏览器版本的使用率

 

前言

　　Compass is an open-source CSS Authoring Framework. 官网：http://compass-style.org/。

下载安装

• 安装ruby 
  　　针对winodws环境，在rubyinstaller下载.exe文件运行即可。需要注意的是：安装过程中注意勾选将ruby命令添加到环境变量中这一选项。
• 替换gem源 
  　　使用国内gem镜像：ruby-china。 
  请尽可能用比较新的 RubyGems 版本，建议 2.6.x 以上。

$ gem update --system # 这里请FQ一下
$ gem -v
2.6.3

• 1
• 2
• 3

$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org

• 1
• 2
• 3
• 4

　　注：如果遇到 SSL 证书问题，你又无法解决，请直接用 http://gems.ruby-china.org 避免 SSL 的问题。 
- 安装sass

gem install sass

• 1

• 安装compass

gem install compass

• 1

SASS语法核心回顾

　　官网介绍：世界上最成熟、最稳定、最强大的专业级CSS扩展语言！ 
　　注：至于Sass是什么个东西，请自行百度了解咯。它的出现实际上是为了让开发人员更加容易开发维护CSS。

变量及使用

_variables.scss

$headline-ff: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, sans-serif;

• 1
• 2
• 3

// 主标题样式
.headline {
    font-family: $headline-ff;
}

// 页面主题内容样式
.main-sec {
    font-family: $main-sec-ff;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

　　变量操作： 
1. 直接操作变量，即变量表达式； 
2. 通过函数。

import语法

@import "variables"; // control directives

• 1

　　Sass中的import与CSS中的import有所不同。 
　　CSS中原生的@import指令有两大弊端：（不建议使用CSS中的import指令） 
1. 放在代码最前边； 
2. 对性能不利。 
　　使用css原生@import的既定规则： 
1. 当@import后边跟的文件名是以.css结尾的时候； 
2. 当@import后边跟的是http://开头的字符串的时候； 
3. 当@import后边跟的是url()函数的时候； 
4. 当@import后边带有media queries的时候。 
　　上述语法，基于Sass的如下既定规则： 
1. 没有文件后缀名的时候，Sass会添加.scss或者.sass的后缀； 
2. 同一目录下，局部文件和非局部文件不能重名（其中局部文件的文件名以下划线开头，如：_variables.scss和variables.scss不能同时存在同一目录中）。

函数

• 跟代码块无关的函数，多是Sass自己的内置函数，称functions
• 可重用的代码块，称mixin =》1）@include的方式调用；2）@extend的方式调用。 
  　　extend的两个知识点： 
  
  1. extend不可以继承选择器序列，如：

.content .detail{color: black};
.detail-other {
    @extend .content .detail; // 这种写法是错误的！！！
}

• 1
• 2
• 3
• 4

1. 使用%，用来构建只用来继承的选择器，即实际生成css文件中该选择器不会被生成。

Sass中的@media

　　Sass中的@media跟CSS的区别： 
1. Sass中的media query可以内嵌在CSS规则中； 
2. Sass在生成CSS的时候，media query才会被提到样式的最高层级。

@at-root

　　使用@at-root可以将嵌套在选择器下的内容提到样式的最外层出来，避免嵌套选择器。

Compass的入门使用

常用命令

• Sass文件的编译：

compass compile

• 1

• Sass文件的监听、实时编译

compass watch

• 1

• 进入Compass的控制台命令

compass interactive

• 1

• 指定编译环境（默认为development）

compass compile -e production --force

• 1

　　在其控制台中可以调用compass的browsers()将会打印出compass支持设置的浏览器，如想要查看某一支持的浏览器的版本，则调用browser-versions(xxx)，如browser-versions(chrome)查看支持的chrome版本。

reset模块

@import "compass/reset";

• 1

等价于：

@import "compass/reset/utilities";
@include global-reset();
// 或者
// @include global-reset;

• 1
• 2
• 3
• 4

使用normalize替换Compass中的reset模块

　　命令行中执行安装compass-normalize插件：

gem install compass-normalize

• 1

　　在项目中Compass的配置文件config.rb中进行替换：

# Require any additional compass plugins here.
require 'compass-normalize'

• 1
• 2

　　使用normalize替换Compass中的reset：（整体引入normalize）

/*@import "compass/reset";*/
@import "normalize";

• 1
• 2

　　normalize中的核心模块有：base、html5、links、typography、embeds、groups、forms、tables。可以进行单独引入，但是在任何一个模块引入之前都需要先引入一个normalize-version，如：

@import "normalize-version";
@import "normalize/base";

• 1
• 2

@import "normalize-version";
@import "normalize/html5";

• 1
• 2

　　等等。

layout模块（使用率低）

　　layout模块中包含了grid-background、sticky-footer、stretching这3个子模块。

@import "compass/layout";
// @import "compass/grid-background";
// @import "compass/sticky-footer";
// @import "compass/stretching";

• 1
• 2
• 3
• 4

　　其中stretching模块处理样式拉伸，如：

.stretch-full {
　　@include stretch();
　　// @include stretch(5px, 5px, 5px, 5px); // 顺序“上右下左”
　　// @include stretch($offset-top: 3px, $offset-bottom: 4px, $offset-right: 5px, $offset-left: 6px;
}

• 1
• 2
• 3
• 4
• 5

　　编译结果如下：

.stretch-full {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

CSS3模块

　　引入CSS3模块：

@import "compass/css3";

• 1

　　使用，如：

.box {
    //box-shadow: 1px 1px 3px 2px #cfcecf;
    @include box-shadow(1px 1px 3px 2px #cfcecf);
}

• 1
• 2
• 3
• 4

　　编译如下：

.box {
  -moz-box-shadow: 1px 1px 3px 2px #cfcecf;
  -webkit-box-shadow: 1px 1px 3px 2px #cfcecf;
  box-shadow: 1px 1px 3px 2px #cfcecf;
}

• 1
• 2
• 3
• 4
• 5

　　即CSS3模块会自动添加其他浏览器对CSS3的属性支持。 
　　如果我们希望只针对某个或某些浏览器进行设置的话，需要使用到support的模块，如：

@import "compass/css3";
@import "compass/support"; // 实际上这里可以不需要引入support模块，因为css3模块已经引入了support模块

$supported-browsers: chrome; // 声明想要支持的版本
// $browser-minimum-versions: ("ie": "8"); // 设置支持的最小版本，如果不指出的话，默认将支持所有browser-versions返回的版本

• 1
• 2
• 3
• 4
• 5

　　这时，.box选择器的编译结果如下：

.box {
  -webkit-box-shadow: 1px 1px 3px 2px #cfcecf;
  box-shadow: 1px 1px 3px 2px #cfcecf;
}

• 1
• 2
• 3
• 4

Typography模块

　　引入Typography模块：

@import "compass/typography";

• 1

　　也可以对Typography中的子模块进行单独引入：

links模块

@import "compass/typography/links";

• 1

a {
    @include hover-link();
    // @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0); // 分别指定超链接在normal、hover、active、visited、focus状态下的颜色值，除noraml下为必填参数外，其他可选，默认是继承
    // @include unstyled-link(); // 抹平超链接样式，默认同父容器样式一致
}

• 1
• 2
• 3
• 4
• 5

lists模块

@import "compass/typography/lists";

• 1

.list-unstyled {
    @include no-bullets(); // 取消list的list-style
}

• 1
• 2
• 3

.list-unstyled-li {
    @include no-bullet(); // 取消单个li的list-style
}

• 1
• 2
• 3

.list-inline {
    @include inline-list(); // list li的inline形式
}

• 1
• 2
• 3

.list-horizontal {
    @include horizontal-list(); // list的li浮动
    // @include horizontal-list(0, right); // 参数为padding的值、浮动方向
    // @include horizontal-list(false); // 去除padding的设置
}

• 1
• 2
• 3
• 4
• 5

.list-inline-block {
    @include inline-block-list(); // list li的inline-block形式
    // @include inline-block-list(7px); // 设置padding的值
}

• 1
• 2
• 3
• 4

text模块

@import "compass/typography/text";

• 1

.text-force-wrap {
    @include force-wrap(); // 强制文本换行
}

• 1
• 2
• 3

.text-nowrap {
    @include nowrap(); // 不换行
}

• 1
• 2
• 3

.text-ellipsis {
    @include ellipsis(); // 一行超出省略
}

• 1
• 2
• 3

.text-hide {
    @include hide-text(); // 隐藏文字（使用text-indent偏移隐藏）
    // @include squish-text(); // 隐藏文字（设置字体大小为0、去除字体阴影、颜色透明）
}

• 1
• 2
• 3
• 4

.btn {
    @include replace-text("这里是图片路径"); // 使用图片替换文本
}

• 1
• 2
• 3

Vertical Rhythm模块

@import "compass/typography/vertical_rhythm";

• 1

Helpers模块

• 图片引入

.logo {
    // background-image: url('../images/logo.png'); // 直接引入
    background-image: image-url('logo.png');
}

• 1
• 2
• 3
• 4

　　使用image-url函数生成的图片路径，默认为绝对路径，其根据 http_path 和 images_dir 这两个配置项生成，此外，默认生成的图片路径后面包含一个修改图片的时候的时间戳（国外称之为 cache buster，即缓存克星，解决了缓存更新不及时的问题）。修改 http_path 的值可以设置生成的绝对路径。 
　　设置为相对路径的方式是修改配置项：

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

• 1
• 2

　　类似的还有：stylesheet-url和font-url函数。 
- 图片base64编码

.logo {
    background-image: url('../images/logo.png'); // 直接引入
    background-image: inline-image("logo.png"); // 这里的图片路径是相对于config.rb中设置的images_dir项
}

• 1
• 2
• 3
• 4

• 当前项目compass的环境

@debug compass-env(); // 默认development

• 1

• 操作selector

#{append-selector("p, div, span", ".bar")} {
    color: #fff;
}

• 1
• 2
• 3

　　编译结果：

p.bar, div.bar, span.bar {
  color: #fff;
}

• 1
• 2
• 3
• 4

　　注：在选择器属性或字符串里面，如果想引用Sass变量或者函数需要使用Sass的插值表达式。

Utilities模块

　　引入Utilities模块：

@import "compass/utilities";

• 1

　　也可以对Utilities中的子模块进行单独引入：

color模块

@import "compass/utilities/color";

• 1

print模块

@import "compass/utilities/print";

• 1

tables模块

@import "compass/utilities/tables";

• 1

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
    <table class="goods-price" cellspacing="0">
        <thead>
            <tr class="odd">
                <th>水果品类</th>
                <th>橘子</th>
                <th>苹果</th>
                <th>鸭梨</th>
                <th>香蕉</th>
            </tr>
        </thead>
        <tbody>
            <tr class="even">
                <th>单价</th>
                <td class="numeric">1</td>
                <td class="numeric">2</td>
                <td class="numeric">3</td>
                <td class="numeric">4</td>
            </tr>
            <tr class="odd">
                <th>单价</th>
                <td class="numeric">10</td>
                <td class="numeric">20</td>
                <td class="numeric">30</td>
                <td class="numeric">40</td>
            </tr>
            <tr class="even">
                <th>单价</th>
                <td class="numeric">100</td>
                <td class="numeric">200</td>
                <td class="numeric">300</td>
                <td class="numeric">400</td>
            </tr>
        </tbody>
        <tfoot>
            <tr class="even">
                <th>总额</th>
                <td class="numeric">11</td>
                <td class="numeric">22</td>
                <td class="numeric">33</td>
                <td class="numeric">44</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

@import "compass/utilities/tables";

.goods-price {
    $table-color: #7a98c6;
    @include outer-table-borders(); // 表格边框：border的宽度、border的颜色
    @include inner-table-borders(1px, darken($table-color, 40%));

    @include table-scaffolding();
    @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222);
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

general模块

@import "compass/utilities/general";

• 1

• 清除浮动

.clearfix {
    //@include clearfix(); // overflow方式清除浮动
    //@include pie-clearfix(); // table方式
    @include legacy-pie-clearfix();
}

• 1
• 2
• 3
• 4
• 5

• 浮动

.pull-left {
    @include float(left);
    //@include float-left();
}

• 1
• 2
• 3
• 4

　　注：在IE6中，贴近父容器边界的浮动元素，如果设置了margin边距，则贴近父容器边界的margin值会在IE6浏览器中显示为原来的2倍。为解决这样的兼容问题，可以为浮动元素设置display属性值为inline。W3C规定浮动元素将忽略display属性设置的值，且具有block元素的特点。因此为浮动元素设置display:inline后并不影响某些属性的设置，但却神奇地解决了IE6这奇怪的兼容性问题。 
　　在Compass的float混合宏中，会自动将各个浏览器的使用率同预设的阈值进行比较，使用率低于某个值则忽略对该浏览器的兼容。如需要对IE6进行支持，则 .pull-left 的编译结果将为：

.pull-left {
    float: left;
    display: inline; // 不考虑兼容时，Compass不会添加该属性进去
}

• 1
• 2
• 3
• 4

　　如果我们设置了 browser-support 模块中$browser-minimum-versions的值，则会根据我们设置兼容的最低版本考虑。如：

@import "compass/support"; 
$browser-minimum-versions: ("ie": "6"); // 编译时，不会考虑阈值的比较，而是直接对IE6进行兼容

• 1
• 2

• Hacks（主要是IE低版本的hack）

.need-has-layout {
    @include has-layout();
}

• 1
• 2
• 3

.underscore-hack-display {
    @include underscore-hack(display, block, inline);
}

• 1
• 2
• 3

　　注：表示display属性的值为block，而在IE6下display属性值为inline。编译结果如下：

.underscore-hack-display {
    display: block;
    _display: inline;
}

• 1
• 2
• 3
• 4

　　即在属性前加“_”，只有IE6承认这样的写法，其他浏览器将忽略。 
- Minimum 
　　IE6不支持min-height、min-width这两个属性。hack的方法同样也是在height属性前加入“_”。

.test-min-height {
    @include min-height(10px);
}

• 1
• 2
• 3

　　编译结果如下：

.test-min-height {
  min-height: 10px;
  height: auto;
  _height: 10px;
}

• 1
• 2
• 3
• 4
• 5

• Tag cloud

.tag-cloud-container {
    @include tag-cloud(24px);
}

• 1
• 2
• 3

Sprites模块

@import "compass/utilities/sprites";

• 1

• 雪碧图的生成 
  　　这里假设将要合成的图片放置在images/logo目录下。

@import "compass/utilities/sprites";
@import "logo/*.png"; // 导入图片，这里不需要加入 images/ ，Compass会根据config.rb配置的图片路径进行查找

• 1
• 2

　　通过这样调用编译后，Compass会在images目录下生成对应的合图，并且合图的名称以 ”路径的最后一个文件夹名-“开头，这里以 logo- 开头，名称后面所跟的字符串将在图片修改的情况下发生改变，解决缓存情况下图片没有即时更新的问题。 
- 使用生成的雪碧图

@import "compass/utilities/sprites";
@import "logo/*.png";
@include all-logo-sprites(); // all-目录名-sprites

• 1
• 2
• 3

　　Compass根据目录名和图片名为每张图片生成了对应的类选择器，同时计算好了对应图片的位置。 
　　如编译结果如下：

/* line 104, logo/*.png */
.logo-sprite, .logo-icon-1, .logo-icon-2, .logo-icon-3 {
  background-image: url('/images/logo-s1c67da8373.png');
  background-repeat: no-repeat;
}

.logo-icon-1 {
  background-position: 0 0;
}

.logo-icon-2 {
  background-position: 0 -35px;
}

.logo-icon-3 {
  background-position: 0 -78px;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

　　这里 all-logo-sprites 混合宏是从哪里来的呢？ 
　　@import "logo/*.png"; —— import 的一系列图片，这种做法在Compass中被称为 magic import。Compass会根据这句import帮我们生成一个Sass样式文件，这个文件默认不写在硬盘上。同时这个Sass文件会被当作一个普通的Sass文件在我们import的位置被import进来。 
　　查看这个Sass文件的方法是运行如下命令：

compass sprite "logo/*.png"

• 1

　　我们将在sass目录下看到一个sprites目录，在这个目录中有一个 _logo.scss 文件，该文件中包含了一个 名为 all-logo-sprites 的混合宏。

@import "compass/utilities/sprites";
$logo-sprite-dimensions : true; // 根据图片本身的大小设置背景图片的大小
@import "logo/*.png";
@include all-logo-sprites();

.main-logo { // 想要使用其他类名
  @include logo-sprite('icon-1'); // 传入图片名
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 设置 hover 、active 状态下的背景图片 
  　　为需要这样设置的图片，将hover或active状态下的图片名分别设置为 xxx_hover.png、xxx_active.png，其中 xxx表示正常状态下的图片名。 
  　　这样设置后，Compass编译后将会自动添加hover或active状态下的背景图片属性。如下（为icon-1.png图片进行了设置）：

/* line 120, logo/*.png */
.logo-sprite, .logo-icon-1, .logo-icon-2, .logo-icon-3 {
  background-image: url('/images/logo-s8a57d6adc2.png');
  background-repeat: no-repeat;
}

.logo-icon-1 {
  background-position: 0 0;
  height: 35px;
  width: 31px;
}

.logo-icon-1:hover, .logo-icon-1.icon-1-hover {
  background-position: 0 -70px;
}

.logo-icon-1:active, .logo-icon-1.icon-1-active {
  background-position: 0 -35px;
}

.logo-icon-2 {
  background-position: 0 -105px;
  height: 43px;
  width: 46px;
}

.logo-icon-3 {
  background-position: 0 -148px;
  height: 54px;
  width: 48px;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

　　这样如上的命名规则之下，又不想生成hover和active对应的属性，则设置：

$disable-magic-sprite-selectors : true;

• 1

• 雪碧图的布局方式

//$logo-layout: vertical; // 垂直布局（默认）
//$logo-layout: horizontal; // 水平布局
//$logo-layout: diagonal; // 斜对角线布局
$logo-layout: smart; // 节省最大空间的布局

• 1
• 2
• 3
• 4

扩展知识点

• 浏览器的默认字体大小为16px，可读文本的一般规则是将行高设置为字体大小的1.4到1.5倍。

通过config.rb设置Compass的编译环境

# set the Compass compile environment
environment = :production // :development // 默认development

• 1
• 2

config.rb

　　Sass在@import过程中，并未对重复引入同一文件的操作进行处理，即在编译CSS后CSS中会出现重复引入的CSS样式。 
　　在Compass项目目录中config.rb文件，通过：

require 'compass/import-once/activate'

• 1

　　解决这种重复引入的问题。 
　　如果需要强制重复引入，则需要再次引入时在文件名后加“!”，如：

@import "compass/reset!";

• 1

compressed输出模式下保留注释

　　默认在compressed输出模式下将不会保留文件中的任何注释，如果想要保留文件中的注释，需要在注释的开头加上“!”，如：

/*!
 * Author: DreamBoy
 */
@import "compass/reset";

• 1
• 2
• 3
• 4

查看某一浏览器版本的使用率

@debug omitted-usage("ie", "6");

• 1

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/qq_15096707/article/details/70216852