SCSS (一) | 环境安装与IDE配置

  • CSS
  • 2019-04-21 22:23:53
  • 浏览 865
简介<h1>Sass简介</h1> <p>Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件,以及更高效地开发项目。</p> <h1>node-sass 安装</h1> <p>首先安装NodeJS,然后使用NPM安装node-sass</p> <pre><code> npm install&lt;!--autointro--&gt;</code></pre><!--autointro-->

Sass简介

Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件,以及更高效地开发项目。

node-sass 安装

首先安装NodeJS,然后使用NPM安装node-sass

npm install -g node-sass

测试编译,新建style.scss文件,进入CMD

node-sass style.scss style.css

node-sass 常用命令

命令 描述
--output-style 输出风格 (nested | expanded | compact | compressed) 使用compressed压缩输出的css代码
-o, --output 输出目录

Atom IDE插件安装

打开 Atom->File->Settings->install
搜索 sass-autocompile 并安装
设置如下

测试插件编译

在项目目录下新建 scss 目录和 css 目录
在scss目录下新建文件 style.scss 并写入代码

body{
  margin: 0;
  padding: 0;
}

保存文件,激活插件自动编译,在css目录中自动生成编译后文件 style.min.css,查看该文件

body{margin:0;padding:0}

scss代码成功编译,并压缩为一行

文章评论