如何剥丝抽茧玩转 Sass ？

snow来了
328 阅读6分钟

一个工具如果集成到另一个工具里面，你注定不能理解它的原理，也不会知道它内部隐秘，比css的预处理器，sass，less，你真的了解它吗？

估计大多数人用它的时候，都把它当成css了吧，这是sass的悲哀，还是咱们使用者的悲哀？毕竟你直接写个css文件，也能实现基础功能，所以何必多此一举呢？

开发的react和vue实在太多了，我不想玩他们了，我就想来个简单的，老规矩，只有简单粗暴，才能知道它最基本的用法。

第一步.准备工作安装（注意：这是windows平台下的安装）

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

image.png

image.png

image.png

image.png

傻瓜式安装成功以后，打开cmd 输入 ruby -v 接下来所有的工作都将在终端上完成，依旧傻瓜是输入就好了

image.png ruby -v gem install sass gem install compass sass -v compass -v

image.png

此时你从cmd上执行sass -v 是可以的，但是你在vscode的 termnial 上执行是报错的，说没有sass命令

image.png

解决办法，在下图这里输入：set-executionpolicy remotesigned

image.png

image.png

回车结束，如果还不行，就重启计算机。

直到vscode里面可以执行sass -v

image.png

接下来写个scss文件测试下

image.png

image.png

这就证明我们的sass已经能用了，写个index.html用一下

image.png

image.png

转换前是红色，我把output.css里面的颜色改成了蓝色。

但是你想下，在正常的项目里面我们不可能一个文件一个文件的转化吧，把他集成到webpack里面去，试试看吧！

第二步.集成webpack

安装webpack webpack-cli：

npm i webpack webpack-cli -D

在项目里面创建webpack.config.js文件

image.png

在src里面写一个index.js然后导入sass文件进去

image.png

在package.json里面加入

  "scripts": {
    "dev": "webpack --mode production",
  },

执行npm run dev

image.png

打包后的文件引入html，然后执行 npx http-server 你用webpack的内置服务也行，反正你能把项目启动起来就好。

image.png

结果：

image.png

下一节我们来仔细研究下sass的使用。

第三步. 学习 Sass

Sass 全称 Syntactically Awesome Style Sheets。

是一种 CSS 预处理器，它在 CSS 的基础上添加了一些额外的功能和语法，以提高样式表的编写效率和可维护性。

对于Sass预处理器语言，我们可以从以下几个方面进行入手。

  1. 变量（Variables） ：Sass 允许我们定义和使用变量，通过在变量中存储常用的值，可以轻松地重用和修改这些值，提供了更强大的样式控制能力。
  2. 嵌套规则（Nesting） ：Sass 允许我们在样式规则中进行嵌套，以更好地组织和编写选择器，避免样式冗余。
  3. 混合（Mixins） ：Sass 的混合功能允许创建可重用的样式片段，类似于函数。通过调用混合，可以将该样式片段插入到不同的选择器或样式规则中。
  4. 继承（Inheritance） ：Sass 的继承功能允许创建基于现有样式规则的新规则，通过继承已有的样式，可以减少重复代码并提高样式表的可维护性。
  5. 导入（Import） ：Sass 允许我们使用 @import 导入其他 Sass 文件，将多个文件合并为一个文件，使样式表更具结构和模块化。
  6. 运算（Operations） ：Sass 允许在样式表中进行简单的数学运算，如加、减、乘、除等操作，使样式表更灵活和强大。
  7. 条件语句（Control Directives） ：Sass 提供了条件语句（如 @if、@else、@for、@each 等）来根据条件或循环来动态生成样式。

1.变量

变量声明

Sass变量声明以开头：开头：color: #F666;在声明变量的时候，咱们要遵守最基本的变量声明规范，比如：

$background-color: #ffffff;
$menu-item-height: 40px;

小写，用中划线链接，避免使用缩写和简写，尽量采用一致的命名规范，提高代码的可读性和维护性。

变量使用

在css样式里面直接获取变量就好。

#main {
  width: $highlight-color;
}
变量插值

类名和样式的值，都可以写成活的。

image.png

还可以做数据计算

image.png

2.作用域

Sass 也会分作用域，有局部作用域和全局作用域之分，它们的可见范围取决于变量在代码中的声明位置。 不像css一样只要映入就是全局有效。

局部作用域

image.png

全局作用域是在scss文件顶部定义变量，整个scss文件都可以用。

image.png

Sass的数据计算，calc() 和 math.div()

image.png

calc()函数是 CSS 自带的，所以我们无需引入其他第三方模块即可使用

image.png

math.div()函数是 Sass 自带的函数，如果我们使用这种方式需要引入第三方模块，@use 'sass:math'，在sass里面用@use引入模块。

#### 颜色运算

  1. Lighten（变亮）和 Darken（变暗）：

    • lighten($color, $amount)：将颜色变亮，$amount 参数表示变亮的程度。
    • darken($color, $amount)：将颜色变暗，$amount 参数表示变暗的程度。

  2. Saturate（饱和度增加）和 Desaturate（饱和度减少）：

    • saturate($color, $amount)：增加颜色的饱和度，$amount 参数表示增加的程度。
    • desaturate($color, $amount)：减少颜色的饱和度，$amount 参数表示减少的程度。

  3. Adjust Hue（调整色调）：

    • adjust-hue($color, $degrees)：调整颜色的色调，$degrees 参数表示调整的角度。

  4. Mix（混合颜色）：

    • mix($color1, $color2, $weight)：将两个颜色按给定的权重混合在一起，$weight 参数表示混合的权重。

  5. Opacity（透明度）：

    • rgba($color, $alpha)：设置颜色的透明度，$alpha 参数表示透明度值。

image.png 编译后变成

image.png

3.嵌套规则

就是在父元素里面直接嵌套写子元素的样式，原生的css用空格单独获取子元素

.container {
  width: 100%;

  .title {
    font-size: 24px;
    color: #333;
  }
}

pk

// 原生css不能嵌套的
.container {
  width: 100%;
}
.container .title {
    font-size: 24px;
    color: #333;
 }

4.父级选择器 &

这个嵌套式和这个应该是在日常开发中使用最多的2个了，是不是？

用&来表示父级选择器，获取嵌套规则中使用父级选择器的上下文。

image.png

& 代表的是所有父层级，而不是仅仅代表最近的一级。

image.png

image.png

在使用sass的时候，如果你不确定它到底代表啥，你就直接用 sass命令编译下，就会出现编译后的css代码。

5.指令

指令可以说是 Sass 核心中的核心，大部分功能都是由其完成实现。指令大体分为了以下几类：

image.png

你有没有发现，有了这些指令，我们就可以像写js一样写css了，可以给他们加逻辑了，听起来很棒的样子，要不要赶紧试试看？

@if

在条件语句中，<condition>可以是任何布尔表达式，可以使用比较运算符（如==、!=、>、<等）和逻辑运算符（如and、or、not）来构建条件。

image.png

循环：@for 、@each 和 @while

@for

image.png

编译后

image.png

@each

image.png

编译后

image.png

@while

image.png

image.png

引入指令

用@import "filename"可以引入相对路径下的 Sass 或 CSS 文件，可以省略文件扩展名。

本地的

@import "components/buttons";

外面的

@import url("http://xxxxx");
混合指令

混合说白了就是js里面的对象合并，相当于 Object.assign(obj1, obj2) obj2把obj1覆盖掉，在sass里面用@import 指令将定义好的样式覆盖到别的样式上面。

首先用@mixin定义一个混合器

image.png

然后用@include将定义好的混合器插入到样式表里面，相当于把上面的对象，复制到下面这里来了

image.png

如果定义的混合器里面传递参数咋办？原来的对象变成了函数呗，这个过程像不像js？

定义

image.png

使用

image.png

函数指令

定义函数

image.png

使用函数

image.png

继承指令

@extend是 Sass 中一个功能强大的指令，它允许样式规则继承另一个样式规则的属性，以便在编写样式时实现代码的重用和减少重复。使用@extend将一个选择器的样式规则继承到另一个选择器上。

image.png

有没有发现，一个css都快搞成js了？学海无涯呀，但是感觉大部分功能我们并不使用它，就很鸡肋，一方是我们的编码习惯决定的，还有一方面是人的本性决定的。懒呗。

avatar
文章
阅读
粉丝