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

目录

• ​​目录​​
• ​​前言​​
• ​​下载安装​​
• ​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 # 这里请翻墙一下
$ gem -v
2.6.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

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

gem install sass

• 安装compass

gem install compass

SASS语法核心回顾

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

变量及使用

_variables.scss

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

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

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

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

import语法

@import "variables"; // control directives

　　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. 使用%，用来构建只用来继承的选择器，即实际生成css文件中该选择器不会被生成。

Sass中的@media

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

@at-root

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

Compass的入门使用

常用命令

• Sass文件的编译：

compass compile

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

compass watch

• 进入Compass的控制台命令

compass interactive

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

compass compile -e production --force

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

reset模块

@import "compass/reset";

等价于：

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

使用normalize替换Compass中的reset模块

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

gem install compass-normalize

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

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

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

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

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

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

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

　　等等。

layout模块（使用率低）

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

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

　　其中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;
}

　　编译结果如下：

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

CSS3模块

　　引入CSS3模块：

@import "compass/css3";

　　使用，如：

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

　　编译如下：

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

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

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

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

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

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

Typography模块

　　引入Typography模块：

@import "compass/typography";

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

links模块

@import "compass/typography/links";

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

lists模块

@import "compass/typography/lists";

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

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

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

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

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

text模块

@import "compass/typography/text";

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

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

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

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

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

Vertical Rhythm模块

@import "compass/typography/vertical_rhythm";

Helpers模块

• 图片引入

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

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

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

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

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

• 当前项目compass的环境

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

• 操作selector

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

　　编译结果：

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

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

Utilities模块

　　引入Utilities模块：

@import "compass/utilities";

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

color模块

@import "compass/utilities/color";

print模块

@import "compass/utilities/print";

tables模块

@import "compass/utilities/tables";

示例：

<!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>

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

general模块

@import "compass/utilities/general";

• 清除浮动

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

• 浮动

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

　　注：在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不会添加该属性进去
}

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

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

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

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

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

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

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

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

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

　　编译结果如下：

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

• Tag cloud

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

Sprites模块

@import "compass/utilities/sprites";

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

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

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

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

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

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

compass sprite "logo/*.png"

　　我们将在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'); // 传入图片名
}

• 设置 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;
}

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

$disable-magic-sprite-selectors : true;

• 雪碧图的布局方式

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

扩展知识点

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

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

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

config.rb

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

require 'compass/import-once/activate'

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

@import "compass/reset!";

compressed输出模式下保留注释

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

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

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

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