跳到主要内容

CSS SCSS 语法

介绍​

SCSS（Sassy CSS）是 CSS 预处理器 Sass 的一种语法格式。它完全兼容 CSS 语法，同时提供了许多强大的功能，如变量、嵌套、混合（Mixins）、继承等，帮助开发者编写更简洁、可维护的样式代码。对于初学者来说，SCSS 是一个很好的工具，可以让你在编写 CSS 时更加高效。

备注

SCSS 是 Sass 的一种语法格式，另一种是缩进语法（Sass）。SCSS 使用 .scss 文件扩展名，而 Sass 使用 .sass 扩展名。

SCSS 基础语法​

1. 变量​

在 SCSS 中，你可以使用变量来存储颜色、字体、尺寸等值。变量以 $ 符号开头，后面跟变量名。

scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

编译后的 CSS：

css
body {
  color: #3498db;
  font-family: Helvetica, sans-serif;
}
提示

使用变量可以让你在项目中轻松地统一管理样式，避免重复代码。

2. 嵌套​

SCSS 允许你在选择器内部嵌套其他选择器，这样可以更清晰地组织代码结构。

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

    li {
      display: inline-block;

      a {
        text-decoration: none;
      }
    }
  }
}

编译后的 CSS：

css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}
警告

虽然嵌套功能非常方便，但过度嵌套会导致生成的 CSS 选择器过于复杂，影响性能。建议嵌套层级不要超过 3 层。

3. 混合（Mixins）​

混合（Mixins）是一种可以重复使用的代码块，类似于函数。你可以将一组样式定义为混合，然后在需要的地方调用它。

scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.button {
  @include border-radius(10px);
}

编译后的 CSS：

css
.button {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}
提示

Mixins 非常适合用于处理浏览器前缀或其他需要重复使用的样式。

4. 继承​

SCSS 允许你通过 @extend 指令继承其他选择器的样式。这样可以减少重复代码，提高代码的可维护性。

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

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

编译后的 CSS：

css
.message, .success {
  padding: 10px;
  border: 1px solid #ccc;
  color: #333;
}

.success {
  border-color: green;
}
备注

使用 % 定义的选择器称为“占位符选择器”，它们不会直接生成 CSS，只有在被 @extend 时才会生成。

5. 运算​

SCSS 支持基本的数学运算，如加、减、乘、除等。你可以在样式中直接使用这些运算。

scss
.container {
  width: 100% / 3;
  padding: 10px + 5px;
}

编译后的 CSS：

css
.container {
  width: 33.33333%;
  padding: 15px;
}
警告

在进行除法运算时，需要使用括号将表达式包裹起来，否则 SCSS 会将其解释为 CSS 的 / 符号。

实际应用场景​

1. 主题切换​

通过 SCSS 的变量和混合功能，你可以轻松实现主题切换功能。

scss
$light-theme: (
  background: #fff,
  text: #000,
);

$dark-theme: (
  background: #333,
  text: #fff,
);

@mixin theme($theme) {
  background-color: map-get($theme, background);
  color: map-get($theme, text);
}

body {
  @include theme($light-theme);

  &.dark {
    @include theme($dark-theme);
  }
}

编译后的 CSS：

css
body {
  background-color: #fff;
  color: #000;
}

body.dark {
  background-color: #333;
  color: #fff;
}

2. 响应式设计​

SCSS 的嵌套和混合功能可以帮助你更轻松地编写响应式设计代码。

scss
@mixin respond-to($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 901px) { @content; }
  }
}

.container {
  width: 100%;

  @include respond-to(phone) {
    width: 100%;
  }

  @include respond-to(tablet) {
    width: 80%;
  }

  @include respond-to(desktop) {
    width: 60%;
  }
}

编译后的 CSS：

css
.container {
  width: 100%;
}

@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .container {
    width: 80%;
  }
}

@media (min-width: 901px) {
  .container {
    width: 60%;
  }
}

总结​

SCSS 是一种强大的 CSS 预处理器，它通过变量、嵌套、混合、继承等功能，极大地提高了 CSS 代码的可维护性和可读性。对于初学者来说，掌握 SCSS 语法是迈向高效前端开发的重要一步。

附加资源与练习​

  • 练习 1：尝试使用 SCSS 变量和嵌套功能，编写一个简单的导航栏样式。
  • 练习 2：创建一个 SCSS 混合，用于处理常见的按钮样式，并在多个按钮中调用它。
  • 附加资源：

通过不断练习和探索，你将能够熟练使用 SCSS 编写高效、可维护的样式代码。