chevron_left

Sass / Scss 实践教程

免费
第 2 回

教程文档

Sass / Scss 实践教程 - 安装与基础使用

2023年11月24日更新
Sass / Scss 实践教程

安装与基础使用

安装

yarn global add sass

# 或

npm install -g sass

确认安装成功

sass --version

看是否返回版本号,有的话,就是安装成功了。

使用

新建项目 sass 项目,里面新建 assets/css/common.scss 文件,里面添加如下代码:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

sass 中新建 index.html,里面添加如下代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="...

课程介绍

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。

SASS 是对 CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出 Stylesheet。Sass 最后还是会编译出合法的 CSS 让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和 CSS 的语法非常的像,几乎一样),因为它不是标准的 CSS 格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

Sass 包括两套语法。最开始的语法叫做“缩进语法”,与 Haml 类似,使用缩进来区分代码块,并且用回车将不同规则分隔开。

而较新的语法叫做“SCSS”,使用和 CSS 一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass 和.scss 两个文件扩展名区分开。

Adsense 广告