SCSS 基础使用

SCSS简介

SCSS 原本叫 SASS，SASS 是版本1和版本2的叫称，当时的格式不用大括号，而是使用缩进作为层级，因为不好阅读，所以在第三版之后，SASS增加了使用大括号作为层级，完全兼容CSS语法，改名叫SCSS，所以SASS和SCSS是一样的，只是SCSS是第三版。

基本语法

变量

scss 支持变量存储样式值，并在任何位置使用这个变量值，使用 $ 号来定义

$aa: #fff;
$bb: 10;
$cc: 100px;
.div {
  background-color: $aa;
  border: $cc solid $aa;
}

• 变量名的命名，使用 - 连接和使用 _ 连接被视为同一个，比如 $a-b 和 $a_b 会被视为同一个，如果同时定义了，则会被后来定义的值覆盖先前定义的。
• 变量一定要先定义，后使用。
• 定义在样式框中的属于局部变量，定义在样式框外的属于全局变量。
  • $color: #fff;   // 全局变量
  • div { $color:#fff; // 局部变量}
• 在样式框中，局部变量值后面，加上 !global，则它会成为全局变量
  • .div {
  •    $a: 10px !global;   // 这里即使在样式框中，因为使用了 !global 会变成全局变量
  • }
• 可以使用 !default 来定义冲突变量默认值，它不会覆盖原来的值，但当原来的值没有了，就会使用默认值
  • $color: #fff;
  • $color: #000 !default;   // 当上面的 $color 不存在时，就会使用这个

变量类型

scss 提供几种变量的数据类型

• 数字型：
  • 1, 2, 13, 10px
• 字符串型：
  • “foo”, "bar" 等
• 颜色类型：
  • blue, red, #ffffff, ragb(255,0,0,5)
• 布尔型：
  • true 和 false
• 空值:通常用于做判断，使用js来后期注入值
  • null
• 数组：用空格或逗号分隔符
  • 1.5em 1em 0 2em, Helvetica,Arial, sans-serif
• Maps 类型，相当于 Object
  • (key1: value1, key2:value2)

多种嵌套简写

后代选择器嵌套

当我们看到在日常开发中，会有多个层级结构嵌套，每个层级都有对应的样式，在css上面一些后代选择器会以一层层的叠加方式来精准定位里面层级的结构，这使用css的选择器名称会非常长，如下：

/* 多层嵌套选择器 */
.div .subDiv p a img {
  ...
}

而使用 scss 后，这些嵌套的选择器可以像html 那样嵌套着写，如下面这样：

.div  {
  .subDiv {
    p {
      a {
        img{
          ...
        }
      }
    }
  }
}

如果有兄弟结构的话，就不需要重复写多个选择器了，scss会帮你自动编译。

使用 & 符号来定义嵌套的伪类选择器：

伪类选择器是指，某些结构组件在不同状态下可能应该有不同的样式，比如 <a> 标签，在选中和未选中时都应该有对应的样式，要选中这种样式的称为伪类选择器，使用 :xxx 来定义，比如 a 的待点击时的样式

a:hover {
  ...
}

在scss中可以使用 & 符号来嵌套 ：

a{
  /* a 的正常样式*/
  &:hover {
    /* a:hover 时的样式 */
  }
}

属性嵌套

对于一些特点的属性，需要使用多个属性值来表达样式，如文字样式，它需要使用 <文字大小> <文字颜色> <文字粗细> <文字字体>等等多个属性来表达，在css中，这些用于描述某一属性样式的属性名中，都有规律，如文字样式构成的子属性名都会有 font- 开头的，那么这些开头的属性，scss也可以为我们省略。如下

  color: #fff;
  font-family: 新細明體-ExtB;
  font-size: 10px;
  font-weight: bold;

我们可以把它省略写成：

  color: #fff;
  font: {  /* 对组合属性进行嵌套简写 */
    family: 新細明體-ExtB;
    size: 10px;
    weight: bold;
  }

引用样式模板

有时我们在设计样式时，可能多个结构都会使用相同的样式，然后还根据不同的结构再定义自己的样式，如下面这样，它们不是嵌套关系，但是它们都存在相同样式 color ，那么我们就可以把这些相同的样式提取出来，作为一个模板（注意不是变量），当使用它时，会把整块模板都引用进去，当模板没有被使用时，不会被编译。

/* 在不同的结构中都存在相同的样式，但它们又不是嵌套结构时，只能每个结构都写相同的样式 */
div {
  color: #0b0723;
  font-size: 10px;
  
  padding: 2px;
}

a {
  color: #0b0723;
  font-size: 10px;
  
  text-align: center;
}

p {
  color: #0b0723;
  font-size: 10px;
  
  margin: 1px;
}

scss 中可以定义一个“模板”样式，使用 %xxx 来定义模板名，在需要使用的时保，使用 @extend %xxx 来引用：

/* 定义 button 的基本样式 */
.button%base {
  color: #0b0723;
  font-size: 10px;
}

.btn-default {
  @extend base;
  background-color: #00ff99;
}

.btn-success {
  @extend base;
  background-color: #006aff;
}

.btn-danger {
  @extend base;
  background-color: #8418f0;
}

混合指令

@mixin 指令与 @include 指令

minix 指令是用于创建一个可复用的样式块，使用 @mixin name 来定义这个样式块，当需要使用这个样式块时，使用 @include 来引用就可以。

如下代码是最基本的使用混合拘令的方式：

// 定义一个混合指令的样式，它不会直接被编译，而是当有调用时会直接加到引入区
@mixin block-padding {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

// 在需要使用的地方，使用 @include 来引入就可以
div {
  @include block-padding;
}

@mixin 指令的传参

混合指令包含传参功能，就是可以在声明 @minix 时定义接收的参数，简单的传参方法如下

// 在声明名声明一个形参，就能在使用时调用这个形参值
@mixin block-padding($prop) {
  padding-top: $prop;
  padding-right: $prop;
  padding-bottom: $prop;
  padding-left: $prop;
}

// 在需要使用的地方，使用 @include 来引入，并传入参数
// 可以指定形参名传入，也可以不指定形参名传入
div {
  // 不使用形参名传入
  @include block-padding(10px);
}

div {
  // 使用形参名传入
  @include block-padding($prop: 20px)
}

@mixin 指令的多参数传值与指定参数传值

我们知道 @minix 可以传参，其实 @minix 可以传多个参数值

• 当不使用形参名传值时，必须依照 @minix 声明时定义的参数顺序传值
• 当使用形参名传值时，可以不依照 @minix 声明时定义的参数顺序传值

代码如下：

// 在声明名声明多个形参
@mixin block-padding($top,$right,$bottom,$) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

// 不使用形参名传值时，必须按传值顺序来传值
div {
  // 不使用形参名传入,top,right,bottom,left的值按顺序传入
  @include block-padding(10px, 20px, 30px, 40px);
}

div {
  // 使用形参名传入时，顺序可以随意
  @include block-padding($bottom: 20px, $top: 10px, $left: 30px, $right: 40px);
}

@mixin 指令的传参默认值

当我们声明的 @minix 时，声明了多个参数值，但在使用时需要把所有参数值都传入，否则会报错

若我们希望不传入某些参数时，也能给我定义默认值，就可以允许我们不全传参数值也可以

在声明形参时加上值，就是我们的默认值了：

// 在声明名声明多个形参,并设置默认值
@mixin block-padding($top:0,$right:0,$bottom:0,$left:0) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

@mixin 指令的传参数组参数

如果我们参数值特别多，且不固定，可以使用数组接参的方式来接收不固定的参数值

使用 nth(变量, 索引) 来获取数组参数的第几个值

// 如果有多个不确定的参数值，可以使用 ... 来创建数组参数
@mixin block-padding($color, $paddingV...) {
  color: $color;
  // 使用 nth 来取出数组中的成员值
  padding-top: nth($paddingV, 1);
  padding-right: nth($paddingV, 2);
  padding-bottom: nth($paddingV, 3);
  padding-left: nth($paddingV, 4);
}

// 不使用形参名传值时，必须按传值顺序来传值
div {
  // 除了 #fff 是传入 color 变量外，后面4个都被传入 $paddingV 数组中
  @include block-padding(#fff, 10px, 20px, 30px, 40px);
}

div {
  // 使用形参名传入时，顺序可以随意
  @include block-padding($color: #fff, $paddingV: 10px 20px 30px 40px);
}

运算符

等号操作符

• == 为 等于操作符
• != 为不等于操作符

scss 中支持判断逻辑，如下使用 @if 和 @else 来做判数逻辑，其中就使用了 等号操作符

div {
  @if ($bgc == #000) {  // 如果 $bgc 是 #000 ,则把bgc改为 #fff
    background-color: #fff;
  } @else {
    background-color: #000;
  }
}

比较操作符

• < 或 lt :  小于
• > 或 gt : 大于
• <= 或 lte : 小于等于
• >= 或 gte : 大于等于

逻辑操作符

• and : 逻辑 与
• or: 逻辑 或
• not : 逻辑 取反

注意：逻辑操作符会引用后面的语句，所以建议把语句用括号包含：

$index: 10;
$number: 15;
div {
  // 需要用括号包含
  @if ($index > 9) or ($number < 16) {
    background-color: #fff;
  }

  @if ($index > 9) and ($number < 16) {
    background-color: #fff;
  }
  
  // 取反，如果 $index < 5 为 true 那 not 后就为 false 了
  @if not ($index < 5) {
    background-color: #fff;
  }
}

数学操作符

• + : 加
• - : 减
• * : 乘
• / : 除
• % : 取余

数学操作符中只能用在数字类型上：纯数字、百分号、px、pt、in、em等

对于 / 除来说，它是特殊的，在一般情况下， / 不作为 除值使用，如了使用以下情况下 / 才会直正生效，否则它会原值输出

• 不会进行运算的情况，只会作为分割符使用
  • width: 10 / 5  :  会直接输出 width: 10 / 5
• 有变量的情况下会进行运算
  • width: $width / 5 : 会输出计算后的值
• 使用括号包含运算公式会进行运算
  • width: (10 / 5) : 会输出 width : 2
• 使用内置计算函数时会进行运算：
  • width: round($number: 50) / 2 : 会输出计算后的值
• 使用了其它有效的运算操作符时
  • width: 10  / 5 + 3 : 会输出 width: 5

插值语句 #{}

插值的用处非常多，它可以用在任何我们希望它的值只作为文字作用，而不是作为值作用的地方

它能用到的地方比如：选择器、属性名、属性值、注释等地方

属性名插值

比如我们的 / 除运算符，在某些情况下虽然不会运算，但是在某些情况下它会进行运算，但我们又不希望它运算

$index: 10;
$number: 15;
div {
  // 这里不会运算，会直接输出 10 / 15 的值
  width: 10 / 15;
  
  // 这里因为包含变量，会进行运算，输出运算后的值
  width: $index / $number;
}

但是我们既想用变量，又不希望它触发运算功能时，我们就可以使用  #{} 插值符

$index: 10;
$number: 15;
div {

  // 这里因为包含变量，会进行运算，输出运算后的值
  width: $index / $number;
  
  // 使用 #{} 插值语句，可以使 变量 值不参与运算，输出值 10 / 15
  width: #{$index} / #{$number};
}

选择器、属性名插值

插值语句还能用在定义选择器上，用在属性名上：

// 使用插值来定义选择器 编译后为 div
#{$element-name} {

  // 使用插值来定义属性名
  #{$property-name}: 10;

  // 使用 #{} 插值语句，同时定义属性名和属性值
  #{$property-name}: #{$property-value};
}

注释上插值

它甚至能用在注释上：

$author: TZMing;
/*
在属性中使用插值来获得值：#{$author}
编译后的注释会自动引入插值数据
 “//” 单行注释因 css 不支持不会被编译进去
 */

常见函数使用

这里只包含了常见的一些函数，如果想知道更多函数，可以到sass官网查询：https://sass-lang.com/documentation/values/lists/

颜色函数: lighten() 变亮函数

div {
  /*
  让颜色变得更亮（或更偏白）
  lighten($color, $amount)
  $amount 的值在 0%~100%之间
  */
  background-color: lighten(#123, 30%);
}

颜色函数: darken() 变暗函数

div {
  /*
  让颜色变得更暗（或更偏黑色）
  darken($color, $amount)
  $amount 的值在 0%~100%之间
  */
  background-color: darken(#123, 30%);
}

颜色函数: opacity() 减少透明函数

div {
  /*
  让颜色变得不透明（或更偏黑色）
  opacify($color, $amount)
  $amount 的值在 0~1之间
  如果本身的颜色透明度为0.1,则添加0.5透明度后，总体透明度为0.6
  总体值不能超过1,超过1之后的不透明度100%,不会改变
  */
  background-color: opacify(rgba(#123, 0.1), 0.5);
}

颜色函数: mix() 混合两种颜色函数

div {
  /*
  混合两种颜色
  */
  background-color: mix(#123, #321);
}

字符串函数：quote() 向字符串添加引号

/*
quote: 把没有引号的内容变成带引号的内容
unquote: 把带引号的内容变成没有引号的内容
通常用在变量上
 */
div {
  content: quote(没有引号的内容);  // => content: "没有引号的内容"
  content: unquote("有引号的内容"); // => content: 有引号的内容
}

字符串函数：str-length() 获取字符串长度

div {
  content: str-length("abc"); // => content: 3
}

字符串函数：str-insert() 向字符串插入字符到指定位置

div {
  content: str-insert($string: "abc", $insert: "123", $index: 2); // => ab123c
}

数学函数：percentage() 将数值转为百分比

div {
  // 转百份比
  z-index: percentage($number:10); // => 10%
}

数学函数：round() 四舍五入

div {
  // 四写五入
  z-index: round($number: 5.6); // => 6
}

数学函数：random() 返回一个随机数

div {
  // 取随机数，0~1
  z-index: random();
}

数学函数：取最大值、取最小值、向上取整、取绝对值

div {
  // 取绝对值
  z-index: abs($number: -15); // => 15
  // 向上取整
  z-index: ceil($number: 5.8); // => 6
  // 取最大值
  z-index: max(1, 2, 3, 4, 5, 6); // => 6 
  // 取最小值
  z-index: min(1, 2, 3, 4, 5, 6); // => 1
}

List函数：length 取数组长度，nth 取第几个成员，join 将两个列表连接一起，append 在末尾加入成员

div {
  // 取数组成员数
  z-index: length(12px); // => 1
  z-index: length(12px 10px); // => 2

  // 取出索引成员
  z-index: nth($list: 10 11 12, $n: 1); // => 10

  // 取出成员的索引, 因为2排在第二个，查成员为2的索引，则为2
  z-index: index(1 2 3, 2); // => 2

  // 添加一个成员
  z-index: append(10px 20px 30px, 40px); // => 10px 20px 30px 40px

  // 合并两个列
  z-index: join($list1: 10px 20px, $list2: 30px 40px);  // => 10px 20px 30px 40px
}

Map函数：map-get 通过key取value，map-merge 合并两个 map，map-values 取出所有值为一个map, map-keys 取出所有key为一个map, map-has-key 判断是否有某个key

div {
  $property: ("small": 12px, "normal":18px, "large":24px);

  // 取出 map 中的某个值
  font-size: map-get($property, "small");
  // 取出 map 中的所有值为一个 list
  font-size: map-values($property);
  // 取出 map 中的所有 key 为一个 list
  font-size: map-keys($property);
  // 合并两个 map
  font-size: map-merge($property, $property);
  // 判断是否有某个 key 
  font-size: map-has-key($property, "small");

}

自检函数：feature-exists 检查当前scss版本是否有某个函数，variable-exists 检查当前作用域中是否存在某个变量，mixin-exists 检查某个 mixin 是否存在

div {
  // 检查是否存在变量 $color
  @if (variable-exists(color)) {
    color: $color;
  }

  // 检查是否存在 mixinPadding 这个 @Mixin
  @if (mixin-exists(mixinPadding)) {
    @include mixinPadding(10px, 20px, 30px, 40px);
  }

}

流程控制指令

@if 指令

if指令比较简单此处略

  @if(){}
  @else if(){}
  @else {}

@for 指令

for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

for 指令的格式有两种：

• @for $var from <start> through <end>
  • 使用 through 时，条件范围包含 <start> 和 <end> 的值
• @for $var from <start> to <end>
  • 使用 to 时，条件范围只包含<start>的值，不包含 <end> 的值
• $var 可以是任何变量名，如 $i，<start> 和 <end> 必须是整数值

示例代码：

p{
  // => content 1 ,2 ,3
  @for $i from 1 to 4 {
    content: $i;  
  }
  
  // => content 1 2 3 4
  @for $i from 1 through 4 {
    content: $i;
  }
}

@each 指令

each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length,而 <list>是一串数组值。

示例代码：

// 定义一个颜色的 list
$color-list: red blue yellow #111 #222 #333;
// 使用遍历，把里面的颜色一个个的取出来
@each $color in $color-list {
  // 获取每个颜色的索引值
  $index: index($color-list, $color);
  // 循环生成 p 的样式，注意 $index - 1 这里要加空格，否则会把 - 号认为整体名 即 “2-1” 不是 “2” - “1”
  p#{$index - 1} {
    background-color: $color;
  }
}

注意：如果涉及运算，建议使用 calc 函数。

@while 指令

while 指令重复输出格式直到表达式返回结果为 false .这样可以实现比 @for 更复杂的循环。

示例代码：

// 定义一个变量值
$column: 12;
// 对这个值进行判断，如果为 true 则会一直循环
@while ($column > 0) {
  // 循环创建样式，使不同的样式批量生成不同的样式值
  .col-sm-#{$column} {
    width: $column / 12 * 100%;
  }
  // 每一次循环会让 $column 做减 1
  $column: $column - 1;
}

三元运算

在 scss 中也有 三元运算 的方式

格式如下：

if(条件，true时的值，false时的值)

示例代码：

$theme: "light";
p {
  // 判断，如果$theme == "light" 则 #FFF 否则 #000
  color: if($theme == "light", #FFF, #000);
}