语言►Sass

什么是Sass

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/24/%E4%BB%80%E4%B9%88%E6%98%AFSass/

摘要

本文主要讲述了：

  1. 什么是 Sass
  2. 实现
  3. 安装
  4. 语法

正文

什么是 Sass

Sass，全称为”Syntactically awesome style sheets”（语法超棒的样式表）。

Sass 在 CSS 的基础上扩充了大量新特性，Sass 可以编译为 CSS。

Sass 的初始版本发布于 2006 年 11 月 28 日。

实现

Sass 拥有多种实现，以下是官方实现：

  • Ruby Sass 使用 Ruby 实现，2019 年 3 月，由于缺乏维护者，Ruby Sass 被废弃
  • Dart Sass 使用 Dart 实现
  • LibSass 使用 C++实现
  • sass 纯 JavaScript 实现（由 Dart Sass 编译而来），以 sass 之名发布在 npm
  • node-sass 使用 nodejs 包装 LibSass 实现，以 node-sass 之名发布在 npm

安装

局部安装

1
2
3
#!/usr/bin/env bash

npm install --save-dev sass

语法

Sass 拥有 2 种语法：Sass 和 SCSS。

Sass

  1. Sass 的文件扩展名为.sass
  2. Sass 使用缩进区分代码块而不是花括号
  3. Sass 使用行尾符区分规则而不是分号

示例

源文件：

foo.sass

1
2
3
4
$bg-color: #333

body
    background-color: $bg-color

编译：

1
2
3
#!/usr/bin/env bash

npx sass foo.sass foo.css

输出：

1
2
3
body {
  background-color: #333;
}

SCSS

  1. Less 在向后兼容上取得的成功，使得 Sass 推出了 SCSS
  2. SCSS 的全称为”Sassy CSS”（时髦的 CSS），SCSS 是 CSS 的真超集
  3. SCSS 的文件扩展名为.scss

示例

源文件：

bar.scss

1
2
3
4
5
$bg-color: #333;

body {
  background-color: $bg-color;
}

编译：

1
2
3
#!/usr/bin/env bash

npx sass bar.scss bar.css

输出：

1
2
3
body {
  background-color: #333;
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/24/%E4%BB%80%E4%B9%88%E6%98%AFSass/

本文对你有帮助？请支持我

支付宝
微信