发表于

在前端开发中，类似Less，Sass这样的预处理器，变得越来越常见，由于CSS发展的制约，使得CSS开发时，当代码量越来越大，项目变得难以管理和维护。
Sass可以让你使用一些在CSS中没有的特性，比如变量，nesting，mixins,继承和其他好的特性，让你编写CSS变得更加方便。

所以，学习并使用一款CSS预处理器也渐渐变成一个前端工程师必不可少的技能。在多个预处理器中，我选择了Sass。

一些基础

Sass有两种语法，使用哪一种取决于个人爱好，只是两种格式需要对应不同的后缀。

  1. SCSS，本教程使用这个语法。这是一个CSS语法的扩展，这意味着，在CSS中可以使用的功能，在SCSS中都是同样的功能。同时，SCSS支持所有CSS hacks和特定浏览器语法。详细情况在 这里
  2. SASS,这是比较老的语法，使用缩进代替了大括号，使得写起来更加快捷，看起来也更清爽

开始使用

当安装好Sass之后，你可以使用命令 sass --watch app/stylesheets_dirctory

使用变量

你可以使用$来定义变量

1
2
3
4
5
$font-stack: Helvetica, sans-serif;
body {
  font: 100% $font-stack;
}

经过Sass编译之后，输出的文件是这样的：

1
2
3
body {
  font: 100% Helvetica, sans-serif;
}

这样的的话，你就可以在整个项目中共享一些同样的变量，而不必每次重新定义，当需要做更改的时候，只有改变变量的值，在重新编译之后，使用这个变量的地方就自动更新为新的值了。

嵌套（Nesting）

在HTML里面，各个元素是可以嵌套的，而在CSS里，目前还不可以原生支持这样的功能，Sass就能帮我们实现。

1
2
3
4
5
6
nav {
  font-size: 1.5em;
  li {
    display: inline-block;
  }
}

经过编译后：

1
2
3
4
5
6
nav {
  font-size: 1.5em;
}
nav li {
  display: inline-block;
}

Import

Sass提供了Import的功能，你可以把Sass写到多个文件，然后自由组合他们，然后编译的时候，他们会自动合并到单个文件里。

1
2
3
4
5
6
7
8
9
// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
1
2
3
4
5
6
7
8
// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

在编译之后：

1
2
3
4
5
6
7
8
9
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

当前的浏览器，有的特性可能需要你写不同的前缀，比如 -webkit -moz -ms，Mixins提供了一个快捷的方法使你从写这些烦人的前缀中解放出来。你可以提供多个value值来定制自己的Mixin

1
2
3
4
5
6
7
8
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

在编译过后：

1
2
3
4
5
6
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

扩展和继承

这可能是SASS里最有用的一个功能，它让你的CSS拥有了继承的能力，使用@extend这个关键字继承一个CSS集合，解决了很多不必要的重复。直接看官方的例子吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

在编译之后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

运算符

Sass拥有数学计算的功能，例如+, -, *, /, %

1
2
3
4
5
6
7
8
9
10
11
12
.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

在编译之后：

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

作者注：这篇文章大部分内容来自官方入门指南，需要更多内容可以直接看官方文档。

发表于

本文翻译自官方文档，如需查看最新版本，请 点击

你的配置可以写在 _config.yml 里，或者用一个替代的配置文件，见本文末尾

网站配置

设置 解释
title 网站的标题
subtitle 网版的副标题
description 网站的描述
author 作者名字
language 网站的语言，使用 2-letter ISO-639-1 code.默认为en
timezone 网站的时区。Hexo使用你计算机默认的时区。你可以在 这里 找到列表。例如：America/New_York, Japan, UTC

URL

设置 解释 默认值
url 网站的URL
root 网站的根目录
permalink 网站的永久链接 :year/:month/:day/:title
permalink_defaults 每一节永久链接的默认字符

网站在子目录的情况

如果你的网站在一个子目录（例如http://example.org/blog） 设置url为http://example.org/blog并且设置root为/blog/

Directory

设置 解释 默认
source_dir 源文件夹，放置你的内容的地方 source
public_die 公开文件夹，放置生成的站点 public
tag_dir Tag 文件夹 tags
archive_dir Archive 文件夹 archives
category_dir Category 文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir i18n 文件夹 :lang
skip_render 生成时忽略的文件夹。你可以使用 glob expressions 来进行路径匹配

Writing

设置 解释 默认
new_post_name 新文章文件名格式 :title.md
default_layout 默认布局 post
titlecase 是否转换标题到 title case false
external_link 是否在新的tab里打开外部链接 true
filename_case 转换文件名为： 1.小写 2.大写 0
render_drafts 显示草稿 false
relative_link 使链接相对于根目录？ false
future 显示未来的文章 true
highlight 代码块设置

Category & Tag

Setting Description Default
default_category 默认类别 uncategorized
category_map 类别
tag_map 标签

Date / Time format

Hexo 使用 Moment.js 处理日期

Setting Description Default
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 HH:mm:ss

Pagination

Setting Description Default
per_page 每页现实的文章数量，设置为0则取消分页 10
pagination_dir 分页文件夹 page

Extensions

Setting Description
theme 主题名字，false则禁止主题
deploy 部署设置

使用替代的配置文件

用户自定义的配置文件可以通过在你的 hexo 命令中加上 --config 并跟随一个JSON或YAML配置文件的路径来设置
，或者使用逗号分隔开多个配置文件。

1
2
3
4
# use 'custom.yml' in place of '_config.yml'
$ hexo server --config custom.yml
# use 'custom.yml' & 'custom2.json', prioritizing 'custom2.json'
$ hexo server --config custom.yml,custom2.json

使用多个文件组合所有的配置文件并且保存合并设置到_multiconfig.yml。在后面的值拥有优先权。这个特性可以拥有任意数量的JSON或YAML文件，并且允许任意深的目录。注意，列表中不允许有空格。

例如：在上面的例子中，如果 foo:bar 在 custom.yml中， 但是 "foo": "dinosaur" 在 custom2.json 中，_multiconfig.yml会包含foo: dinosaur