scss概念及使用

目录

scss是什么

scss和css比较

scss的使用

声明变量

区分默认变量

区分全局变量和局部变量

嵌套语法

选择器嵌套

基本嵌套

嵌套中的父选择器引用（&）

嵌套的注意事项

嵌套的嵌套

属性嵌套 

基本属性嵌套

嵌套的注意事项

继承

基本用法

继承的注意事项

应用场景

占位符 % 

定义占位符

继承占位符

优势和适用场景

注意事项

混合@mixin

定义混合

调用混合

例子

优势和适用场景

注意事项

SCSS使用条件语句

@if 语句

@else 和 @else if 语句

条件语句的嵌套

结论

SCSS中的三种循环

@for 循环

@each 循环

@while 循环

总结

自定义函数及使用

定义自定义函数

使用自定义函数

注意事项

课后练习

---

scss是什么

SCSS（Sassy CSS）是CSS的一种预处理器语言，它在CSS的基础上提供了更多的功能和灵活性，使得样式表的编写和管理更加高效和便捷。

以下是SCSS的一些优势：

• 变量（Variables）：SCSS允许使用变量来存储颜色、字体大小等数值，使得在整个样式表中统一调整这些值变得更加方便和可维护。
• 嵌套（Nested Rules）：可以在SCSS中使用嵌套规则来组织样式，使得代码结构更加清晰。例如，可以将某个元素的伪类样式写在其父元素的样式块中，而不是分开多处书写。
• 混合（Mixins）：混合是一种将一组样式属性集合成一个可重用块的方式。这样可以避免重复书写相同的样式代码，提高了代码的复用性和可读性。
• 导入（Inline Imports）：可以通过@import规则将多个SCSS文件合并为一个文件。这种方式有助于将样式表分割成逻辑单元，并且可以根据需要灵活地组织和管理。
• 继承（Extend）：SCSS支持通过@extend关键字实现样式的继承，这可以使得样式表更加模块化和可维护。
• 运算（Operations）：SCSS允许在样式表中进行数学运算，例如加减乘除，这对于处理一些动态样式的计算很有帮助。
• 模块化（Modularity）：SCSS的特性使得样式表更加模块化和结构化，尤其在大型项目中，能够更好地管理和维护样式。

总结来说，SCSS不仅保留了CSS的所有功能，还引入了诸如变量、嵌套、混合、导入等高级特性，这些功能使得开发者能够更加高效地编写和管理样式表，是现代前端开发中常用的工具之一。

scss和css比较

语法：

• CSS：基本的层叠样式表语法，规则是通过选择器、属性和值来定义。
• SCSS：SCSS是CSS的一种预处理器语言，它提供了更多的功能和语法，如变量、嵌套规则、混合、导入等，这些使得样式表的编写更加灵活和高效。

可读性和维护性：

• CSS：在较大的项目中，CSS文件可能会变得非常冗长和难以维护，因为它缺乏结构化和模块化的特性。
• SCSS：SCSS支持变量和嵌套规则，这些特性使得代码更具可读性和维护性。通过使用变量和混合，可以减少重复代码的书写，同时嵌套规则可以更清晰地表达HTML结构的层次关系。

功能扩展：

• CSS：标准的CSS只能做基本的样式定义和选择器匹配。
• SCSS：SCSS引入了混合、继承、运算等高级功能，这些功能使得样式表更加灵活和强大，能够更好地应对复杂的样式需求。

兼容性：

• CSS：浏览器直接支持CSS，不需要额外的编译步骤。
• SCSS：SCSS需要通过编译器将其转换为普通的CSS文件，然后才能被浏览器理解和应用。

学习曲线：

• CSS：学习CSS相对简单，只需了解基本的选择器、属性和值的组合即可。
• SCSS：学习SCSS需要掌握其特有的语法和功能，例如变量、混合、嵌套等，这需要一定的学习和适应过程。

综上所述，SCSS相对于普通的CSS来说，提供了更多的工具和特性来简化样式表的编写和维护，尤其适合大型和复杂项目的开发。然而，对于小型项目或者简单的样式需求，普通的CSS可能更加直接和方便。

scss的使用

在学习scss前，先在vscode安装两个插件来将scss转换为普通的CSS文件，以便后续学习！

在插件商店搜索sass，下载以下两个插件并重启vscode！

声明变量

在SCSS中声明变量非常简单，可以使用$符号来定义变量。

下面是一个简单的例子，演示如何在SCSS中声明和使用变量：

// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;

// 使用变量
body {
  background-color: $primary-color;
}

a {
  color: $secondary-color;
}

在上面的例子中，我们定义了两个变量$primary-color和$secondary-color，分别用来存储主要颜色和次要颜色。然后，我们可以在样式规则中使用这些变量，以便在整个样式表中保持颜色的一致性和易于修改性。

当SCSS文件被编译成普通的CSS文件时，所有的变量会被替换为其对应的值，因此最终生成的CSS文件中不会包含任何变量声明。

区分默认变量

在SCSS中，可以使用默认变量来确保变量在未定义时有一个备用值。这在处理主题化或配置样式时特别有用。

下面是如何声明和使用默认变量的示例：

// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;

// 使用变量
body {
  background-color: $primary-color;
}

a {
  color: $secondary-color;
}

在上面的例子中，我们使用了!default标记来定义默认值。这意味着如果在引入该SCSS文件之前没有其他地方定义$primary-color或$secondary-color，则它们将使用指定的默认值（#3498db和#2ecc71）。如果在引入该文件之前已经定义了这些变量，那么默认值将被忽略。

使用默认变量的好处在于，它允许你在不覆盖已定义变量的情况下为变量提供备用值。这对于创建主题或在多个样式文件中共享变量特别有用。

区分全局变量和局部变量

• 全局变量：全局变量是在选择器外或混合器/函数外部声明的变量。它们可以在整个样式表中访问，并且如果在多个文件中定义了相同的全局变量，则它们的值将保持一致。
• 局部变量：局部变量是在选择器内部或混合器/函数内部定义的变量。它们只能在其定义的作用域内使用，离开该作用域后就不再有效。

注意：局部变量覆盖全局变量

当在局部作用域中重新声明一个与全局变量同名的变量时，局部变量会覆盖全局变量的值。这允许在不影响全局的情况下，为特定选择器或混合器定义不同的变量值。

使用 !global 关键字将局部变量变为全局变量

SCSS提供了!global关键字，可以将局部变量显式地声明为全局变量。这使得局部变量的值在其声明的地方被提升到全局范围内，覆盖任何已存在的同名全局变量。

示例：

// 全局变量
$primary-color: #3498db;

.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}

// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;

.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}

body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

在第一个示例中，.button选择器内部的局部变量$primary-color覆盖了全局变量的值。而在第二个示例中，通过使用!global关键字，将.button选择器内部的局部变量转变为全局变量，从而影响了全局范围内的变量值。

嵌套语法

选择器嵌套

基本嵌套

选择器嵌套允许将子选择器的样式规则嵌套在父选择器内部，例如：

// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: #fff;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

上述代码中，.navbar选择器包含了一个嵌套的 ul、li 和 a 子选择器。这种嵌套结构使得样式规则更加清晰和易于管理。

嵌套中的父选择器引用（&）

在SCSS中，& 符号用于引用父选择器，特别是在伪类或伪元素的情况下很有用。例如，使用 &:hover 来引用当前选择器的父选择器并添加 :hover 状态样式。

.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;

  &:hover {
    background-color: #2980b9;
  }
}

嵌套的注意事项

• 选择器深度: 避免过深的选择器嵌套，因为它可能增加样式优先级，导致样式覆盖和维护困难。
• 可读性: 使用选择器嵌套时要注意保持代码的可读性和清晰性，避免过度复杂的嵌套结构。
• 性能: 嵌套结构可能会增加生成的CSS文件的大小，但通常可以通过合理的样式组织和编写来优化。

嵌套的嵌套

SCSS允许多层级的选择器嵌套，例如：

.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

属性嵌套 

在SCSS中，除了选择器嵌套外，还有属性嵌套的功能，这是另一个使样式表更整洁和易于管理的特性。属性嵌套允许将相关的属性组织在一起，类似于对象的形式。

基本属性嵌套

属性嵌套可以用来将相关的属性放在一个代码块内，例如：

.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

上面的示例中，font、margin 和 padding 块内部分别包含了相关的属性。这种组织方式使得每个块内的属性更加清晰，也更容易修改和维护。

嵌套的注意事项

• 支持的属性: 不是所有的CSS属性都支持嵌套，通常是那些可以接受键值对的属性，比如 font、margin、padding、border 等。
• 可读性: 使用属性嵌套时，要确保代码的可读性和清晰性，避免过度嵌套和复杂的结构。
• 嵌套的嵌套: 你也可以在属性嵌套中再次嵌套其他属性，这种方式可以进一步组织和结构化你的样式。

继承

在 SCSS 中，继承（Extend）是一种非常有用的特性，它允许一个选择器继承另一个选择器的样式规则。这种功能可以减少重复的 CSS 代码，并使样式表更加模块化和易于维护。

基本用法

使用 @extend 关键字可以实现选择器的继承。例如：

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}

.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

上面的例子中，%message-shared 是一个占位符选择器（Placeholder Selector），它定义了一组通用的样式。.success-message 和 .error-message 分别继承了 %message-shared 的样式，并且添加了各自的背景颜色。 

继承的注意事项

• 选择器顺序: 继承会生成一长串的选择器，这可能会影响样式的优先级。确保在使用 @extend 时，选择器的顺序和位置是正确的，以避免不必要的优先级问题。
• 限制: 继承的选择器必须出现在被继承选择器之后。这意味着，如果你的 SCSS 文件中定义了一个选择器，在后续的代码中使用 @extend 继承它的样式，则这个继承只有在定义后才会生效。
• 占位符选择器 vs 类选择器: 使用 % 开头的占位符选择器通常比直接的类选择器更适合作为继承的目标，因为它们不会在编译后生成多余的选择器。而类选择器则会在每个使用它的地方生成重复的样式，增加文件大小和复杂度。

应用场景

继承特别适合那些具有共同特征的选择器，比如按钮组件、消息提示框等。通过继承，可以在不同的场景中重用相同的样式规则，同时保持代码的整洁和可维护性。

综上所述，SCSS 中的继承是一个强大的工具，能够帮助你避免样式重复，保持代码的模块化和清晰度，但在使用时需要注意选择器的顺序和位置，以及合理使用占位符选择器来最大化其效果。

占位符 % 

占位符 % 在 SCSS 中是一种特殊的选择器，它通常用于定义可以被继承但不会生成实际 CSS 输出的样式规则。具体来说：

定义占位符

%placeholder-selector {
  // 样式规则
}

在上面的例子中，%placeholder-selector 是一个以 % 开头的占位符选择器。它定义了一组样式规则，但在编译生成的 CSS 中不会出现对应的选择器名字。

继承占位符

.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

使用 @extend 关键字可以让 .some-class 继承 %placeholder-selector 的样式。这意味着 .some-class 将会应用 %placeholder-selector 中定义的所有样式规则，同时生成相应的 CSS 输出。

优势和适用场景

• 减少重复: 占位符选择器使得可以定义一组通用的样式规则，并在需要时通过继承来重用这些规则，避免代码重复。
• 模块化: 占位符选择器有助于代码的模块化和可维护性，特别是在大型项目中，可以提高样式表的结构清晰度。
• 避免冗余: 相比使用类选择器，占位符选择器不会生成多余的选择器，从而减少 CSS 文件的大小。

注意事项

• 顺序和位置: 使用 @extend 继承占位符选择器时，被继承的占位符选择器必须在使用它的选择器之前定义，否则可能导致意外的样式层级问题。
• 混用: 可以将占位符选择器和普通类选择器结合使用，但需谨慎处理，避免产生意外的 CSS 输出。

总结来说，占位符选择器 % 是 SCSS 中一个强大的工具，可以帮助开发者提高样式表的重用性和可维护性，同时减少不必要的 CSS 冗余。

混合@mixin

在 SCSS 中，混合（Mixin）是另一种非常强大的特性，它允许将一组样式规则封装在一个可重用的代码块中，然后在需要的地方引用。与占位符选择器 % 不同，混合是可以直接生成 CSS 输出的，因此它适合那些需要在多个地方使用相同样式的情况。

定义混合

@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。

调用混合

.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

使用 @include 关键字可以在选择器中调用混合，并传递参数给它。这样，.some-class 将会应用混合中定义的样式规则，并将传递的参数值应用到对应的参数变量上。

例子

@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}

.button-secondary {
  @include button-style(#2ecc71, #fff);
}

 

优势和适用场景

• 灵活性: 混合允许传递参数，可以根据需要动态生成不同的样式输出，使得样式更加灵活和可定制。
• 可读性: 将常用的样式规则封装在混合中，可以提高代码的可读性和维护性，特别是在多个地方需要相同样式的情况下。
• 复用性: 可以在不同的选择器和文件中多次调用同一个混合，避免样式的重复定义，减少代码量。

注意事项

• 命名冲突: 确保混合名称不会与现有的 CSS 类名或其他混合名称冲突，避免意外的样式覆盖或错误。
• 参数传递: 在调用混合时，确保传递的参数类型和顺序与混合定义的要求一致，以避免编译错误或意外行为。
• 性能影响: 大量使用混合可能会增加生成的 CSS 文件大小，因此在使用时要谨慎考虑其对性能的影响。

总结来说，混合 @mixin 是 SCSS 中用于封装和重用样式规则的一种强大工具，可以显著提高 CSS 的可维护性和灵活性，适合各种复杂和重复的样式需求。

SCSS使用条件语句

在 SCSS 中，条件语句允许根据特定条件动态地生成 CSS 样式。SCSS 的条件语句类似于其他编程语言中的条件语句，包括 @if、@else if 和 @else。

@if 语句

@if 语句允许根据一个条件来生成样式。语法如下：

$use-rounded-corners: true;

.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

在上面的例子中，如果 $use-rounded-corners 变量的值为 true，则生成 .button 类的样式，包含 border-radius: 4px;。如果条件为 false，则不会生成这部分样式。

@else 和 @else if 语句

除了 @if，还可以使用 @else if 和 @else 来添加更多的条件分支。

$button-size: medium;

.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

在这个例子中，根据 $button-size 变量的值，会选择不同的 padding 值应用于 .button 类。如果没有匹配的条件，则会执行 @else 中的代码块。

条件语句的嵌套

条件语句也可以嵌套使用，以处理更复杂的逻辑。

$button-style: flat;
$button-size: medium;

.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;

    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

在这个例子中，根据 $button-style 和 $button-size 的值，选择不同的样式进行应用。这种嵌套的方式使得可以根据多个条件生成复杂的样式规则。

结论

通过使用条件语句，可以在 SCSS 中实现更加灵活和动态的样式定义，根据不同的条件生成不同的 CSS 规则，从而提高了样式表的可维护性和扩展性。

SCSS中的三种循环

在 SCSS 中，可以使用三种主要的循环结构来生成重复的 CSS 规则，这些循环结构包括 @for、@each 和 @while。

@for 循环

@for 循环用于按照一定的步长和条件重复生成样式。

基本语法：

@for $i from <start> through <end> {
  // 循环体
}

• from <start> through <end>：指定循环的起始值和结束值（包括结束值）。
• 循环体中可以使用 $i 变量来表示当前循环的索引值。

示例：

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

在上面的例子中，生成了三个类 .item-1、.item-2 和 .item-3，分别设置宽度为 100px、200px 和 300px。

@each 循环

@each 循环用于遍历列表或者 map 类型的数据，并针对每个元素生成样式。

基本语法：

@each $var in <list or map> {
  // 循环体
}

• $var：代表当前循环的变量。
• <list or map>：可以是一个列表（如 $list: item1, item2, item3;）或者一个 map（键值对）。

示例：

$colors: (red, green, blue);

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

 

在这个例子中，生成了三个类 .text-red、.text-green 和 .text-blue，分别设置它们的文字颜色为对应的颜色值。

@while 循环

@while 循环根据一个条件来重复生成样式，直到条件不满足为止。

基本语法：

$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

• $i：作为循环计数器或者条件变量。
• 循环体中可以执行任意 SCSS 代码，通常在循环体末尾需要更新条件变量，避免无限循环。

示例：

$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

这段代码生成了三个类 .item-1、.item-2 和 .item-3，分别设置它们的宽度为 100px、200px 和 300px。

总结

SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。

自定义函数及使用

在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。

定义自定义函数

在 SCSS 中，使用 @function 关键字来定义函数，函数可以有参数和返回值。例如，我们定义一个函数来计算一个元素的盒子模型总宽度：

@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

在上面的例子中：

• total-width 是函数的名称。
• 函数接受四个参数：$padding、$border、$margin、$content-width。
• @return 语句用于返回计算后的值。

使用自定义函数

一旦定义了函数，就可以在样式中使用它来计算和生成需要的值。例如：

.element {
  width: total-width(10px, 1px, 5px, 100px);
}

 

在这个例子中，total-width 函数会被调用，参数分别是 10px、1px、5px 和 100px。函数返回的结果（116px）将被应用到 .element 的宽度属性中。

注意事项

• 函数可以包含在任何 SCSS 文件中，并且可以像其他样式规则一样进行组织和导入。
• 函数中可以使用 SCSS 的所有功能，例如控制语句（如 @if、@for、@each、@while）和内置函数。
• 函数的参数可以是任意 SCSS 数据类型，包括数字、字符串、颜色等。

课后练习

使用SCSS 实现页面的黑白色主题切换

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>
</html>

scss

// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);

// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);

// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);

  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}

// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}

// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}

// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}

// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}

// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}

// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;

  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}

js

/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});