索道scss前端一定不会陌生，但是大部分同学都是在使用其 变量和嵌套这两个基本语法，现在让我们开始从小白到入门吧

什么是 SCSS？

SCSS 是 Sass 的一种语法变体，它保留了 CSS 的结构和语法，同时引入了一些高级特性，比如变量、嵌套规则、混合（mixins）、扩展（extends）等。SCSS 文件通常以 .scss 作为文件扩展名。

安装 SCSS

首先，你需要安装 Node.js 和 npm（Node 包管理器），因为 SCSS 的官方编译器是基于 Node.js 的。接着，可以通过 npm 安装 SCSS 编译器

npm install -g sass
  • 1.

SCSS 基本语法

1.变量

SCSS 允许你定义变量来存储颜色、数字、字符串等值。这有助于减少重复代码，并使样式更容易管理和维护。

$primary-color: #ff0000;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

2.嵌套规则

嵌套规则允许你将选择器按照 DOM 结构进行组织，从而让 CSS 代码更加清晰。

#header {
  .logo {
    width: 100px;
  }
  .navigation {
    ul {
      list-style: none;
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

3.混合（Mixins）

混合允许你定义一组 CSS 属性，并在多个地方重用它们，类似于函数。

@mixin box-shadow($shadow) {
  box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
}

.box {
  @include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

4.扩展（Extends）

扩展允许你从一个选择器继承样式到另一个选择器，而不会产生多余的 CSS 类。

.button {
  padding: 10px 20px;
  border-radius: 5px;
}

.submit-button {
  @extend .button;
  background-color: #008000;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
.button {
  .....

  &_text {
     *****
  }
}
上面写法相当于下下面写法
.button {
	....
}
.button_text{
	*****
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

5.函数与操作符

SCSS 支持内置函数和数学运算，这使得你可以执行更复杂的计算。

// 数学运算
$width: 100px + 20px; // 结果为 120px

// 函数
$opacity: opacity(50%); // 返回 0.5
$color: adjust-hue(#ff0000, 90deg); // 返回 #00ff00
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

 6.条件语句

SCSS 支持简单的条件判断，可以在编译时根据不同的条件生成不同的 CSS 规则。以下是个常见是主题颜色切换

$theme: light;

@mixin theme($theme) {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else if $theme == dark {
    background-color: black;
    color: white;
  }
}

body {
  @include theme($theme);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

7.循环

SCSS 支持 @for 和 @each 循环，可以用来生成一系列的 CSS 规则

@mixin generate-gradients($colors) {
  @each $color in $colors {
    .gradient-#{$color} {
      background-image: linear-gradient(to right, #{$color}, lighten(#{$color}, 20%));
    }
  }
}

$colors: #ff0000, #00ff00, #0000ff;

@include generate-gradients($colors);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

8.函数库

SCSS 自带了一系列有用的函数库，如颜色处理、数学运算等。

// 颜色处理
$color: mix(#ff0000, #00ff00, 50%); // 结果为 #7f7f00

// 数学运算
$width: ceil(120px / 2); // 结果为 60px
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

结语

以上介绍了 SCSS 中一些更高级和实用的功能。通过合理运用这些技巧，你可以编写出更加优雅且易于维护的 CSS 代码。SCSS 的强大之处在于它不仅简化了 CSS 的编写过程，还提供了许多高级特性来帮助开发者更好地组织和管理样式表。