SCSS快速入门

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.js 和 npm 工具包中的 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 文件。

SCSS 的全部语法可以参考官方文档:https://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html