Sass进阶学习

antrun
574 阅读3分钟

1、&

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

2、局部变量转全局变量

局部变量转换为全局变量可以添加 !global

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

3、数据类型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)

3/1、使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

3/2、数组

1）使用逗号或空格分割

margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif

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

3）数组中可以包含子数组

1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组

4）内外两层数组使用相同的分隔方式，需要用圆括号包裹内层

(1px 2px) (5px 6px)

5）sass中含义不同

(1px 2px) (5px 6px) 与 1px 2px, 5px 6px

前者是包含两个数组的数组，而后者是包含四个值的数组

6）用 () 表示不包含任何值的空数组（空数组不可以直接编译成 CSS）

如果数组中包含空数组或空值，编译时将被清除，

比如 1px 2px () 3px 或 1px 2px null 3px

3/3、map

scss $map: (key1: value1, key2: value2, key3: value3); 

和Lists不同Maps必须被圆括号包围

map-get函数用于查找键值，map-merge函数用于map和新加的键值融合，@each命令可添加样式到一个map中的每个键值对

4、运算

4/1、数字运算（+ | - | * | / | % | > | < | >= | <= | == | !=）

除法

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

如果需要使用变量，同时又要确保 / 不做除法运算，用 #{} 插值语句将变量包裹

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; }

4/2、颜色运算（分段计算红绿蓝的值）

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 值。

2）、颜色值的 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); }

3）、IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',
    startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

编译为

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
    startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

4/3、字符串运算

1）如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，

相反，

无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

2）运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}

编译为

p {
  margin: 7px auto; }

3）

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

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

4/4、布尔值运算（and or not）

4/5、圆括号可以用来影响运算的顺序：

p {
  width: 1em + (2em * 3);
}

编译为

p {
  width: 7em; }

4/6、通过 Sass::Script::Functions 查看完整的 Sass 函数列表，参数名，以及如何自定义函数。

4/7、#{} 插值语句

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }

5/1 ！default

变量是 null 空值时将视为未被 !default 赋值。

5/2 @import

1）不会导入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);

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

5/3、单独使用时，不会被编译到 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; }

5/4、如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的，例如：

a.important {
  @extend .notice !optional;
}

5/5、在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS

下面的例子是可行的：

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

但不可以这样：

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

5/6、@at-root 将样式从根不出发

.parent {

  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

Which would output the following:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

5/7、@if

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

@if 声明后面可以跟多个 @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; }

5/8、@for

@for $var from <start> through <end>，或者 @for $var from <start> to <end>

当使用 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; }

5/9、@each

$var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值

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

is compiled to:

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

Since maps are treated as lists of pairs, multiple assignment works with them as well. For example:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

is compiled to:

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

5/10、直到表达式返回结果为 false

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

5/11、向混合样式中导入内容

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为

* html #logo {
  background-image: url(/logo.gif);
}

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，所以上面的例子可以写成：


avatar
文章
阅读
粉丝