2020-02-21（sass）

安装

1，安装使用：https://blog.csdn.net/q213546879/article/details/98643727

变量

$width: 5px;

.box{
  width: $width;
}

---------------------------
.box {
  width: 5px;
}

这里的符号是$

嵌套

$width: 5px;

.box{
  width: $width;
}

---------------------------
.box {
  width: 5px;
}
.box {
  width: 5px; 
  }
  .box_inner {
    height: 123px;
   }

编译风格：

Nested:
nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。

#main {
  color: #fff;
  background-color: #000; }
#main p {
  width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

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

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

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

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

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

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

混合

@mixin、@include

控制指令

@if

p{
  @if 1 + 1 == 2 { width: 20px }
}

@for

@for $num from 1 through 3 {
  .item{
    width:$num * 3px;
  }
}

-------------------------------------
.item {
  width: 3px;
}

.item {
  width: 6px;
}

.item {
  width: 9px;
}

@each

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

@while

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

函数

@function add($a,$b) {
  @return $a + $b;
}

.box{
  width: add(5,6)*1px;
}

-----------------------------

.box {
  width: 11px; }

模块

@import 、Partials