您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Sass 使用

前面我们讲了 Sass 的安装,假如你在 Ruby 环境下安装了 Sass ,我们可以直接通过命令行来使用 Sass ,Sass 提供了很多命令像编译、配置等等,下面我们写出一些常用的命令供你参考:

//单个命令, 将 a.scss 的转换为 css 到 b.css 中
$ sass a.scss b.css
//单监听命令,发生变化则编译
$ sass --watch a.scss:b.css
// 监听指定的目录
$ sass --watch assets/sass:public/styles
// 在运行Sass之前加载Ruby gem 将加载到 Sass 环境中
$ sass --require=rails-sass-images style.scss style.css
// 加载Compass框架并使其mixin和可用于Sas
$ sass --compass style.scss style.css
// 设置格式
 $ sass --style=nested
 // 帮助文档
 $ sass --help

命令就介绍这么多了,一般我们前端工程师直接在命令行使用 Sass 的情况很少,我们主要还是看下面在前端项目中的使用。

在目前主流的前端项目中,一般是使用 来构建我们的前端项目,并且大多数都跑在 Node 环境下,所以首先我们要安装 node-sass,在前面的安装章节已经讲解。

安装好 node-sass 后还需要执行如下命令安装 :

npm install  --save-dev

安装好 后按照 配置 后就可以在项目中使用了。下面配出视频演示:

对于本系列教程,我还是建议你使用在线 Sass 转 CSS ,这样可以边学边写然后还能实时的看见转换后的 CSS 是什么样的,在后面的章节中我也会以演示转换后的 CSS 为主来讲解 Sass 语法,你可以使用这个非常好用的 (),下面我来演示下如何使用它:


联系我
置顶