Sass 详细学习笔记-JavaScript中文网-JavaScript教程资源分享门户

什么是 Sass？

Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS，使其更加灵活和可维护。Sass 可以通过变量、嵌套、函数、继承等特性，让 CSS 更加具有逻辑性和可读性。

安装 Sass

Sass 可以通过命令行工具安装，也可以通过包管理器安装。

命令行工具安装

在命令行中运行以下命令：

npm install -g sass

包管理器安装

在 npm 中安装：

npm install sass

在 yarn 中安装：

yarn add sass

Sass 基础语法

变量

Sass 中可以使用变量来存储颜色、字体、大小等属性值，以便于在整个样式表中重复使用。

// javascriptcn.com 代码示例
$primary-color: #007bff;
$secondary-color: #6c757d;

.button {
  background-color: $primary-color;
  color: #fff;
  border: none;
}

.secondary-button {
  background-color: $secondary-color;
  color: #fff;
  border: none;
}

嵌套

Sass 支持嵌套语法，可以让 CSS 的结构更加清晰，代码更加易读。

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

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

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

继承

Sass 中可以使用继承语法，使样式更加简洁，减少代码的重复。

// javascriptcn.com 代码示例
%button {
  background-color: #007bff;
  color: #fff;
  border: none;
}

.button {
  @extend %button;
}

.secondary-button {
  @extend %button;
  background-color: #6c757d;
}

Mixin

Mixin 是 Sass 中的一个非常有用的功能，可以将一组样式封装成一个可重复使用的代码块，使用 @include 引入。

// javascriptcn.com 代码示例
@mixin button($bg-color, $color) {
  background-color: $bg-color;
  color: $color;
  border: none;
}

.button {
  @include button(#007bff, #fff);
}

.secondary-button {
  @include button(#6c757d, #fff);
}

函数

Sass 中可以定义函数，用来处理一些常用的样式计算，例如颜色亮度、字体大小等。

@function lighten($color, $amount) {
  @return mix(#fff, $color, $amount);
}

.button {
  background-color: lighten(#007bff, 20%);
}

Sass 的高级功能

控制指令

Sass 中支持控制指令，可以用来控制样式的输出。

@if

@if 控制指令可以根据条件输出不同的样式。

// javascriptcn.com 代码示例
$primary-color: #007bff;
$secondary-color: #6c757d;

@mixin button($bg-color) {
  @if $bg-color == $primary-color {
    background-color: $primary-color;
    color: #fff;
  } @else {
    background-color: $secondary-color;
    color: #fff;
  }
}

.button {
  @include button(#007bff);
}

.secondary-button {
  @include button(#6c757d);
}

@for

@for 控制指令可以循环输出样式。

@for $i from 1 through 3 {
  .button-#{$i} {
    background-color: #007bff;
    color: #fff;
    border: none;
  }
}

@each

@each 控制指令可以循环输出样式。

// javascriptcn.com 代码示例
$button-colors: (
  primary: #007bff,
  secondary: #6c757d
);

@each $name, $color in $button-colors {
  .button-#{$name} {
    background-color: $color;
    color: #fff;
    border: none;
  }
}

条件运算符

Sass 中支持条件运算符，可以在样式中使用条件判断。

$primary-color: #007bff;

.button {
  background-color: if($primary-color == #007bff, #fff, #000);
}

插值

Sass 中支持插值语法，可以在样式中使用变量。

$button-color: #007bff;

.#{$button-color}-button {
  background-color: $button-color;
  color: #fff;
  border: none;
}

总结

Sass 是一种非常有用的 CSS 预处理器，它扩展了 CSS 的语法，使样式更加灵活和可维护。通过变量、嵌套、继承、Mixin 等高级语法，可以让 CSS 的编写变得更加高效和简洁。掌握 Sass 的基础语法和高级功能，可以帮助我们更好地管理和维护 CSS 样式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657fe379d2f5e1655dacd05c