Sass 安装

本章节我们主要介绍 Sass 的安装与使用。

NPM 安装

我们可以使用 npm（NPM 使用介绍）来安装 Sass。

npm install -g sass

注：国内 npm 建议使用淘宝镜像来安装，参考：NPM 国内慢的问题解决

Windows 上安装

我们可以使用 Windows 的包管理器 Chocolatey 来安装：

choco install sass

Mac OS X (Homebrew)安装

Mac OS 可以使用 Homebrew 包管理器来安装：

brew install sass/sass/sass

更多安装方法可以查看官网：Sass: Install Sass

使用介绍

我们的教程使用的是 npm 安装的 sass，安装完成后可以查看版本：

$ sass --version 1.22.12 compiled with dart2js 2.5.0 接下来我们创建一个 runoob-test.scss 文件，内容为：

runoob-test.scss 文件代码:

/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

然后在命令行输入下面命令，即将 .scss 文件转化的 css 代码：

$ sass runoob-test.scss
@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {background-color: lightblue;color: darkblue;font-size: 18px;
}

我们可以在后面再跟一个 .css 文件名，将代码保存到文件中：

$ sass runoob-test.scss runoob-test.css

这是会在当前目录下生成 runoob-test.css 文件，代码如下：

@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {background-color: lightblue;color: darkblue;font-size: 18px;
}/*# sourceMappingURL=runoob-test.css.map */

sass教程之--sass的安装相关推荐

sass教程之--sass变量
Sass 变量变量用于存储一些信息,它可以重复使用. Sass 变量可以存储以下信息: 字符串数字颜色值布尔值列表 null 值 Sass 变量使用 $ 符号: $variablename: ...
【Sass】全面的 Sass 教程及学习笔记
文章目录 Sass 安装教程 `npm` 安装 Sass 变量存储数据 Sass 嵌套 CSS Mixins 创建可重用 CSS @if 和 @else 为样式添加逻辑 @for 创建一个 Sass ...
SASS的一些使用体会（安装-配置-开启firefox的调试）
对CSS预处理这个东西的看法,基本就是2种第一种:不就是css吗,我会写就好了搞得那么复杂干嘛第二种:感觉这个东西非常有必要,它规范了代码,使开发变得更轻松好吧以前我是第一种,并且觉得又要配置环 ...
【学习笔记】sass教程巩固学习
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...
【HBuilderX】预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件:
[HBuilderX]预编译器错误:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件: 一.报错二.报错原因三.解决办法一.报错预编译器错误:代码使用了sc ...
【sass】Sass教程
Sass 是层叠样式表,Sass 是一个 CSS 预处理器.Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间.Sass 完全兼容所有版本的 CSS.Sass 扩展了 ...
超级简单的SASS教程和使用指南
英文 | https://mobileappcircular.com/super-easy-sass-tutorial-and-usage-guide-6fb75946ff6c 翻译 | 杨小爱作为 ...
python3里的pillow怎么安装_“python安装pillow教程“python3.4怎么安装pil
"python安装pillow教程"python3.4怎么安装pil python安装pillow教程2020-10-09 03:37:02人已围观如何在python3.6中装p ...
SCCM 2007系列教程之二客户端安装之客户端请求安装
一.客户端安装方法: 客户端请求安装.软件更新点安装. 组策略安装.登录脚本安装.手动安装.升级安装.客户端映像客户端成功安装客户端之后,它将尝试分配到某个站点,并找到该站点的默认管理点以下 ...

sass教程之--sass的安装