认识到 Sass（从 Sass 3 开始的新语法规则被称为 SCSS，即 Sassy CSS） 这个 CSS 的处理器，同时 Compass 又是一个高效的开发 Sass 的利器。
闲话少说，RubyGems 下的安装
$ gem install sass
$ gem install compass
创建一个新项目
$ cd /your/jekyll/path
$ compass create .
其中 config.rb 文件可以对之进行一些修改，譬如输出格式
:nested # 默认值，嵌套缩进
:expanded # 无缩进、扩展
:compact # 简洁格式
:compressed # 压缩后
以下是我的配置
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "style/css"
sass_dir = "style/_sass"
images_dir = "style/images"
javascripts_dir = "style/js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
当然也可以不运行 compass create . 来创建目录，只需 touch config.rb，且填充以上内容即可
实时监控 Sass 目录，使之修改保存后，即可编译成对应目录的 CSS
$ compass watch .
由于此过程会生成 .sass-cache目录，提交到代码库时，将 .sass-cache 写入 .gitignore
$ cat .gitignore
_site/*
_theme_packages/*
Thumbs.db
.DS_Store
!.gitkeep
.rbenv-version
.rvmrc
.sass-cache
不过，Jekyll 2.4.0 开始内置 Sass 预处理器，可以直接生成页面需要的样式。GitHub Pages 服务已经支持 Jekyll 2.4.0 版本。
以下是我的目录结构
assets
├── _sass
│ ├── _bootstrap.scss
│ ├── _custom.scss
│ ├── _font-awesome.scss
│ ├── _havee.scss
│ ├── _pygments.scss
│ ├── bootstrap
│ │ ├── _alerts.scss
│ │ ├── _badges.scss
│ │ ├── _breadcrumbs.scss
│ │ ├── _button-groups.scss
│ │ ├── _buttons.scss
│ │ ├── _carousel.scss
│ │ ├── _close.scss
│ │ ├── _code.scss
│ │ ├── _component-animations.scss
│ │ ├── _dropdowns.scss
│ │ ├── _forms.scss
│ │ ├── _glyphicons.scss
│ │ ├── _grid.scss
│ │ ├── _input-groups.scss
│ │ ├── _jumbotron.scss
│ │ ├── _labels.scss
│ │ ├── _list-group.scss
│ │ ├── _media.scss
│ │ ├── _mixins.scss
│ │ ├── _modals.scss
│ │ ├── _navbar.scss
│ │ ├── _navs.scss
│ │ ├── _normalize.scss
│ │ ├── _pager.scss
│ │ ├── _pagination.scss
│ │ ├── _panels.scss
│ │ ├── _popovers.scss
│ │ ├── _print.scss
│ │ ├── _progress-bars.scss
│ │ ├── _responsive-embed.scss
│ │ ├── _responsive-utilities.scss
│ │ ├── _scaffolding.scss
│ │ ├── _tables.scss
│ │ ├── _theme.scss
│ │ ├── _thumbnails.scss
│ │ ├── _tooltip.scss
│ │ ├── _type.scss
│ │ ├── _utilities.scss
│ │ ├── _variables.scss
│ │ ├── _wells.scss
│ │ └── mixins
│ │ ├── _alerts.scss
│ │ ├── _background-variant.scss
│ │ ├── _border-radius.scss
│ │ ├── _buttons.scss
│ │ ├── _center-block.scss
│ │ ├── _clearfix.scss
│ │ ├── _forms.scss
│ │ ├── _gradients.scss
│ │ ├── _grid-framework.scss
│ │ ├── _grid.scss
│ │ ├── _hide-text.scss
│ │ ├── _image.scss
│ │ ├── _labels.scss
│ │ ├── _list-group.scss
│ │ ├── _nav-divider.scss
│ │ ├── _nav-vertical-align.scss
│ │ ├── _opacity.scss
│ │ ├── _pagination.scss
│ │ ├── _panels.scss
│ │ ├── _progress-bar.scss
│ │ ├── _reset-filter.scss
│ │ ├── _resize.scss
│ │ ├── _responsive-visibility.scss
│ │ ├── _size.scss
│ │ ├── _tab-focus.scss
│ │ ├── _table-row.scss
│ │ ├── _text-emphasis.scss
│ │ ├── _text-overflow.scss
│ │ └── _vendor-prefixes.scss
│ └── font-awesome
│ ├── _bordered-pulled.scss
│ ├── _core.scss
│ ├── _fixed-width.scss
│ ├── _icons.scss
│ ├── _larger.scss
│ ├── _list.scss
│ ├── _mixins.scss
│ ├── _path.scss
│ ├── _rotated-flipped.scss
│ ├── _spinning.scss
│ ├── _stacked.scss
│ └── _variables.scss
├── css
│ └── style.scss
├── fonts
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
├── img
│ ├── loading.gif
│ └── url.png
└── js
├── bootstrap.min.js
├── jquery.min.js
└── webcore.js
No comments:
Post a Comment