2023.7 系统学习下sass

2023.7 系统学习下sass

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。

最近，还是再看源码，发现element-plus样式系统使用的sass好多东西都没用过，项目中常用的也就嵌套和变量语法吧。然后就重新系统学了一下sass，一些常用的命令如下做了总结：

系统学习下sass

常用sass，但是发现只会用变量和嵌套语法，最近看element源码，参加了个民间ui库的搭建，负责组件库样式系统的搭建，才发现sass提供的很多函数和功能我们都没用过。

前言

使用sass,如果你用的是vite创建的项目，那么不用单独安装，可以直接使用sass

如果你使用的是webpack搭建的项目，使用sass需要安装sass-loader sass

在webpack.config.js中需要做如下配置,更多内容参考 webpack中文文档，sass-loader

module.exports = {
  module: {
    rules: [
      {
        test: /.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};

语法学习

嵌套规则

.card {
  background-color: #646cff;
  button {
    background-color: #f9f9f9;
  }
}

编译后

.card {
  background-color: #646cff;
}
.card button {
  background-color: #f9f9f9;
}

父选择器&

&必须是第一个字符

.card {
  background-color: #646cff;
  button {
    background-color: #f9f9f9;
  }
    //移入card改变背景色
  &:hover {
    background-color: aquamarine;
  }
}

编译后

@charset "UTF-8";
.card {
  background-color: #646cff;
}
.card button {
  background-color: #f9f9f9;
}
.card:hover {
  background-color: aquamarine;
}

属性嵌套

@charset "UTF-8";
.card {
  background-color: #646cff;
  button {
    background-color: #f9f9f9;
    font: {
      family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      size: 40px;
      weight: bold;
    }
  }
}

编译后

@charset "UTF-8";
.card {
  background-color: #646cff;
}
.card button {
  background-color: #f9f9f9;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
}

占位符选择器%

必须使用@extend调用，后面介绍

注释/**/和//

多行和单行注释，编译后单行注释会消失，多行注释保留

.card {
  background-color: #646cff;
  button {
    background-color: #f9f9f9;
    font: {
      family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      size: 40px;
      weight: bold;
    }
  }
  /*测试多行注释*/
  //测试单行注释
  &:hover {
    background-color: aquamarine;
  }
}

编译后

@charset "UTF-8";
.card {
  background-color: #646cff;
  /*测试多行注释*/
}
.card button {
  background-color: #f9f9f9;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
}
.card:hover {
  background-color: aquamarine;
}

sassScript

可作用于任何属性，允许属性使用变量，算数运算等额外功能

变量$

$bg_color: #646cff;
.card {
  background-color: $bg_color;
}

编译后

@charset "UTF-8";
.card {
  background-color: #646cff;
}

数据类型

• 数字类型、字符串、颜色、布尔、空值、数组、maps

字符串

摘自官网的解释，有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；与无引号字符串 (unquoted strings)，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

意思就是为了方便mixin时使用，#{}包裹的字符，解析时会被解析不带引号的

$bg_color: #646cff;
@mixin button-color($selector) {
  .card #{$selector} {
    background-color: $bg_color;
  }
}

@include button-color(".button-color");

编译后

.card .button-color {
  background-color: #646cff;
}

支持+ - * / %运算,可以自动在不同单位间转换

单位转换

$bg_color: #646cff;
.card {
  background-color: $bg_color;
  button {
    background-color: #f9f9f9;
    font-size: 10px + 10pt;
    color: #010203 * 2;
  }
}

转换后，单位会按照

.card {
  background-color: #646cff;
}
.card button {
  background-color: #f9f9f9;
  font-size: 23.3333333333px;
  
}

官网上面显示使用颜色值可以相加color: #010203 * 2，本地测试会报错

1676881002392.png

函数

全局函数

hsl/hsla定义hsl颜色，hsla加上透明度

rgb/rgba定义rgb颜色，rgba加上透明度

插值#{}

类似于js的模板字符串

$bg_color: #646cff;
$name: card;
#{$name} {
  background-color: $bg_color;
  button {
    background-color: #f9f9f9;
    font-size: 10px + 10pt;
    color: #010203;
  }
}

编译后

card {
  background-color: #646cff;
}
card button {
  background-color: #f9f9f9;
  font-size: 23.3333333333px;
  color: #010203;
}

!default

变量声明前如果设置了默认值就使用设置的值，没设置就使用默认值

//这行代码就相当于是默认值前设置了值
$bg_color: #f9f9f9;
$bg_color: #646cff !default;
.card {
  background-color: $bg_color;
}

编译后

.card {
  background-color: #f9f9f9;
}

指令

@import

不能在混合指令或控制命令中嵌套@import

导入其他scss文件，会和当前文件进行合并

以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

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

@import "./test.scss";
$bg_color: #f9f9f9;
$bg_color: #646cff !default;
.card {
  background-color: $bg_color;
}

编译后，当前文件下的内容会被后编译

a:hover {
  color: #535bf2;
}

.card {
  background-color: #f9f9f9;
}

另一种用法：

$bg_color: #f9f9f9;
$bg_color: #646cff !default;
.card {
  background-color: $bg_color;
  @import "./test.scss";
}

编译结果

.card {
  background-color: #f9f9f9;
}
.card body {
  color: aquamarine;
}
.card body a:hover {
  color: #535bf2;
}

分音

官方：如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

我将test.scss命名修改为_test.scss，引用不变，但是编译的结果没变，不太理解这句话的意思

@media

同css用法一样，只是配合嵌套语法使用更方便

$bg_color: #646cff;

.card {
  background-color: #646cff;
  //编写横屏样式
  @media screen and (orientation: landscape) {
    background-color: red;
  }
}

编译为

.card {
  background-color: #646cff;
}
@media screen and (orientation: landscape) {
  .card {
    background-color: red;
  }
}

学到了媒体设备不仅仅可以控制到屏幕，还可以检测到横竖屏（orientation）以及页面的设备像素比（device-pixel-ratio）更多教程参考

@extend

复用样式，发现合并规则就是在原有对象后面追加元素

$bg_color: #646cff;

.card {
  background-color: #646cff;
  button {
    @extend .card;
    color: #ffffff;
  }
}

编译后

.card, .card button {
  background-color: #646cff;
}
.card button {
  color: #ffffff;
}

可以多重延伸

$bg_color: #646cff;

.card {
  background-color: #646cff;
  .seriousError {
    color: #ffffff;
  }
  button {
    @extend .card;
    @extend .seriousError;
  }
}

编译后

.card, .card button {
  background-color: #646cff;
}
.card .seriousError, .card button {
  color: #ffffff;
}

继续延伸, b延伸a，c延伸b

$bg_color: #646cff;

body {
  background-color: aquamarine;
  .card {
    @extend body;
    .seriousError {
      color: #ffffff;
    }
    button {
      @extend .card;
    }
  }
}

编译后

body, body .card, body .card button {
  background-color: aquamarine;
}
body .card .seriousError {
  color: #ffffff;
}

可以延伸选择器的谋和元素

$bg_color: #646cff;

body .card button {
  background-color: bg_color;
  p {
    @extend button;
  }
}

编译后

body .card button, body .card button p {
  background-color: #646cff;
}

不可以使用选择器列来进行延伸

.card .bar{}这样的选择器不能被延伸
//这样的可以
    .card .bar{
        @extend a
    }

@extend-only extend的内容配合%占位符相当于只是替换定义某一块的内容，不同部分抽离

$bg_color: #646cff;

body .card%extendName {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extendName;
  background-color: $bg_color;
}

编译后

body .card.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  background-color: #646cff;
}

!optional

这样会生成新的选择器，如果不配置.notice类会报错，因为你的代码中没有查找到对应的选择器，如果你配了选择器会有新的选择器生成

body {
  color: blue;
  @extend .notice ;
}

1676895991287.png

使用!optional不生成新选择器

body {
  color: blue;
  @extend .notice !optional;
}

例如我加了.notice就会编译成这样

.notice {
  font-size: 5em;
}
body {
  color: blue;
  @extend .notice !optional;
}
//编译后
.notice, body {
  font-size: 5em;
}

body {
  color: blue;
}

使用指令延伸

不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS

@media只能延伸同级的选择器

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

这样不行，media用的外层的选择器

.error {
  border: 1px #f00;
  background-color: #fdd;
}
@media print {
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

@at-root

会把元素给提到顶层

body {
  color: blue;
  @at-root button {
    font-weight: bold;
  }
}
//编译后
body {
  color: blue;
}
button {
  font-weight: bold;
}

@at-root (without: ...) and @at-root (with: ...)

@media print {
  .card {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}
//编译后
@media print {
  .card {
    width: 8in;
  }
}
.card {
  color: red;
}

控制指令

@if ... @else

.card {
  @if false {
    width: 8in;
  } @else {
    width: 10in;
  }
}
//编译后
.card {
  width: 10in;
}

@for $var from 开始值 through 结束值

@for $i from 2 through 3 {
  .button-#{$i} {
    width: 2em * $i;
  }
}
//编译后
.button-2 {
  width: 4em;
}

.button-3 {
  width: 6em;
}

@each

//例子举得不是很恰当，哈哈
body {
  @each $fontFamily in Arial, "Helvetica Neue", Helvetica, sans-serif {
    font-family: $fontFamily;
  }
}
//编译后
body {
  font-family: Arial;
  font-family: "Helvetica Neue";
  font-family: Helvetica;
  font-family: sans-serif;
}

参数还可以使用解构，具体例子参考官网

@while

@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}
//编译后
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

@mixin

//定义通用样式
@mixin bgColor {
  background-color: #646cff;
}

//使用include引入
.card {
  @include bgColor;
  button {
    @include bgColor;
  }
}

加入参数

@mixin bgColor($color) {
  background-color: $color;
}

.card {
  @include bgColor(red);
  button {
    @include bgColor(green);
  }
}
//编译后
.card {
  background-color: red;
}
.card button {
  background-color: green;
}

向混合样式中加入内容，很像插槽

@mixin bgColor($color) {
  body {
    background-color: $color;
      //这边插入content
    @content;
  }
}

.card {
    //这边引入时可以自定义一些其他样式
  @include bgColor(red) {
    color: $bg_color;
  }
}

//编译后
.card body {
  background-color: red;
  color: #646cff;
}

简写：@mixin可以用=表示，@include可以用+标识

函数指令

$basic: 20px;
//定义一个函数，在element-plus源码经常看到
@function generator-width($width) {
  @return $basic + $width;
}

button {
  width: generator-width(20px);
}

//编译后
button {
  width: 40px;
}

输出格式

命令sass .\src\demo.scss:output.css --style compressed

将我们运行的sass打包成output.css文件，然后使用压缩格式输出

用来定义编译后的样式格式，会自动进行缩进啥的

:nested保持嵌套格式

:expanded常见的格式，顶头输出

:compact每条规则占一行

:compressed 删除无意义代码，压缩后的