SCSS学习笔记1.scss和sass是什么关系 Sass（Syntactically Awesome Styleshe

1.scss和sass是什么关系

Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器。

Sass有两种语法：

缩进语法（缩进式）：使用缩进来表示嵌套关系，而不是花括号和分号。
SCSS是一种基于CSS语法的Sass的扩展，允许使用标准的CSS语法，并在此基础上增加了Sass的功能。SCSS与CSS完全兼容，这意味着任何有效的CSS都是有效的SCSS。SCSS的文件扩展名是 .scss。

2.变量

scss使用$符号来标识变量：

$base-color: #eee;

以空格分割的多个属性值定义变量：

$basic-border: 1px solid black;

$block-base-padding: 12px 10px 10px 4px;

以逗号分割多个属性值：

$base-font: "Arial", sans-serif;

变量名用中划线还是下划线分隔

用中划线声明的变量可以使用下划线的方式引用，反之亦然。

$base_color: #333;

p {
  color: $base-color;
}

提升变量的作用域 !global

使用！global 声明全局变量

p {
  // 使用！global 声明全局变量
  $base-color: red !global;
  color: $base-color;
}

h1 {
  color: $base-color;
}

默认值 !default

可以提前给变量给一个默认的值，如果以后我们更改了该变量的值，就用改变以后的值，否则就用默认的值。

$base-color: #333 !default;

$base-color: #eee;
h1 {
  color: $base-color;
}

3.嵌套css规则

属性嵌套

原始css：

.container a {
  color: red;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

用scss写：

.container {
  a {
    color: red;
    font: {
      size: 16px;
      weight: bold;
      family: Arial, sans-serif;
    }
  }
}

这种写法相当于提取公因式，把相同的那个字提取出来🤔。

4.注释

一句话，跟JavaScript一样。
但是注意，//这是注释，这种注释不会编译到css文件中。

5.条件判断

$black-mode: false;

html {
    @if $black-mode {
        background-color: #000;
        color: #fff;
    }
    @else {
        background-color: #fff;
        color: #000;
    }
}

在html页面中变化：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="scss/get-starter.css" />
</head>
<body>
    <h1>欢迎来到我的博客</h1>
</body>
</html>

当$black-mode: fasle;时:

当$black-mode: true;时:

但是在开发中这种用法应该很少，因为项目上线以后，我们的项目中的都是css文件。不可能这样进行条件判断。

6.导入文件

以前好象用@import，但是现在废弃掉了，换成了@use：

用@use导入：

@use "get-starter.scss";

可以省略文件名后缀.scss:

@use "get-starter";

用下划线`_`命名的文件

有时候我们把一个文件专门用来定义全局变量，比如我们创建了一个scss文件variables.scss，里面写了很多变量：

$base-color: #333;

$border-radius: 5px;

默认情况下每个scss都会创建一个css文件。同样上面的variables.scss也会创建一个css文件，但是这个css文件是空的。这个显然不合理，所以我们用_variables.scss命名这个scss文件，这样就不会创建一个css文件了。

$base-color: #333;

$border-radius: 5px;

导入的时候还是用variables.scss来导入。

@use "variables";

所以，不能同时创建两个variables.scss和_variables.scss。
使用导入的变量（这个Dart Sass中才有效）：

@use "variables";

body {
  color: variables.$base-color;
}

7.混合器

混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。
比如定义了一个混合器block:

@mixin block {
  width: 500px;
  height: 500px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
}

用@include使用这个混合器：

.container {
  @include block;
  color: red;
}

生成的css文件：

.container {
  width: 500px;
  height: 500px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: red;
}

8.map

scss中，map是一种非常有用的数据结构，类似于 JavaScript 中的对象（Object）。它允许存储一组键值对（key-value），可以方便地管理配置、主题色、尺寸等数据。可以使用 map 来将不同的值映射到各自的键上，增强代码的可维护性和灵活性。

定义map

比如，我创建了一个map来存储我的主题色：

$colors: (
  'primary': #006FEE,
  'success': #17c964,
  'warning': #f5a524,
  'danger': #f31260,
  'info': #909399
);

map中的key可以用单引号或者双引号括起来，也可以不用加任何引号。但是官方的建议是尽量加引号：

虽然不是很看懂说什么，但是官方还是推荐用引号括起来。

map-get访问map中的值

可以使用 map-get 函数来访问 map 中的值。只需传入 map 和键名。

例如：

@use "variables";

.card {
  margin: 0 auto;
  // 获取map中的值
  background-color: map-get(variables.$colors, 'primary');
  height: 200px;
  width: 500px;
}

map-merge修改map

SCSS 不允许直接修改 map，但是可以创建一个新的 map，包含原 map 的值并进行修改。可以使用 map-merge 来合并两个 map。

$colors: (
  'primary': #006FEE,
  'success': #17c964,
  'warning': #f5a524,
  'danger': #f31260,
  'info': #909399
);

// 修改map
$updated-colors: map-merge($colors, (
  'white': #fff
))

在index.scss中使用：

@use "variables";

.card {
  margin: 0 auto;
  background-color: map-get(variables.$colors, 'primary');
  height: 200px;
  width: 500px;
  h2 {
    color: map-get(variables.$updated-colors, 'white');
  }
}

map.remove删除map中的值

$colors: (
  'primary': #006FEE,
  'success': #17c964,
  'warning': #f5a524,
  'danger': #f31260,
  'info': #909399
);

$updated-colors: map-merge($colors, (
  'white': #fff
));

// 删除white颜色
$updated-colors: map-remove($updated-colors, 'white')

在index.scss中使用：

@use "variables";

.card {
  margin: 0 auto;
  background-color: map-get(variables.$colors, 'primary');
  height: 200px;
  width: 500px;
  h2 {
    color: map-get(variables.$updated-colors, 'white');
  }
}

使用map的好处

为什么要用map，直接定义变量然后使用不好吗？

1.组织和结构化数据：

map 使你能够以更结构化的方式组织和存储多个相关的值。例如，你可以将一组颜色存储在同一个 map 中，而不需要为每个值单独创建变量。

$colors: (
  'primary': #006FEE,
  'success': #17c964,
  'warning': #f5a524,
  'danger': #f31260,
  'info': #909399
);

如果使用变量是这样的：

$primary: #006FEE;
$success: #17c964;
$warning: #f5a524;
$danger: #f31260;
$info: #909399;

使用 map 的好处是，它把这些相关的值放在一个结构化的对象中，便于管理、扩展和迁移。

2.提高可维护性：

当你有许多相关的值时，使用 map 可以减少重复和提高代码的可维护性。你可以集中管理所有相关的配置，而不需要在多个地方修改变量。如果要添加、删除或更新某个值，只需在 map 中进行更改即可。

$colors: (
  'primary': #006FEE,
  'success': #17c964,
  'warning': #f5a524,
  'danger': #f31260,
  'info': #909399,
);

// 添加新的颜色
$colors: map-merge($colors, (
  'white': #fff
));

3.更强的可扩展性：

使用 map 可以使代码更具扩展性，尤其在处理动态数据时。例如，假设你有一个包含不同主题的 map，你可以根据需求动态地切换不同的主题，而不需要手动管理大量的变量。

9.命名空间

什么是命名空间

命名空间（Namespace） 是一个编程概念，用来组织和管理程序中的标识符（如变量、函数、类等）。它的作用是防止命名冲突，确保不同部分的代码中使用的标识符不会互相干扰。尤其在大型项目或多个模块/库的情况下，命名空间非常有用。

这个有点像ES Module中的概念，就是防止全局污染或者命名冲突等等。

scss中的命名空间

1. 默认命名空间：

由 SCSS 自动为模块生成的命名空间，就是我们导入某一个scss文件的时候的文件名，虽然不严谨，也可以这么理解。

比如：
_variables.scss

$colors: (
  'primary': #006FEE,
  'success': #17c964,
  'warning': #f5a524,
  'danger': #f31260,
  'info': #909399,
);

$font-semibold: 600;

在index.scss中进行导入

@use "variables";

.card {
  margin: 0 auto;
  height: 200px;
  width: 500px;
  background-color: map-get(variables.$colors, 'primary');
  color: #fff;
  font-weight: variables.$font-semibold;
}

在index.scss中我们是这样导入的：@use "variables";，这里的variables就是scss自动为该模块起的命名空间。

我们访问该命名空间的中的变量的时候，需要带上variables才能访问该变量。
比如：

background-color: map-get(variables.$colors, 'primary');
font-weight: variables.$font-semibold;

2. 自定义命名空间：

有时候scss自动给我们生成的命名空间可能比较长，这个时候我们可以自定义命名空间，比如：

// 自定义命名空间，取名v
@use "variables" as v;

.card {
  margin: 0 auto;
  height: 200px;
  width: 500px;
  background-color: map-get(v.$colors, 'primary');
  color: #fff;
  font-weight: v.$font-semibold;
}

以后，我们不用写variables.$font-semibold;了，可以直接写 v.$font-semibold;

3.不使用命名空间（不推荐）：

每次引用这个变量的时候，都带上命名空间很麻烦，这个时候我们可以选择不使用命名空间。比如：

@use "variables" as *;

.card {
  margin: 0 auto;
  height: 200px;
  width: 500px;
  background-color: map-get($colors, 'primary');
  color: #fff;
  font-weight: $font-semibold;
}

但是，这种做法在大型项目中是不推荐的，因为@use "variables" as *;相当于把该模块中的自定义变量原封不动都引进来了，这种做法很可能会导致命名冲突。

10. @forward

官网讲解：sass-lang.com/documentati…

11. @each循环

一般多用于生成类名：

比如：

$primary: #326dee;
$secondary: #1ac888;
$error: #d32752;
$info: #f6c31c;

$colors: (
  'primary': $primary,
  'secondary': $secondary,
  'error': $error,
  'info': $info
);

@each $key, $val in $colors {
  .text-#{$key} {
    color: $val;
  }

  .bg-#{$key} {
    background-color: $val;
  }

  .border-#{$key} {
    border-color: $val;
  }
}

编译后生成的类名：

.text-primary {
  color: #326dee;
}

.bg-primary {
  background-color: #326dee;
}

.border-primary {
  border-color: #326dee;
}

.text-secondary {
  color: #1ac888;
}

.bg-secondary {
  background-color: #1ac888;
}

.border-secondary {
  border-color: #1ac888;
}

.text-error {
  color: #d32752;
}

.bg-error {
  background-color: #d32752;
}

.border-error {
  border-color: #d32752;
}

.text-info {
  color: #f6c31c;
}

.bg-info {
  background-color: #f6c31c;
}

.border-info {
  border-color: #f6c31c;
}

原来ui框架，比如Bootstrap，Bluma等的类名是这样生成的。

12.@for循环

@for循环跟@each配合使用，比如下面生成相似tailwindcss的调色板：

$primary: #326dee;
$secondary: #1ac888;
$error: #d32752;
$info: #f6c31c;

$colors: (
  'primary': $primary,
  'secondary': $secondary,
  'error': $error,
  'info': $info
);

@each $key, $val in $colors {
  @for $i from 1 through 9 {
    .text-#{$key}-light-#{$i}00 {
      color: mix(white, $val, $i*10);
    }
  }
}

编译后的css：

.text-primary-light-100{color:#477cf0}.text-primary-light-200{color:#5b8af1}.text-primary-light-300{color:#7099f3}.text-primary-light-400{color:#84a7f5}.text-primary-light-500{color:#99b6f7}.text-primary-light-600{color:#adc5f8}.text-primary-light-700{color:#c2d3fa}.text-primary-light-800{color:#d6e2fc}.text-primary-light-900{color:#ebf0fd}.text-secondary-light-100{color:#31ce94}.text-secondary-light-200{color:#48d3a0}.text-secondary-light-300{color:#5fd9ac}.text-secondary-light-400{color:#76deb8}.text-secondary-light-500{color:#8de4c4}.text-secondary-light-600{color:#a3e9cf}.text-secondary-light-700{color:#baefdb}.text-secondary-light-800{color:#d1f4e7}.text-secondary-light-900{color:#e8faf3}.text-error-light-100{color:#d73d63}.text-error-light-200{color:#dc5275}.text-error-light-300{color:#e06886}.text-error-light-400{color:#e57d97}.text-error-light-500{color:#e993a9}.text-error-light-600{color:#eda9ba}.text-error-light-700{color:#f2becb}.text-error-light-800{color:#f6d4dc}.text-error-light-900{color:#fbe9ee}.text-info-light-100{color:#f7c933}.text-info-light-200{color:#f8cf49}.text-info-light-300{color:#f9d560}.text-info-light-400{color:#fadb77}.text-info-light-500{color:#fbe18e}.text-info-light-600{color:#fbe7a4}.text-info-light-700{color:#fcedbb}.text-info-light-800{color:#fdf3d2}.text-info-light-900{color:#fef9e8}

13.mix颜色混合

mix 是 Sass 中的一个非常实用的颜色函数，用于将两种颜色按指定比例混合

mix 的语法如下：

mix($color1, $color2, $weight)

参数：

$color1：第一个颜色，可以是任何有效的颜色（如 #ff0000 或 rgb(255, 0, 0)）。
$color2：第二个颜色，同样可以是任何有效的颜色。
$weight：颜色混合的比例，通常是一个数字，范围是 0 到 100，表示混合的重量（权重）。
- 0 表示完全使用 $color1，100 表示完全使用 $color2。
- 默认情况下，$weight 是 50，表示两种颜色各占 50%。

14@function函数

官网链接：sass-lang.com/documentati…

SCSS学习笔记