sass/scss文档整理mixin混入方法摘取一些记录笔记

超、凢脫俗 2022-12-01 14:23 292阅读 0赞

# sass/scss文档整理mixin混入 方法 摘取一些记录笔记 #

### sass目录 ###

*  sass/scss文档整理mixin混入 方法 摘取一些记录笔记
 *   *  0. 简介
     *  1. 嵌套
     *   *  1.1 父选择器 &
         *  1.2 子选择器 >
         *  1.3 属性嵌套
         *  1.4 注释
     *  2. SassScript
     *   *  2.1 变量 $
         *   *  2.1.1 全局变量
             *  2.1.2 局部变量
         *  2.2 数据类型
         *   *  2.2.1 运算：
             *   *  2.2.1.1 数字运算
                 *  2.2.1.2 除法运算
                 *  2.2.1.3 颜色值运算
                 *  2.2.1.4 字符串运算 +
             *  2.2.2 插值语句 \`\#\{\}\`
     *  3 @-Rules与指令
     *   *  3.1 @import
         *  3.2 @media
         *  3.3 @extend
     *  4. 控制指令
     *   *  4.1 @if
         *  4.2 @for
         *  4.3 @each
         *  4.4 @while
     *  5. 混合指令（Mixin）
     *   *  5.1 定义混合指令 @mixin
         *  5.2 引用混合样式 @include
         *  5.3 参数
         *   *  5.3.1 参数默认值：
             *  5.3.2 关键词参数：
             *  5.3.3 参数变量
         *  5.4 向混合样式中导入内容
         *  5.5 函数指令
     *  6. SCSS输出格式
     *   *   *  6.1 \`：nested\`
             *  6.2 \`:expanded\`
             *  6.3 \`:compact\`
             *  6.4 \`:compressed\`
             *  6.5 编译：

## 0. 简介 ##

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 [Compass][]）有助于更好地组织管理样式文件，以及更高效地开发项目。

语法格式：

Sass 有两种语法格式 `scss` 和`sass`

*  scss：这种格式仅在css3语法的基础上进行拓展，所有css3语法在scss中都是通用的，同时加入sass的特色功能。scss也支持大多数css hacks写法以及浏览器前缀写法。以`.scss`作为拓展名。
 *  sass：是一种简化格式，它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。以 `.sass` 作为拓展名。

任何一种格式可以直接 [导入 (@import)][_import] 到另一种格式中使用，或者通过 `sass-convert` 命令行工具转换成另一种格式：

# Convert Sass to SCSS
    $ sass-convert style.sass style.scss
    
    # Convert SCSS to Sass
    $ sass-convert style.scss style.sass

## 1. 嵌套 ##

### 1.1 父选择器 & ###

`&`表示当前选择器的父级

.t{
        &:after {}  
    }

群组选择器的嵌套

.container { h1, h2, h3 {margin-bottom: .8em} }
    .container h1, .container h2, .container h3 { margin-bottom: .8em }
    
    nav, aside {
      a {color: blue}
    }
    nav a, aside a {color: blue}

### 1.2 子选择器 > ###

// 会选择article下所有section
    article section { margin: 5px }
    // 只会选择article下子元素中的section
    article > section { border: 1px solid #ccc }

同层相邻组合选择器 `+`

同层全体组合选择器`~`

### 1.3 属性嵌套 ###

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

.funky{
    	font:{
    		family: fantasy;
    		size: 30em;
    		weight: bold;
    	}
    }
    // 编译为
    .funky {
      font-family: fantasy;
      font-size: 30em;
      font-weight: bold; }

### 1.4 注释 ###

*  多行注释`/* */` 会被完整输出到编译后的css文件中
 *  单行注释`//` 不会被编译进css中

将 `!` 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。

插值语句 (interpolation) 也可写进多行注释中输出变量值：

$version: "1.2.3";
    /* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

## 2. SassScript ##

### 2.1 变量 $ ###

#### 2.1.1 全局变量 ####

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

#### 2.1.2 局部变量 ####

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

#main{
        $width: 5em; // 局部变量
        $width: 5em !global; // 全局变量
    }

### 2.2 数据类型 ###

SassScript支持6中数据类型：

*  数字 `1,2,3`
 *  字符串，有引号字符串与无引号字符串，`"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)`

#### 2.2.1 运算： ####

##### 2.2.1.1 数字运算 #####

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

数字运算：支持数字的加减乘除、取整运算（`+, -, *, /, %`）,如果必要会在不同单位间转换值。

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

关系运算 `<, >, <=, >=` 也可用于数字运算，相等运算 `==, !=` 可用于所有数据类型。

##### 2.2.1.2 除法运算 #####

除法运算`/`在css中通常起到分割数字的用途。

以下三种情况`/`将被视为除法运算符号：

*  如果值，或值得一部分，是变量或者函数的返回值； `$width/2`
 *  如果值被圆括号包裹； `(500px)/2`
 *  如果值是算术表达式的一部分。 `5px+ 8px/2px`

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

##### 2.2.1.3 颜色值运算 #####

颜色值的运算是`分段计算`进行的，也就是分别计算红色，绿色，以及蓝色的值：

`color: #010203 + #040506;` \-> `color: #050709`

`color: #010203 * 2` \-> `color:020406`

使用 [color functions][] 比计算颜色值更方便一些。

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

##### 2.2.1.4 字符串运算 + #####

`+` 可用于连接字符串

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

#### 2.2.2 插值语句 `#{}` ####

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

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

`#{}` 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 `#{}` 可以避免 Sass 运行运算表达式，直接编译 CSS。

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

## 3 @-Rules与指令 ##

### 3.1 @import ###

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

通常，`@import` 寻找 Sass 文件并将其导入，但在以下情况下，`@import` 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

*  文件拓展名是 `.css`；
 *  文件名以 `http://` 开头；
 *  文件名是 `url()`；
 *  `@import` 包含 media queries。

如果不在上述情况内，文件的拓展名是 `.scss` 或 `.sass`，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 `.scss` 或 `.sass` 的文件并将其导入。

**嵌套 @import**

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 `@import`，其实，也可以将 `@import` 嵌套进 CSS 样式或者 `@media` 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

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

### 3.2 @media ###

Sass 中 `@media` 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 `@media` 嵌套在 CSS 规则内，编译时，`@media` 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 `@media` 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar {
      width: 300px;
      @media screen and (orientation: landscape) {
        width: 500px;
      }
    }
    // 编译为
    .sidebar {
      width: 300px; }
      @media screen and (orientation: landscape) {
        .sidebar {
          width: 500px; } }

`@media` 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 `and`

@media screen {
      .sidebar {
        @media (orientation: landscape) {
          width: 500px;
        }
      }
    }
    // 编译为
    @media screen and (orientation: landscape) {
      .sidebar {
        width: 500px; } }

`@media` 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：

$media: screen;
    $feature: -webkit-min-device-pixel-ratio;
    $value: 1.5;
    
    @media #{$media} and ($feature: $value) {
      .sidebar {
        width: 500px;
      }
    }
    // 编译为
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
      .sidebar {
        width: 500px; } }

### 3.3 @extend ###

常常会遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式

使用 `@extend` 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。

.error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    // 编译为
    .error, .seriousError {
      border: 1px #f00;
      background-color: #fdd; }
    .seriousError {
      border-width: 3px; }

## 4. 控制指令 ##

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

### 4.1 @if ###

`@if`声明后面可以跟多个 `@else if`声明，或者一个 `@else`声明。

p {
      @if 1 + 1 == 2 { border: 1px solid; }
      @if 5 < 3 { border: 2px dotted; }
      @if null  { border: 3px double; }
    }
    // 编译为
    p {
      color: green; }

### 4.2 @for ###

`@for`指令可以在限制的范围内重复输出格式，包含两种格式：`@for $var from <start> through <end>` 或者 `@for $var from <start> to <end>`,区别在于`though`与`to`的含义：当使用`though`时，条件范围包含`<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; }

### 4.3 @each ###

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

### 4.4 @while ###

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

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

## 5. 混合指令（Mixin） ##

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语义的class，比如 `.float-left`。混合指令可以包含所有的css规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。

### 5.1 定义混合指令 @mixin ###

混合指令的用法是在 `@mixin` 后添加名称与样式，比如名为 `large-text` 的混合通过下面的代码定义：

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

### 5.2 引用混合样式 @include ###

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

### 5.3 参数 ###

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的执行顺序，再讲所赋的值对应写进括号：

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

#### 5.3.1 参数默认值： ####

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

#### 5.3.2 关键词参数： ####

混合指令也可以使用关键词参数，上面的例子也可以写成：

p { @include sexy-border($color: blue); }
    h1 { @include sexy-border($color: blue, $width: 2in); }

虽然不够简明，但是阅读起来更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

#### 5.3.3 参数变量 ####

有时，不能确定混合指令需要使用多少个参数，比如一个关于 `box-shadow` 的混合指令不能确定有多少个 ‘shadow’ 会被用到。这时，可以使用参数变量 `…` 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    }
    .shadows {
      @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }
    // 编译为
    .shadows {
      -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
      -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
      box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }

参数变量也可以用在引用混合指令的时候 (`@include`)，与平时用法一样，将一串值列表中的值逐条作为参数引用：

@mixin colors($text, $background, $border) {
      color: $text;
      background-color: $background;
      border-color: $border;
    }
    $values: #ff0000, #00ff00, #0000ff;
    .primary {
      @include colors($values...);
    }
    // 编译为
    .primary {
      color: #ff0000;
      background-color: #00ff00;
      border-color: #0000ff;
    }

### 5.4 向混合样式中导入内容 ###

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在`@content`标志的地方：

@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 可以用 + 表示**，所以上面的例子可以写成：

=apply-to-ie6-only
      * html
        @content
    
    +apply-to-ie6-only
      #logo
        background-image: url(/logo.gif)

**注意：** 当 `@content` 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

### 5.5 函数指令 ###

Sass支持自定义函数，并能在任何属性值或SassScript中使用：

$grid-width: 40px;
    $gutter-width: 10px;
    @function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
    }
    #sidebar { width: grid-width(5); }
    // 编译为
    #sidebar {
      width: 240px; }

与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 `@return` 输出结果。

自定义的函数也可以使用关键词参数，上面的例子还可以这样写：

#sidebar { width: grid-width($n: 5); }

建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。

## 6. SCSS输出格式 ##

Sass 默认的 CSS 输出格式很美观也能清晰反映文档结构，为满足其他需求 Sass 也提供了多种输出格式。

#### 6.1 `：nested` ####

Nested （嵌套）样式是 Sass 默认的输出格式

#main { 
      color: #fff;
      background-color: #000; }
      #main p { 
        width: 10em; }
    
    .huge { 
      font-size: 10em;
      font-weight: bold;
      text-decoration: underline; }

#### 6.2 `:expanded` ####

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

#main { 
      color: #fff;
      background-color: #000;
    }
    #main p { 
      width: 10em;
    }
    
    .huge { 
      font-size: 10em;
      font-weight: bold;
      text-decoration: underline;
    }

#### 6.3 `:compact` ####

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

#main {  color: #fff; background-color: #000; }
    #main p {  width: 10em; }
    
    .huge {  font-size: 10em; font-weight: bold; text-decoration: underline; }

#### 6.4 `:compressed` ####

Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

#main{ color:#fff;background-color:#000}#main p{ width:10em}.huge{ font-size:10em;font-weight:bold;text-decoration:underline}

[webpack配置scss https://blog.csdn.net/qq\_32442967/article/details/108245253][webpack_scss https_blog.csdn.net_qq_32442967_article_details_108245253]

#### 6.5 编译： ####

`--sourcemap=none` 不生成`map`文件 `--no-cache`不生成`sass-cache`文件夹

# 右括号在末尾
    sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style nested
    # 普通格式
    sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style expanded
    # 每行样式一行
    sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style compact
    # 压缩成一行
    sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style compressed

[Compass]: http://compass-style.org/
[_import]: https://www.sass.hk/docs/#t7-1
[color functions]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
[opacify]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#opacify-instance_method
[transparentize]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#transparentize-instance_method
[webpack_scss https_blog.csdn.net_qq_32442967_article_details_108245253]: https://blog.csdn.net/qq_32442967/article/details/108245253