Sass/Scss 学习笔记：轻松掌握 CSS 预处理器的强大功能

Sass/Scss 学习笔记

前言

Sass（Syntactically Awesome Style Sheets）是一种强大的CSS预处理器，可以让你用更简洁、更优雅的方式编写CSS代码。Scss（Sassy CSS）是Sass的一种扩展，它添加了一些额外的特性，如嵌套规则、变量等。

Sass和Scss的优势：

• 语法简洁：Sass和Scss的语法比CSS更加简洁，更易于阅读和编写。
• 功能强大：Sass和Scss提供了许多强大的功能，如变量、函数、mixins等，可以让你轻松编写出复杂的CSS代码。
• 模块化：Sass和Scss支持模块化开发，你可以将CSS代码分成不同的模块，然后按需导入。
• 预编译：Sass和Scss是预编译语言，这意味着它们会在浏览器解析之前被编译成CSS代码。这可以提高页面的加载速度。

基本语法

变量

变量是Sass和Scss中非常重要的一个特性，它允许你存储值并重复使用。变量以$符号开头，如：

$primary-color: #ff0000;

Sass和Scss还提供了一些内置变量，如：

• $font-family-base：默认字体系列。
• $font-size-base：默认字体大小。
• $line-height-base：默认行高。

函数

函数是Sass和Scss中另一个重要的特性，它允许你执行各种操作，如计算、字符串处理等。函数以()符号开头，如：

color.darken($primary-color, 10%);

Sass和Scss还提供了一些内置函数，如：

• calc()：计算两个值之差。
• round()：四舍五入。
• floor()：向下取整。
• ceil()：向上取整。

Mixins

mixins是Sass和Scss中的一种代码复用机制，它允许你将一些通用的CSS代码定义为一个mixin，然后在需要的时候多次使用。mixins以@mixin开头，如：

@mixin button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.42857143;
}

嵌套规则

嵌套规则是Sass和Scss的一项非常强大的特性，它允许你将CSS规则嵌套在其他CSS规则中。这使得你的CSS代码更加清晰和易于管理。嵌套规则以{}符号开头，如：

.container {
  width: 100%;
  padding: 10px;
  background-color: #fff;
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .col-md-6 {
    flex: 0 0 50%;
    padding: 10px;
  }
}

导入

导入允许你将其他Sass或Scss文件导入到当前文件中。导入以@import开头，如：

@import "variables";
@import "mixins";

编译

Sass和Scss文件需要经过编译才能在浏览器中运行。你可以使用sass或scss命令来编译Sass或Scss文件。

sass input.scss output.css
scss input.scss output.css

结语

Sass和Scss是一种非常强大的工具，它可以让你用更简洁、更优雅的方式编写CSS代码。如果你想学习前端开发，那么Sass和Scss是必不可少的技能。