Sass基础

SCSS 和 SASS 的区别

• scss，顾名思义，就是与css规则类似，不省略 {} 和 ;
• sass采用的是缩进语法，省略 {} 和 ;

// scss
html {
    @include font_size(A);
}

// sass
html 
    @include font_size(A)

注释

单行注释

以 // 开头，一直到行尾。单行注释中任何内容都不会被编译成 css

多行注释

以 /* 开始，*/ 结束。如果多行注释写在允许声明的地方，它会被编译成 css 注释。编译为CSS的多行注释可能包含插值，将在编译注释之前对其进行计算。默认情况下，多行注释会议压缩模式从编译后的 css 中去除。但是如果注释以 /*! 开头，它将始终包含在 css 中。

// This comment won't be included in the CSS.

/* But this comment will, except in compressed mode. */

/* It can also contain interpolation:
 * 1 + 1 = #{1 + 1} */

/*! This comment will be included even in compressed mode. */

p /* Multi-line comments can be written anywhere
   * whitespace is allowed. */ .sans {
  font: Helvetica, // So can single-line commments.
        sans-serif;
}

/************************************************************************/ 

// 编译后的 css
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
 * 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
  font: Helvetica, sans-serif;
}

样式规则

嵌套

sass 中允许属性嵌套以减少声明——外部属性被添加到内部属性（连字符分隔）

.transition {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

/************************************************************************/

// 编译后的 css
.transition {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.transition:hover {
  font-size: 36px;
}

此外，还可以把值提到外部去

.info {
    margin: auto {
        bottom: 10px;
        top: 5px;
    }
}

/************************************************************************/

// 编译后 css 
.info {
    margin: auto;
    margin-bottom: 10px;
    margin-top: 5px;
}

占位选择器

占位符选择器以 % 开头，在没有使用 @extend 进行扩展时，不会被编译到 css 输出中。

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}

/************************************************************************/

// 编译后的 css
.action-buttons, .reset-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

变量

变量以 $ 开头。Sass 变量与所有 Sass 标识符一样，将连字符和下划线视为相同，这意味着 $font-size 和 $font_size 指的是同一个变量。

默认值

在变量的值后加上 !default 可以将该值定义为默认值；当使用该变量时，仅当变量未定义或者值为 null 时，才会使用默认值。

// _library.scss
$black: #000 !default; // rgb(0, 0, 0)
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222, // rgb(34, 34, 34)
  $border-radius: 0.1rem
);

/************************************************************************/

// 编译后的 css
code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

作用域

变量分为局部变量和全局变量。局部变量和全局变量可以同名，这样代表两个变量。在局部作用域中，可以使用 !global 标志将局部变量提升为全局变量（!global 标志只能用在局部作用域中，与已声明的全局变量的局部变量提升全局变量）。

$color: #ccc;

.content {
  // $color1: #ccc !global; // 报错，!global 不能用于新变量的声明
  $color: #fff !global;
  color: $color;
}
// $color: #fff !global; 报错，没必要使用 !global 标志
.sidebar {
  color: $color;
}

/************************************************************************/

// 编译后的 css
.content {
  color: #fff;
}

.sidebar {
  color: #fff;
}

与 css 变量的区别：

• sass 变量都会被编译， css 变量包含在 css 中；
• sass 变量是命令式的，意味着使用一个变量之后改变它的值，在之前使用的值将保持不变；
• css 变量是声明式的，意味着使用一个变量之后改变它的值，在之前使用的值将发生改变

$color1: #ccc;
.color-gray {
    background: $color1;
}

$color1: #fff;
.color-white {
    background: $color1;
}

/************************************************************************/

// 编译后的 css
.color-gray {
    background: #ccc;
}

.color-white {
    background: #fff;
}

插值

用 #{} 可以将表达式结果插入到需要的地方，插值对于将值注入字符串很有用。

注意点

• 插值在 SassScript 表达式中很少需要。例如，在属性值只由单一变量构成时，你可以只写 color: $accent 而不是 color: #{$accent}
• 在数字中最好也不要使用插值。例如，#{$width}px 应该被替换成 $width * 1px ，或者定义 $width 时就附带上单位

@mixin inline-animation($duration) {
  // unique-id(): 返回一个无引号的随机字符串作为id,不过只能保证在单次的 Sass 编译中该id的唯一性
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }
  animation: {
    name: $name;
    duration: $duration;
    iteration-count: infinite;
  }
}

.pulse {
  @include inline-animation(2s) {
    from {
      background-color: yellow;
    }
    to {
      background-color: red;
    }
  }
}

/************************************************************************/

// 编译后的 css
.pulse {
  animation-name: inline-uz7c8qvn3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uz7c8qvn3 {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}