成都网站建设设计

将想法与焦点和您一起共享

分享一下Sass安装步骤

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目

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

更多安装方法可以查看官网:https://sass-lang.com/install

使用介绍

我们的教程使用的是 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安装步骤
地址分享:http://chengdu.cdxwcx.cn/article/djcooch.html