@(less与sass)[less, sass]
[TOC]
Less与sass
Less的概念：
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。复制代码
Less 可以运行在 Node 或浏览器端。
使用方法：
这里直接使用VSCode编辑工具，里面的插件 easy-less，创建一个.less文件，会自动转化为.css文件复制代码
基于Node
语言特性
变量
我们使用@符号来定义变量，然后再在css代码中使用，例如：
@color:red;body { background:@color;}复制代码 有的时候，我们需要使用同一个颜色，数据的次数特别多，所以，定义变量可以让我们们使用的更流畅。这是一种很常用的方式。但是我们不仅仅可以定义一个变量值，还可以用在其他的地方，比如说选择器,，路径等：
选择器：
// 变量@mySelector: banner;// 用法.@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto;}复制代码 URL：
// Variables@images: "../img";// Usagebody { color: #444; background: url("@{images}/white-sand.png");}复制代码 混合
混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式.假设我们有一个样式是这样的
.a, #b { color: red;}复制代码 如果我们想要在其他的地方使用这个样式，那就可以使用混合：
.mixin-class { .a;}.mixin-id { #b();}复制代码 这里无论是使用类（class）名还是使用id名字都是可以的。还有就是，调用混合集的时候，加不加括号都是可以的。
可是，在上面的例子中，.a与#b名字的元素的样式也会发生改变，如果你不想实现这个效果，那么可以在两个混合集后面添加上一个括号。例如：
.a(){ color: red;}复制代码 在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important：
例如：
.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color;}.unimportant { .foo();}.important { .foo() !important;}复制代码 结果为：
.unimportant { background: #f5f5f5; color: #900;}.important { background: #f5f5f5 !important; color: #900 !important;}复制代码 带参数的混合
混合集也可以接收参数，在调用的时候传递参数即可： 例如：
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}复制代码 调用：
#header { .border-radius(4px);}.button { .border-radius(6px);}复制代码 当然，上面的调用是需要传递参数的（所以需要加括号）如果你不想传递参数，可以给混合集一个默认的参数（变量:参数）例如：
.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}复制代码 这样，调用的时候就不需要传递参数，所以也不用加括号：
#header { .border-radius;}复制代码 也许，你可能需要传递多个参数：
.mixin(@color; @padding; @margin: 2) { color: @color; padding: @padding; margin: @margin @margin @margin @margin;}复制代码 参数之间用分号给开就可以了，传递参数的时候不必按照上面的顺序。具有特殊意义的值可以直接传递值，例如：
#box { .mixin(@padding:10px;red;)}复制代码 具有默认值得属性可以不用传递参数
或许有时候你会遇到这样的情况：
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @x @y @blur @color; -moz-box-shadow: @x @y @blur @color; box-shadow: @x @y @blur @color;}复制代码 如果每一次都是这样的写，下面的属性重复太多，所以，这个时候，你可能需要使用到**@arguments**，接着就是这样使用：
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments;}复制代码 还可以作为函数使用混合，从mixin中返回变量
所有定义在一个mixin中的变量都是可见的，还可以用于调用它的作用域中（除非调用它的作用域定义了同名变量）。
示例：
.mixin() { @width: 100%; @height: 200px;}.caller { .mixin(); width: @width; height: @height;}复制代码 输出：
.caller { width: 100%; height: 200px;}复制代码 嵌套规则
如果我们有这样的一段样式：
#header { color:red;}#header a { border: 1px solid lime;}#border a:hover { color: yellow;}复制代码 那么在使用less的时候，我们就可以这么来写：
#header { color:red; a { border: 1px solid lime; &:hover { color:yellow; } }}复制代码 看到上面的 & 符号了么?这个符号代表所有的父选择器（而不只是最近的长辈）。一般的话是用在伪元素以及伪类的时候较多，当然，也可以用来改变选择器的顺序，例如：
.header { .menu { border-radius: 5px; .no-borderradius & { background-image: url('images/button-background.png'); } }}复制代码 输出：
.header .menu { border-radius: 5px;}.no-borderradius .header .menu { background-image: url('images/button-background.png');}复制代码 运算
任何数值，颜色和变量都可以进行运算。
@h:100px;#box { width:100px + 20px; height:@h - 20px;}复制代码 在上面的例子中，我们可以看到，width与height的值就是使用的了运算。这里还要说的一点就是，在运算的几个数中，只有一个有单位即可。
导入样式
在其他的样式中导入less，与css相同，直接使用import '文件名'即可。例如：
@import "library"; // library.less@import "typo.css";复制代码
对于 less而言，其扩展名可有可无
其他
有时候你所写的东西可能被翻译，例如：
color:rgb(222,222,111);width:calc(100% - 100px);复制代码
上面的都会被计算，被less编译，此时如果不想要他们被编译，则使用~，例如：
color:~ 'rgb(222,222,111)';width:~ 'calc(100% - 100px)';复制代码
前面一个~，后面的内容用引号引起来
less中的函数这里不做讲解，因为使用不到，如果想要了解，查看官网
Sass
Sass的概念
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。复制代码
Sass的特色
1. 完全兼容 CSS32. 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能3. 通过函数进行颜色值与属性值的运算4. 提供控制指令 (control directives)等高级功能5. 自定义输出格式复制代码
Sass的语法格式
Sass 有两种语法格式。
首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。 另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。复制代码
我们上课使用.scss的格式
Sass的使用
这里我们依然使用VScode自带的编译工具来进行Sass代码的学习
Sass的语法
嵌套规则
Sass的嵌套规则与Less的嵌套规则相似，允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000;}复制代码 编译为：
#main p { color: #00ff00; width: 97%; }#main p .redbox { background-color: #ff0000; color: #000000;}复制代码 父选择器
与Less一致，我们使用&表示一个元素前面的所有子元素，例如：
#main { color: black; a { font-weight: bold; &:hover { color: red; } }}复制代码 编译为：
#main { color: black; }#main a { font-weight: bold; }#main a:hover { color: red;}复制代码 属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：
.funky { font: { family: fantasy; size: 30em; weight: bold; }}复制代码 编译为：
.funky { font-family: fantasy; font-size: 30em; font-weight: bold; }复制代码 命名空间也可以包含自己的属性值。（意思就是上面的font后面可以设置样式），例如：
.funky { font: 20px/24px { family: fantasy; weight: bold; }}复制代码 编译为：
.funky { font: 20px/24px; font-family: fantasy; font-weight: bold;}复制代码 SassScript
变量$
Sass中也有变量，不过他的变量与Less的变量不同，他的符号是美元符$，其使用方法与Less的使用方法基本一致，不过还是有一些不同点：
- 变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加
!global声明：
#main { $width: 5em !global; width: $width;}#sidebar { width: $width;}复制代码 此时的$width在任何的地方（除了父级）都可以调用。
数据类型
SassScript 支持一下几种主要的数据类型：
- 数字，1, 2, 13, 10px
- 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
- 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型，true, false
- 空值，null
- 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
运算
所有数据类型均支持相等运算== 或 !=，此外，每种数据类型也有其各自支持的运算方式。
数字运算
SassScript支持数字的加减乘除，取整运算（+，-，*，/，%），也支持关系运算（>，<，>=，<=，==，=） 这里需要注意一下除法运算，只有以下三种情况/框被视为除法运算：
1 如果值，或值的一部分，是变量或者函数的返回值2 如果值被圆括号包裹3 如果值是算数表达式的一部分复制代码
例如：
p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2px; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division}复制代码 编译为：
p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px;}复制代码 如果需要使用变量，同时又要确保/ 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
p { $font-size: 12px; $line-height: 30px; font: #{ $font-size}/#{ $line-height};}复制代码 编译为：
p { font: 12px/30px;}复制代码 颜色计算
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
p { color: #010203 + #040506;}复制代码 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
p { color: #050709;}复制代码 意义不大，不做过多说明
字符串运算
+可用于连接字符串
p { cursor: e + -resize;}复制代码 编译为
p { cursor: e-resize;}复制代码 注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
p:before { content: "Foo " + Bar; font-family: sans- + "serif";}复制代码 编译为
p:before { content: "Foo Bar"; font-family: sans-serif;}复制代码 运算表达式与其他值连用时，用空格做连接符：
p { margin: 3px + 4px auto;}复制代码 编译为
p { margin: 7px auto;}复制代码 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：
p:before { content: "I ate #{5 + 10} pies!";}复制代码 编译为
p:before { content: "I ate 15 pies!";}复制代码 空的值被视作插入了空字符串：
$value: null;p:before { content: "I ate #{$value} pies!";}复制代码 编译为
p:before { content: "I ate pies!";}复制代码 圆括号
使用圆括号可以提升运算的顺序
插值语句#{}
通过 #{} 插值语句可以在选择器或属性名中使用变量：
$name: foo;$attr: border;p.#{ $name} { #{ $attr}-color: blue;}复制代码 编译为
p.foo { border-color: blue;}复制代码 #{}插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
p { $font-size: 12px; $line-height: 30px; font: #{ $font-size}/#{ $line-height};}复制代码 编译为
p { font: 12px/30px;}复制代码 变量定义!default
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。 content: "Second content?" !default; $new_content: "First time reference" !default;
#main { content: $content; new-content: $new_content;}复制代码 编译为
#main { content: "First content"; new-content: "First time reference";}复制代码 变量是 null 空值时将视为未被 !default 赋值。
$content: null;$content: "Non-null content" !default;#main { content: $content;}复制代码 编译为
#main { content: "Non-null content";}复制代码 @-Rules与指令
@import
这个与Less几乎无异，都是可以导入scss与sass格式的文件。如果扩展名字是这个，可以省略。但是一下的几种是不会被编译的：
文件拓展名是 .css；文件名以 http:// 开头；文件名是 url()；@import 包含 media queries。复制代码
例如：
@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);复制代码
编译为
@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);复制代码
大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。
假设 example.scss 文件包含以下样式：
.example { color: red;}复制代码 然后导入到 #main 样式内
#main { @import "example";}复制代码 将会被编译为
#main .example { color: red;}复制代码 @media
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果@media嵌套在 CSS 规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。
.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; }}复制代码 编译为
.sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; }}复制代码 @media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and
@media screen { .sidebar { @media (orientation: landscape) { width: 500px; } }}复制代码 编译为
@media screen and (orientation: landscape) { .sidebar { width: 500px; }}复制代码 @media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：
$media: screen;$feature: -webkit-min-device-pixel-ratio;$value: 1.5;@media #{$media} and ($feature: $value) { .sidebar { width: 500px; }}复制代码 编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; }}复制代码 @extend
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：
Oh no! You've been hacked!复制代码
样式如下
.error { border: 1px #f00; background-color: #fdd;}.seriousError { border-width: 3px;}复制代码 麻烦的是，这样做必须时刻记住使用.seriousError时需要参考 .error的样式，带来了很多不变：比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用@extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error { border: 1px #f00; background-color: #fdd;}.seriousError { @extend .error; border-width: 3px;}复制代码 编译后：
.error, .seriousError { border: 1px #f00; background-color: #fdd;}.seriousError { border-width: 3px;}复制代码 上面代码的意思是将 .error 下的所有样式继承给.seriousError，border-width: 3px; 是单独给.seriousError设定特殊样式，这样，使用 .seriousError的地方可以不再使用.error。
@extend的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError）。看看下面的例子：
.error { border: 1px #f00; background-color: #fdd;}.error.intrusion { background-image: url("/image/hacked.png");}.seriousError { @extend .error; border-width: 3px;}复制代码 编译为：
.error, .seriousError { border: 1px #f00; background-color: #fdd;}.error.intrusion, .intrusion.seriousError { background-image: url("/image/hacked.png");}.seriousError { border-width: 3px;}复制代码 当然，还有许多高级的使用方法，比如延伸，多重延伸，继续延伸： 延伸：Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover或者 a.user[href^="http://"]等
.hoverlink { @extend a:hover;}a:hover { text-decoration: underline;}复制代码 与
.hoverlink { @extend a:hover;}.comment a.user:hover { font-weight: bold;}复制代码 都是可以被编译的。 多重延伸，同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：
.error { border: 1px #f00; background-color: #fdd;}.attention { font-size: 3em; background-color: #ff0;}.seriousError { @extend .error; @extend .attention; border-width: 3px;}复制代码 继续延伸：当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个
.error { border: 1px #f00; background-color: #fdd;}.seriousError { @extend .error; border-width: 3px;}.criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%;}复制代码 @extend-Only
有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。
如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。
// This ruleset won't be rendered on its own.#context a%extreme { color: blue; font-weight: bold; font-size: 2em;}复制代码 占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。
.notice { @extend %extreme;}复制代码 编译为
#context a.notice { color: blue; font-weight: bold; font-size: 2em;}复制代码 !optional声明
如果@extend失败会收到错误提示，比如，这样写a.important {@extend .notice}，当没有.notice选择器时，将会报错，只有 h1.notice 包含.notice 时也会报错，因为 h1 与a冲突，会生成新的选择器。 意思就是单独将.notice提出来 如果要求@extend不生成新选择器，可以通过 !optional声明达到这个目的，例如：
a.important { @extend .notice !optional;}复制代码 @at-root
让元素以根目录输出，例如：
.parent { @at-root { .child1 { ... } .child2 { ... } } .step-child { ... }}复制代码 输出：
.parent { ... }.child1 { ... }.child2 { ... }.parent .step-child { ... }复制代码 混合指令
定义混合指令@mixin
混合指令的用法是在 @mixin后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}复制代码 混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：
@mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px }}复制代码 引用混合样式@include
使用@include指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：
.page-title { @include large-text; padding: 4px; margin-top: 10px;}复制代码 编译为
.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }复制代码 也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。
@mixin silly-links { a { color: blue; background-color: red; }}@include silly-links;复制代码 编译为
a { color: blue; background-color: red;}复制代码 参数
参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：
使用参数也和less几乎无
@mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; }}p { @include sexy-border(blue, 1in); }复制代码 编译为
p { border-color: blue; border-width: 1in; border-style: dashed;}复制代码 参数变量
有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：
@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows;}.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}复制代码 编译为
.shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;}复制代码 参数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用：
@mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border;}$values: #ff0000, #00ff00, #0000ff;.primary { @include colors($values...);}复制代码 编译为
.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff;}复制代码 输出格式
Sass 默认的 CSS 输出格式很美观也能清晰反映文档结构，为满足其他需求 Sass 也提供了多种输出格式。
Sass 提供了四种输出格式，可以通过 :style option选项设定，或者在命令行中使用 --style选项。
:nested
Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
#main { color: #fff; background-color: #000; } #main p { width: 10em; }.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }复制代码 :expanded
Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
#main { color: #fff; background-color: #000;}#main p { width: 10em;}.huge { font-size: 10em; font-weight: bold; text-decoration: underline;}复制代码 :compact
Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
#main { color: #fff; background-color: #000; }#main p { width: 10em; }.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }复制代码 :compressed
Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
#main{ color:#fff;background-color:#000}#main p{ width:10em}.huge{ font-size:10em;font-weight:bold;text-decoration:underline}复制代码