SCSS初探-2

时间: 2020-08-30｜tag：｜56次围观｜0 条评论

SCSS选择器扩展

了解BEM 命名法

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

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

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

SCSS初探-2插图
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的优缺点

优点：

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

缺点：

  1. 书写十分繁琐

  2. 层级多不易阅读

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

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

  1. Block 不使用短横线连字符，而使用驼峰法。如 work-card => wordCard

  2. element 不使用双下横线__，而使用单中横线-。如 wordCard-avatar

  3. 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本身也只能支持多行注释(/* */)

  1. 多行注释?

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

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

SCSS运算

加+ 减- 乘x

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

.xx {  width: 100px*10px}

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

除法

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

  1. 如果值，或值的一部分，是变量或者函数的返回值 ? $width/3

  2. 如果值被圆括号包裹 ? (120px/3)

  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-改变颜色函数

版权声明：本文为博主原创文章，未经博主许可不得转载

文章转载于:https://www.jianshu.com/p/cad45c5da8b6

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《SCSS初探-2》
　 　

还没有人抢沙发呢~