Scss

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

Sass语法格式

这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。

Scss语法格式

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

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

//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;
}

Sass 编译

常常有人会问，使用 Sass 进行开发，那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢？

那么这里告诉大家，在项目中还是引用“.css”文件，Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，他才有攻效。

这样一来，也就有了—— Sass 的编译。因为 Sass 开发之后，要让 Web 页面能调用 Sass 写好的东西，就得有这么一个过程，这个过程就称之为 Sass 编译过程。

Sass 的编译有多种方法：

命令编译

GUI工具编译

自动化编译

单文件编译：

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

多文件编译：

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

实时编译:

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

sass --watch sass/bootstrap.scss:css/bootstrap.css

推荐编译软件

Koala       (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)

CodeKit   (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

[Sass]常见的编译错误

1.字符编译,文件的编码要设置为utf-8;

2.路径中出现中文字符引起.建议在项目中文件命名或者文件目录命名不要使用中文字符.

[Sass]不同样式风格的输出方法

1.嵌套输出方式 nested

嵌套输出方式——在编译的时候带上参数“ --style nested”:       结束的大括号会在样式后面

eg.   sass --watch test.scss:test.css --style nested

2.展开输出方式 expanded

展开输出方式——在编译的时候带上参数“ --style expanded”:    结束的大括号另起一行

eg.    sass --watch test.scss:test.css --style expanded

3.紧凑输出方式 compact

紧凑输出方——在编译的时候带上参数“ --style compact”:           单行CSS格式

eg.     sass --watch test.scss:test.css --style compact

4.压缩输出方式 compressed

压缩输出方式——在编译的时候带上参数“ --style compressed”:    项目上线时使用，会将代码中的注释和空格省略，使源文件体积更小。

eg.     sass --watch test.scss:test.css --style compressed

Sass 的调试

早一点的版本，需要在编译的时候添加“--sourcemap” 参数：

eg.     sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上，不需要添加这个参数也可以：

eg.     sass --watch style.scss:style.css

https://github.com/SeriousLose/sass-study