SCSS初探-2

SCSS选择器扩展

了解BEM 命名法

Bem 是块（Block）、元素（Element）、修饰符（Modifier）的简写，由 Yandex(俄罗斯) 团队提出的一种前端 CSS 命名方法论。

.block {} //块（block）
.block__element {} //元素（element）
.block--modifier {} //修饰符（modifier）

下面通过一个实例(一张工牌)来看
CSS 选择器 BEM命名法则

Scss嵌套相关值 CSS选择器BEM命名法则-20200613.png

<div class="work-card">
  <figure>
    <img src="/xxx/xsjk/png" alt="" class="work-card__avatar">
    <figcaption class="work-card__name work-card__name--active">库里</figcaption>
  </figure>
  <div class="work-card__title">运营主管</div>
  <div class="work-card__deparment">运营一部门</div>
</div>

根据上图的效果以及HTML代码，.wordCard即是指代BEM中的B 即 Block；.workCard的后代元素.workCard__avatar(img)、.workCard__name(figcaption)中的avatar、name就是element；而workCard__name--active中的active就是修饰符modifier，表示样式发生变化，如鼠标放上去字体颜色发生变化、选中以后颜色发生变化等

BEM的优缺点

优点：

命名更加规范，层级一目了然，特别适应于团队较大的时候

缺点：

书写十分繁琐
层级多不易阅读

work-card__name--active {
 /* */
}

其实可以依然遵循 BEM的原则，但是适当的改良

Block 不使用短横线连字符，而使用驼峰法。如 work-card => wordCard
element 不使用双下横线__，而使用单中横线-。如 wordCard-avatar
modifier 不使用双中横线--，而使用.xxx即在该需要修饰的元素中再添加一个class。如work-card__name--active => workCard-name.active

注意：modifer 应该是在需要修饰的元素中再添加一个class

提前需要制定好一些常用的词如 active hover selected ..., 不能单独设置样式如.active {}、.hover {}

🌰

<figcaption class="workCard-name active">库里</figcaption>

SCSS嵌套选择器与 & 父选择器

SCSS 选择器的嵌套，在一定程度上与BEM命名法相似。所以理解了BEM命名法则，SCSS嵌套也就基本了解

实例🌰demoSCSS 选择器嵌套-2

HTML结构

<div class="workCard active">
  <figure>
    <img class="workCard-avatar" src="/xx/uu" alt="库里头像">
    <figcaption class="workCard-name">库里</figcaption>
  </figure>
  <div class="workCard-title">职位：运营主管</div>
  <div class="workCard-deparment">部门：运营一部门</div>
</div>

SCSS嵌套选择器与 & 父选择器🌰

.workCard {
  // .active {}
  // &.active {}
  &-name {
    font-size: 24px;
    $red: #f60;
    color: greenyellow;
    &:hover {
    // &:hover 这里的 & 代表 .workCard-name
      color: $red;
    }
  }
}

如上面的SCSS所示，& 代表父选择器。&-name中的 & 代表 .workCard；&:hover中的 & 代表.workCard-name

如是上面SCSS所示，被注释的部分 .active {} 与 &.active {}，则.active表示为.workCard的后代元素；而&.active表示.workCard元素本身还有另一个类active

<div class="workCard active">

SCSS嵌套属性

在书写CSS时 background属性书写方式一般有如下两种方式，直接简写 background: pink url('xxx') no-repeat center cover;
或是将全部属性展开来写

background-color: #a8d8cb;
background-image: url(https://upload-images.jianshu.io/upload_images/14105326-692efd0c9028a546.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/236/format/webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;

对于这类属性如bacground、font...，可以在SCSS中使用属性嵌套的方式
🌰

.workCard {
   background: {
    color: #777;
    // size: cover;
    // image: url('xx/xx')；
    // repeat: no-repeat;
  }
}

SCSS变量作用域-局部变量与全局变量

SCSS中的变量也是有作用域的通常分为：局部作用域 与 全局作用域!global(在局部作用域的后面添加一个 !global，局部作用域就会变成全局作用域)

🌰

.workCard {
  &-name {
    font-size: 24px;
    $red: #f60;
    color: greenyellow;
  }
  &-title {
    $red: red;
    border: 2px solid change-color($red, $red: 255, $green: 0, $blue: 255);
    background-color: fade-out($color: $red, $amount: 0.38)
  }
}

&-name与&-title中的变量 $red都是只能在各自的作用域内部可以使用。

&-name即是 .workCard-name。其中$red是变量，并给变量赋予了一个值，在 .workCard-name以及后代子元素中也可以使用这个变量。当然.workCard-name的兄弟元素以及其他无关元素是无法使用这个 $red变量的。

如果是 $red: #f60 !global; 则表示 $red 是一个全局变量。在任何位置都可以使用(不建议使用)

SCSS注释

SCSS分为多行注释与单行注释(与JavaScript的注释方式相同)，而CSS本身也只能支持多行注释(/* */)

多行注释🌰

多行注释会完整输出到编译后的 CSS 文件中，但是如果想在压缩输出模式下保留这条注释并输出到 CSS 文件中。应该在多行注释的第一个字符前添加一个 !，否则SCSS编译成CSS后也会删除注释

.workCard {
  /*
  多行注释
  多行注释
  哈哈哈
  */
}

单行注释

.workCard {
  // 单行注释1
  // 单行注释2
  // 单行注释3
}

SCSS运算

加+ 减- 乘x

SCSS的加减乘直接可以运算，二不需要借助类似CSS的clac()函数。只是在乘法的时候注意单位就行

.xx {
  width: 100px*10px
}

如果如何代码所示则会报错，因为width的一个长度单位，而上面的是 100px*10px一个平方值

除法

除法运算符(如果是下面的三种情况，可以直接使用 / 作为除号直接相除)

如果值，或值的一部分，是变量或者函数的返回值 🌰 $width/3
如果值被圆括号包裹 🌰 (120px/3)
如果值是算数表达式的一部分 🌰 1px+1px、

.workCard {
  &-deparment {
    // 在这个workCard-description选择器中，可以直接引用变量 $d ， 如果对样式有改动的需求，也只需要改动 $d的值即可
    $d: 90px;
        $font-size: 20px;
        $line-height: 1.5;
    width: $d;
    height: $d - 45px;
    border-radius: $d / 18;  
    border: 2px solid blue;
        font: #{$font-size}/#{$line-height};
    $red: red;
    color: $red;
    &::before {
      content: '['
    }
    &::after {
      // 字符串插值
      // content: '" #{$green}'
      content: ']'
    }
  }
}

字符串插值

在上面的除法运算中需要注意的是：主要如果使用的变量的同时要保证 / 不代表除法运算符，而是完整的编译到CSS文件中则使用#{} 插值语句将变量包裹起来

就如上面除法中的demo

font: #{$font-size}/#{$line-height};
&::before {
      content: '['
    }
    &::after {
      // 字符串插值
      // content: '" #{$green}'
      content: ']'
    }

通过伪类可以对目标元素插入字符，也可以插入变量。变量需要被插值语句#{/* $xx */}包裹住

参考：
Sass教程 Sass中文文档 | Sass中文网

Sass基础——颜色函数 | Sass中文网

Sass: sass:color-改变颜色函数