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<!--autointro--></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代码成功编译，并压缩为一行