Sass入门篇

2019-07-12  本文已影响0人  前端艾希

Sass入门

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

一、Sass的安装

这里只介绍Mac环境下的安装

brew install ruby  // sass基于ruby编写的,所以要确保有ruby环境
sudo gem install sass

二、Sass和SCSS的区别

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

三、编译SCSS

1. 命令编译

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

// 例如
sass test.scss:test.css

2. GUI工具编译

对于 GUI 界面编译工具,目前较为流行的主要有:

  1. Koala (http://koala-app.com/)
  2. Compass.app(http://compass.kkbox.com/
  3. Scout(http://mhs.github.io/scout-app/
  4. CodeKit(https://incident57.com/codekit/index.html
  5. Prepros(https://prepros.io/

3. 自动化编译

对于sass的自动化编译我还真不了解,但是目前也没有学习的必要,因为在使用webpack打包时会帮我编译scss文件,想学习的盆友可以参照以下链接:

《Grunt-beginner前端自动化工具》:http://www.imooc.com/learn/30

结束语

在接下来的文章中我会去深入学习sass的特性以及用法。一起学习的盆友可以关注我。

转载请注明来源

参考链接 :
https://www.sass.hk/guide/
https://www.imooc.com/code/6411

上一篇 下一篇

猜你喜欢

热点阅读