Zhan's Blog

Appearance

Sass ​

选择器 ​

嵌套规则 ​

scss
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

父选择器 ​

scss
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}
/* & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器 */
#main {
  color: black;
  &-sidebar {
    border: 1px solid;
  }
}
/* 编译为 */
#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

属性嵌套 ​

scss
/* 有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间 */
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/* 编译为 */
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}
/* 命名空间也可以包含自己的属性值 */
.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
/* 编译为 */
.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold;
}

注释 /* */ 与 // ​

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

注释 /* */ 与 // ​

scss
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，多行注释会被完整输出到编译后的 CSS 文件中，而单行注释则不会
/* 插值语句 (interpolation) 也可写进多行注释中输出变量值： */
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
/* 编译为 */
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

SassScript ​

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

Interactive Shell ​

scss
/* Interactive Shell 可以在命令行中测试 SassScript 的功能，在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果： */
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

变量 $ ​

scss
$width: 5em;
#main {
  width: $width;
}

/* 变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明： */
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

数据类型 ​

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)

​

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

运算 ​

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

数字运算 ​

scss
p {
  width: 1in + 8pt;
}
/* 编译为 */
p {
  width: 1.111in;
}

/* 以下三种情况 / 将被视为除法运算符号：
如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分 */
p {
  font: 10px/8px; // Plain CSS, no division
  $width: 1000px;
  width: $width/2; // Uses a variable, does division
  width: round(1.5) / 2; // 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;
}

颜色值运算 ​

scss
p {
  color: #010203 + #040506;
}
/* 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为 */
p {
  color: #050709;
}
/* 数字与颜色值之间也可以进行算数运算，同样也是分段计算的 */
p {
  color: #010203 * 2;
}
/* 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为 */
p {
  color: #020406;
}
/* 需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。 */
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
/* 编译为 */
p {
  color: rgba(255, 255, 0, 0.75);
}
/* 颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。 */
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
/* 编译为 */
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25);
}

字符串运算 ​

scss
+ 可用于连接字符串 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;
}

圆括号 ​

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

函数 ​

scss
p {
  color: hsl(0, 100%, 50%);
}
/* 编译为 */
p {
  color: #ff0000;
}

插值语句 #{} ​

scss
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/* 编译为 */
p.foo {
  border-color: blue;
}

变量定义 !default ​

scss
/* 可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。 */
$content: 'First content';
$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 ​

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。 文件拓展名是 .css； 文件名以 http:// 开头； 文件名是 url()； @import 包含 media queries。

scss
@import 'foo.scss';
/* 或 */
@import 'foo';
/* 都会导入文件 foo.scss */

/* 如果 */
@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);

/* Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件 */
@import 'rounded-corners', 'text-shadow';

嵌套 @import ​

scss
/* 大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中 */
.example {
  color: red;
}
#main {
  @import 'example';
}
/* 编译为 */
#main .example {
  color: red;
}

@extend ​

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

scss
<div class="error seriousError">
  Oh no! You've been hacked!
</div>
.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;
}
/* 这样，使用 .seriousError 的地方可以不再使用 .error */

控制指令 ​

@if ​

scss
/* 当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码： */
p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}
/* 编译为 */
p {
  border: 1px solid;
}
/* @if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如： */
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
/* 编译为 */
p {
  color: green;
}

@for ​

scss
/* @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。 */
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}
/* 编译为 */
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@each ​

scss
/* @each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。
@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如： */
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
/* 编译为 */
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

/* 多变量each */
@each $animal, $color, $cursor in (puma, black, default), (
    sea-slug,
    blue,
    pointer
  ), (egret, white, move)
{
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
/* 编译为 */
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move;
}

/* 键值对each */
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
/* 编译为 */
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

@while ​

scss
/* @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如： */
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}
/* 编译为 */
.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

混合指令 ​

定义混合指令 @mixin ​

scss
@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 ​

scss
/* 使用 @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;
}
/* 混合样式中也可以包含其他混合样式，比如 */
@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background {
  background-color: #fc0;
}
@mixin header-text {
  font-size: 20px;
}

参数 ​

scss
/* 参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号： */
@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;
}
/* 混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值： */
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}
/* 编译为 */
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}