SCSS 快速入门指南

SCSS(Sassy CSS)是一种CSS的扩展,它为CSS增加了变量、嵌套规则、混合宏、函数等功能。通过使用SCSS,你可以编写更加简洁、易维护、具有更强大功能的CSS代码。

为什么选择SCSS而不是less

SCSS 相比 less 有以下优点:

  1. 更强大的嵌套功能 - SCSS 支持嵌套选择器的任意深度,less 只支持 3 级嵌套。

  2. 变量 - SCSS 支持块级变量和局部变量,less 只支持全局变量。

  3. 混合器 - SCSS 的混合器更强大,可以带参数和默认值,less 的混合器比较简单。

  4. 继承 - SCSS 支持继承,可以很方便地继承选择器和属性,less 不支持。

  5. 函数 - SCSS 内置了很多强大的函数,如颜色函数、字符串函数等,less 的函数较少。

  6. 运算 - SCSS 支持更多的运算,如除法运算、比较运算等,less 较少。

  7. 注释 - SCSS 支持块级注释和单行注释,less 只支持单行注释。

1. 安装

要使用SCSS,首先需要安装一个CSS预处理器。推荐使用 Node.jsnpm 工具包中的 node-sass

通过以下命令安装 node-sass

npm install -g node-sass

2. 变量

SCSS允许你定义变量,以便在整个样式表中重复使用。变量以 $ 符号开头。

$primary-color: #f06;
$secondary-color: #333;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

3. 嵌套

SCSS允许你使用嵌套规则,可以让你的代码更加简洁和结构化。

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

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
  }
}

4. 混合宏

混合宏允许你定义可重用的代码块。使用 @mixin 关键字定义混合宏,然后使用 @include 关键字将其引入。

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

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

5. 函数

SCSS提供了一些内置函数,如颜色操作、数学计算等。你还可以定义自己的函数。

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return $rem-size * 1rem;
}

body {
  font-size: calculate-rem(18px);
}

6. 继承

使用 @extend 关键字继承另一个选择器的样式。

.button {
  display: inline-block;
  padding: 10px 20px;
}

.primary-button {
  @extend .button;
  background-color: #f06;
}

7. 编译

最后,使用 node-sass 将 SCSS 编译为 CSS:

node-sass input.scss output.css

这将把 input.scss 文件编译为 output.css 文件。

07-03 20:11