scss笔记

1.混合：常用于浏览器兼容性，使用@mixin name指令

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

2.继承：使用@extend指令

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

占位符选择器%:占位符选择器看起来像类和id选择器，除了#或被.替换为%。它们可以在类或id可以使用的任何地方使用，并且它们本身可以防止将规则集呈现给CSS。但是，占位符选择器可以扩展，就像类和ID一样。将生成扩展选择器，但基本占位符选择器不会生成。

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}

!optional：

通常，当您扩展选择器时，如果@extend不起作用则会出错。例如，如果您编写a.important {@extend .notice}，如果没有包含的选择器，则会出错.notice。如果包含的唯一选择器.notice是h1.notice，则也是一个错误，因为h1与之冲突a并且因此不会生成新的选择器。但有时，您希望允许@extend不生成任何新的选择器。为此，只需!optional在选择器后添加标志即可。

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

3.操作符：例如+、-、*、/、%

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

4.css扩展：使用"&"关键字在CSS规则中引用父级选择器

/*===== SCSS =====*/
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

/*===== CSS =====*/
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

"&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀

/*===== SCSS =====*/
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

/*===== CSS =====*/
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

如果在父级选择器不存在的场景使用&，Scss预处理器会报出错误信息

5.嵌套信息：CSS许多属性都位于相同的命名空间（例如font-family、font-size、font-weight都位于font命名空间下），Scss当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下

/*===== SCSS =====*/
.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*===== CSS =====*/
.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

命令空间上可以直接书写CSS简写属性，但是日常开发中建议直接书写CSS简写属性，尽量保持CSS语法的一致性。

.demo {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

.demo {
  font: 20px/24px fantasy;
    font-weight: bold;
}

6.控制指令：

   1、@if：该@if指令需要SassScript表达和使用嵌套在它下面的样式，如果表达式返回以外的任何其他false或null

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

  该@if声明后面可以跟几个@else if声明和一个@else声明。如果@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;
  }
}

  2、@for：该@for指令重复输出一组样式。对于每次重复，使用计数器变量来调整输出。该指令有两种形式： @for $var from <start> through <end>和@for $var from <start> to <end>。注意关键字的区别through和to。$var可以是任何变量名称，如$i; <start>并且<end>是应该返回整数的SassScript表达式。

该@for语句设置$var为指定范围内的每个连续数字，并且每次使用该值输出嵌套样式$var。对于具有以下形式from ... through，所述范围包括的值<start>和 <end>，但形式from ... to运行至但不包括的值 <end>。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

  3、@each：该@each规则的形式@each $var in <list>。 $var可以是任何变量名，例如$length或$name，<list>是一个返回列表的SassScript表达式。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

  4、@while：该@while指令采用SassScript表达式并重复输出嵌套样式，直到语句求值为止false。这可以用来实现比@for语句更复杂的循环，尽管这很少是必要的

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}