• Sass 使用

    Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，也是一种CSS扩展语言。

    特色功能 (Features)

    • 完全兼容 CSS3
    • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
    • 通过函数进行颜色值与属性值的运算
    • 提供控制指令 (control directives)等高级功能
    • 自定义输出格式

    语法格式 (Syntax)

    Sass有两种语法格式：

    1. SCSS (Sassy CSS)：这种格式的文件以.scss为扩展名，它的语法完全兼容CSS，并且增加了Sass的新特性。

    2. 缩进语法（或简称"Sass"）：这种格式的文件以.sass为扩展名，它使用缩进而不是大括号来分隔代码块，且属性定义时不使用冒号。

    CSS 功能拓展 (CSS Extensions)

    嵌套规则 (Nested Rules)

    Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

    1. // 嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
    2. #main p {
    3.   color: #00ff00;
    4.   width: 97%;
    5.  
    6.   .redbox {
    7.     background-color: #ff0000;
    8.     color: #000000;
    9.   }
    10. }
    11.  
    12.  
    13. //编译为
    14.  
    15. #main p {
    16.   color: #00ff00;
    17.   width: 97%; }
    18.   #main p .redbox {
    19.     background-color: #ff0000;
    20.     color: #000000; }

    父选择器 & (Referencing Parent Selectors: &)

    在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

    1. // 编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器
    2. a {
    3.   font-weight: bold;
    4.   text-decoration: none;
    5.   &:hover { text-decoration: underline; }
    6.   body.firefox & { font-weight: normal; }
    7. }
    8.  
    9. // 编译为
    10. a {
    11.   font-weight: bold;
    12.   text-decoration: none; }
    13.   a:hover {
    14.     text-decoration: underline; }
    15.   body.firefox a {
    16.     font-weight: normal; }
    17.  
    18.  
    19. // 如果含有多层嵌套，最外层的父选择器会一层一层向下传递
    20. #main {
    21.   color: black;
    22.   a {
    23.     font-weight: bold;
    24.     &:hover { color: red; }
    25.   }
    26. }
    27.  
    28.  
    29. //编译为
    30. #main {
    31.   color: black; }
    32.   #main a {
    33.     font-weight: bold; }
    34.     #main a:hover {
    35.       color: red; }
    36.  
    37.  
    38. //& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器
    39. #main {
    40.   color: black;
    41.   &-sidebar { border: 1px solid; }
    42. }
    43.  
    44. // 编译为
    45. // 当父选择器含有不合适的后缀时，Sass 将会报错。
    46. #main {
    47.   color: black; }
    48.   #main-sidebar {
    49.     border: 1px solid; }

    属性嵌套 (Nested Properties)

    有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

    1. .funky {
    2.   font: {
    3.     family: fantasy;
    4.     size: 30em;
    5.     weight: bold;
    6.   }
    7. }
    8. // 编译为
    9. .funky {
    10.   font-family: fantasy;
    11.   font-size: 30em;
    12.   font-weight: bold; }
    13.  
    14. // 命名空间也可以包含自己的属性值
    15. .funky {
    16.   font: 20px/24px {
    17.     family: fantasy;
    18.     weight: bold;
    19.   }
    20. }
    21. // 编译为
    22. .funky {
    23.   font: 20px/24px;
    24.     font-family: fantasy;
    25.     font-weight: bold; }

    占位符选择器 %foo (Placeholder Selectors: %foo)

    注释 /* */ 与 // (Comments: /* */ and //)

    Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

    1. /* This comment is
    2.  * several lines long.
    3.  * since it uses the CSS comment syntax,
    4.  * it will appear in the CSS output. */
    5. body { color: black; }
    6.  
    7. // These comments are only one line long each.
    8. // They won't appear in the CSS output,
    9. // since they use the single-line comment syntax.
    10. a { color: green; }
    11.  
    12. // 编译为
    13. /* This comment is
    14.  * several lines long.
    15.  * since it uses the CSS comment syntax,
    16.  * it will appear in the CSS output. */
    17. body {
    18.   color: black; }
    19.  
    20. a {
    21.   color: green; }

    SassScript

    SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

    Interactive Shell

    Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果

    1. $ sass -i
    2. >> "Hello, Sassy World!"
    3. "Hello, Sassy World!"
    4. >> 1px + 1px + 1px
    5. 3px
    6. >> #777 + #777
    7. #eeeeee
    8. >> #777 + #888
    9. white

    变量 $ (Variables: $)

    SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

    1. $width: 5em;
    2.  
    3. #main {
    4.   width: $width;
    5. }

    变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明

    1. #main {
    2.   $width: 5em !global;
    3.   width: $width;
    4. }
    5.  
    6. #sidebar {
    7.   width: $width;
    8. }
    9.  
    10. // 编译为
    11.  
    12. #main {
    13.   width: 5em;
    14. }
    15.  
    16. #sidebar {
    17.   width: 5em;
    18. }

    数据类型 (Data Types)

    SassScript 支持 6 种主要的数据类型：

    • 数字，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 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

     字符串 (Strings)

    SassScript 支持 CSS 的两种字符串类型：有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；与无引号字符串 (unquoted strings)，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名

    1. @mixin firefox-message($selector) {
    2.   body.firefox #{$selector}:before {
    3.     content: "Hi, Firefox users!";
    4.   }
    5. }
    6. @include firefox-message(".header");
    7.  
    8. // 编译为
    9.  
    10. body.firefox .header:before {
    11.   content: "Hi, Firefox users!"; }
    数组 (Lists)

    数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。

    nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

    运算 (Operations)

    所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

    数字运算 (Number Operations)

    SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

    1. p {
    2.   width: 1in + 8pt;
    3. }
    4.  
    5. // 编译为
    6.  
    7. p {
    8.   width: 1.111in; }

    如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

    1. p {
    2.   $font-size: 12px;
    3.   $line-height: 30px;
    4.   font: #{$font-size}/#{$line-height};
    5. }
    6.  
    7. // 编译为
    8.  
    9. p {
    10.   font: 12px/30px; }
    颜色值运算 (Color Operations)
    1. // 颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
    2.  
    3. p {
    4.   color: #010203 + #040506;
    5. }
    6. // 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
    7.  
    8. p {
    9.   color: #050709; }
    10.  
    11.  
    12. p {
    13.   color: #010203 * 2;
    14. }
    15. // 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
    16.  
    17. p {
    18.   color: #020406; }
    19.  
    20.  
    21. p {
    22.   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
    23. }
    24. // 编译为
    25.  
    26. p {
    27.   color: rgba(255, 255, 0, 0.75); }
    字符串运算 (String Operations)
    1. // + 可用于连接字符串
    2.  
    3. p {
    4.   cursor: e + -resize;
    5. }
    6. // 编译为
    7.  
    8. p {
    9.   cursor: e-resize; }
    10.  
    11. // 注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串
    12. // （位于 + 左侧）连接有引号字符串，运算结果则没有引号。
    13.  
    14. p:before {
    15.   content: "Foo " + Bar;
    16.   font-family: sans- + "serif";
    17. }
    18. // 编译为
    19.  
    20. p:before {
    21.   content: "Foo Bar";
    22.   font-family: sans-serif; }
    23.  
    24. // 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：
    25.  
    26. p:before {
    27.   content: "I ate #{5 + 10} pies!";
    28. }
    29. // 编译为
    30.  
    31. p:before {
    32.   content: "I ate 15 pies!"; }
    布尔运算 (Boolean Operations)

    SassScript 支持布尔型的 and or 以及 not 运算。

    数组运算 (List Operations)

    数组不支持任何运算方式，只能使用 list functions 控制。

    圆括号 (Parentheses)

    1. // 圆括号可以用来影响运算的顺序：
    2.  
    3. p {
    4.   width: 1em + (2em * 3);
    5. }
    6. // 编译为
    7.  
    8. p {
    9.   width: 7em; }

    函数 (Functions)

    1. // SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：
    2.  
    3. p {
    4.   color: hsl(0, 100%, 50%);
    5. }
    6. // 编译为
    7.  
    8. p {
    9.   color: #ff0000; }

    插值语句 #{} (Interpolation: #{})

    1. // 通过 #{} 插值语句可以在选择器或属性名中使用变量：
    2.  
    3. $name: foo;
    4. $attr: border;
    5. p.#{$name} {
    6.   #{$attr}-color: blue;
    7. }
    8. // 编译为
    9.  
    10. p.foo {
    11.   border-color: blue; }
    12.  
    13. // #{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使
    14. // 用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
    15.  
    16. p {
    17.   $font-size: 12px;
    18.   $line-height: 30px;
    19.   font: #{$font-size}/#{$line-height};
    20. }
    21. // 编译为
    22.  
    23. p {
    24.   font: 12px/30px; }

    变量定义 !default (Variable Defaults: !default)

    可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值

    1. $content: "First content";
    2. $content: "Second content?" !default;
    3. $new_content: "First time reference" !default;
    4.  
    5. #main {
    6.   content: $content;
    7.   new-content: $new_content;
    8. }
    9. // 编译为
    10.  
    11. #main {
    12.   content: "First content";
    13.   new-content: "First time reference"; }

    @-Rules 与指令 (@-Rules and Directives)

    @import

    Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

    1. // Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
    2.  
    3. @import "foo.scss";
    4.  
    5. // 或
    6.  
    7. @import "foo";
    8.  
    9. // 都会导入文件 foo.scss，但是
    10.  
    11. @import "foo.css";
    12. @import "foo" screen;
    13. @import "http://foo.com/bar";
    14. @import url(foo);
    15.  
    16. // 编译为
    17.  
    18. @import "foo.css";
    19. @import "foo" screen;
    20. @import "http://foo.com/bar";
    21. @import url(foo);
    22.  
    23. // Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：
    24.  
    25. @import "rounded-corners", "text-shadow";
    26.  
    27. // 导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() // 导入方式：
    28.  
    29. $family: unquote("Droid+Sans");
    30. @import url("http://fonts.googleapis.com/css?family=\#{$family}");
    31.  
    32. // 编译为
    33.  
    34. @import url("http://fonts.googleapis.com/css?family=Droid+Sans");
    分音 (Partials)

    如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

    1. // 例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
    2.  
    3. @import "colors";
    4. // 上面的例子，导入的其实是 _colors.scss 文件
    5. // 注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。
    6.  
    7.  
    8.
    嵌套 @import
    1. // 假设 example.scss 文件包含以下样式：
    2.  
    3. .example {
    4.   color: red;
    5. }
    6.  
    7. // 然后导入到 #main 样式内
    8.  
    9. #main {
    10.   @import "example";
    11. }
    12.  
    13. // 将会被编译为
    14.  
    15. #main .example {
    16.   color: red;
    17. }
    18.  
    19. // 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
    20.

    @media

    1. .sidebar {
    2.   width: 300px;
    3.   @media screen and (orientation: landscape) {
    4.     width: 500px;
    5.   }
    6. }
    7.  
    8. // 编译为
    9.  
    10. .sidebar {
    11.   width: 300px; }
    12.   @media screen and (orientation: landscape) {
    13.     .sidebar {
    14.       width: 500px; } }
    15.  
    16. // @media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and
    17.  
    18. @media screen {
    19.   .sidebar {
    20.     @media (orientation: landscape) {
    21.       width: 500px;
    22.     }
    23.   }
    24. }
    25.  
    26. // 编译为
    27.  
    28. @media screen and (orientation: landscape) {
    29.   .sidebar {
    30.     width: 500px; } }
    31.  
    32.  
    33. // @media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：
    34.  
    35. $media: screen;
    36. $feature: -webkit-min-device-pixel-ratio;
    37. $value: 1.5;
    38.  
    39. @media #{$media} and ($feature: $value) {
    40.   .sidebar {
    41.     width: 500px;
    42.   }
    43. }
    44. // 编译为
    45.  
    46. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    47.   .sidebar {
    48.     width: 500px; } }

    @extend

    使用 @extend 可以告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。

    1. .error {
    2.   border: 1px #f00;
    3.   background-color: #fdd;
    4. }
    5. .seriousError {
    6.   @extend .error;
    7.   border-width: 3px;
    8. }

    控制指令 (Control Directives)

    SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在 Compass 等样式库中。

    @if

    当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

    1. p {
    2.   @if 1 + 1 == 2 { border: 1px solid; }
    3.   @if 5 < 3 { border: 2px dotted; }
    4.   @if null  { border: 3px double; }
    5. }
    6.  
    7. // 编译为
    8.  
    9. p {
    10.   border: 1px solid; }
    11.  
    12. $type: monster;
    13. p {
    14.   @if $type == ocean {
    15.     color: blue;
    16.   } @else if $type == matador {
    17.     color: red;
    18.   } @else if $type == monster {
    19.     color: green;
    20.   } @else {
    21.     color: black;
    22.   }
    23. }
    24.  
    25. // 编译为
    26.  
    27. p {
    28.   color: green; }

    @for

    @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含  与  的值，而使用 to 时条件范围只包含  的值不包含  的值。另外，$var 可以是任何变量，比如 $i； 和  必须是整数值。

    1. @for $i from 1 through 3 {
    2.   .item-#{$i} { width: 2em * $i; }
    3. }
    4.  
    5. // 编译为
    6.  
    7. .item-1 {
    8.   width: 2em; }
    9. .item-2 {
    10.   width: 4em; }
    11. .item-3 {
    12.   width: 6em; }

    @each

    @each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而  是一连串的值，也就是值列表。

    @each 将变量 $var 作用于值列表中的每一个项目，然后输出结果

    1. @each $animal in puma, sea-slug, egret, salamander {
    2.   .#{$animal}-icon {
    3.     background-image: url('/images/#{$animal}.png');
    4.   }
    5. }
    6.  
    7. // 编译为
    8.  
    9. .puma-icon {
    10.   background-image: url('/images/puma.png'); }
    11. .sea-slug-icon {
    12.   background-image: url('/images/sea-slug.png'); }
    13. .egret-icon {
    14.   background-image: url('/images/egret.png'); }
    15. .salamander-icon {
    16.   background-image: url('/images/salamander.png'); }

    @while

    @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。

    1. $i: 6;
    2. @while $i > 0 {
    3.   .item-#{$i} { width: 2em * $i; }
    4.   $i: $i - 2;
    5. }
    6. .item-6 {
    7.   width: 12em; }
    8.  
    9. .item-4 {
    10.   width: 8em; }
    11.  
    12. .item-2 {
    13.   width: 4em; }

    混合指令 (Mixin Directives)

    定义混合指令 @mixin (Defining a Mixin: @mixin)

    混合指令的用法是在 @mixin 后添加名称与样式

    1. // 比如名为 large-text 的混合通过下面的代码定义：
    2.  
    3. @mixin large-text {
    4.   font: {
    5.     family: Arial;
    6.     size: 20px;
    7.     weight: bold;
    8.   }
    9.   color: #ff0000;
    10. }

    引用混合样式 @include (Including a Mixin: @include)

    1. // 使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：
    2.  
    3. .page-title {
    4.   @include large-text;
    5.   padding: 4px;
    6.   margin-top: 10px;
    7. }
    8.  
    9. // 编译为
    10.  
    11. .page-title {
    12.   font-family: Arial;
    13.   font-size: 20px;
    14.   font-weight: bold;
    15.   color: #ff0000;
    16.   padding: 4px;
    17.   margin-top: 10px; }
    18.  
    19. // 混合样式中也可以包含其他混合样式，比如
    20.  
    21. @mixin compound {
    22.   @include highlighted-background;
    23.   @include header-text;
    24. }
    25. @mixin highlighted-background { background-color: #fc0; }
    26. @mixin header-text { font-size: 20px; }

    参数 (Arguments)

    1. @mixin sexy-border($color, $width) {
    2.   border: {
    3.     color: $color;
    4.     width: $width;
    5.     style: dashed;
    6.   }
    7. }
    8. p { @include sexy-border(blue, 1in); }
    9.  
    10. // 编译为
    11.  
    12. p {
    13.   border-color: blue;
    14.   border-width: 1in;
    15.   border-style: dashed; }
    16.  
    17. // 混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数
    18. // 赋值，则自动使用默认值：
    19.  
    20. @mixin sexy-border($color, $width: 1in) {
    21.   border: {
    22.     color: $color;
    23.     width: $width;
    24.     style: dashed;
    25.   }
    26. }
    27. p { @include sexy-border(blue); }
    28. h1 { @include sexy-border(blue, 2in); }
    29.  
    30. // 编译为
    31.  
    32. p {
    33.   border-color: blue;
    34.   border-width: 1in;
    35.   border-style: dashed; }
    36.  
    37. h1 {
    38.   border-color: blue;
    39.   border-width: 2in;
    40.   border-style: dashed; }
    41.  
    42.  
    43. // 参数变量 (Variable Arguments)
    44. @mixin box-shadow($shadows...) {
    45.   -moz-box-shadow: $shadows;
    46.   -webkit-box-shadow: $shadows;
    47.   box-shadow: $shadows;
    48. }
    49. .shadows {
    50.   @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    51. }
    52.  
    53. // 编译为
    54.  
    55. .shadowed {
    56.   -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    57.   -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    58.   box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    59. }

    函数指令 (Function Directives)

    1. $grid-width: 40px;
    2. $gutter-width: 10px;
    3.  
    4. @function grid-width($n) {
    5.   @return $n * $grid-width + ($n - 1) * $gutter-width;
    6. }
    7.  
    8. #sidebar { width: grid-width(5); }
    9.  
    10. // 编译为
    11.  
    12. #sidebar {
    13.   width: 240px; }

    输出格式 (Output Style)

    :nested

    Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系

    1. #main {
    2.   color: #fff;
    3.   background-color: #000; }
    4.   #main p {
    5.     width: 10em; }
    6.  
    7. .huge {
    8.   font-size: 10em;
    9.   font-weight: bold;
    10.   text-decoration: underline; }

    :expanded

    Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

    1. #main {
    2.   color: #fff;
    3.   background-color: #000;
    4. }
    5. #main p {
    6.   width: 10em;
    7. }
    8.  
    9. .huge {
    10.   font-size: 10em;
    11.   font-weight: bold;
    12.   text-decoration: underline;
    13. }

    :compact

    Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

    1. #main { color: #fff; background-color: #000; }
    2. #main p { width: 10em; }
    3.  
    4. .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}

  • 相关阅读:
    【day09】继承、super、this、抽象类
    Redis集群架构搭建——主从、哨兵、集群
    通过jsonobject.tostring 传字符串为有空格问题
    智工教育：军队文职报考要注意限制性条件
    通过LabVIEW提升生产设备自动化水平
    用python实现混合检索
    stm32 下载程序只能使用串口1
    JAVA仓库管理系统（附源码+调试）
    从页面 A 打开一个新页面 B，B 页面正常关闭或意外崩溃，A页面怎么更新B页面提交的参数并进行更新
    verilog 并行块实现
  • 原文地址：https://blog.csdn.net/m0_46639734/article/details/139804561