hexo部署到github和coding注意事项
开始 Getting Started
Version: 1.0.1
开始使用Compass |Getting started with Compass
Compass is an open-source CSS authoring framework which uses the
Sass stylesheet language to make writing stylesheets powerful and easy. If you’re not familiar with Sass, Go to sass-lang.com to learn all about how it works.
Compass 是一款使用Sass语言 编写的开源的css设计框架，使用
起来强大和简单. 如果你对Sass不熟悉, 可以去sass-lang.com学习如何使用.
安装Compass |Installing Compass
To install, please follow the steps found in the Compass installation guide.
This will install Compass and Sass too. If you want to verify that compass is installed, run:
$ compass version
请按照Compass 安装指南按步骤安装Compass和Sass。
如果需要验证版本，可以运行以下命令:
$ compass version
监视和编译你的项目 | Watching and Compiling your Project
When doing development on your project, you can run the compass watcher to keep your CSS files up to date as changes are made.
$ cd /path/to/project
$ compass watch
When it comes time to compile your css files for production use, pass the –production compiler option to select defaults that optimize your output for end-users:
$ compass compile --production
（ps：watch参数就是，监控你的项目是否则有文件改动，一旦有改动，就自动转成css。）
当开发项目时, 你可以运行compass监视器 ，自动修改你的css文件到最新状态。
$ cd /path/to/project
$ compass watch
当在生产环境中编译你的css文件的时, 通过 –production 编译器将默认对终端(就是我们用的浏览器)优化输出(其实就是精简):
$ compass compile --production
使用Compass不用命令行 |Using Compass without the command line tools
You can use compass without the compass command line tools. In some cases, this may make it easier to integrate with sass-based compilers and frameworks that do not explicitly support Compass.
$ gem install compass-core
$ cat <<- EOF > _project-setup.scss
\$project-path: absolute-path(join-file-segments(".."));
@import "compass/configuration";
\$compass-options: (http_path: "/");
@include compass-configuration(\$compass-options);
EOF
Add to the top of each sass file: @import "project-setup";
Compile using the Sass command line:
$ sass -r compass-core --update sass:css
Read more: Compass’s Sass-based configuration options.
你可以不用compass命令行. 在一些情况下, 对于一些不是明确支持Compasssass编译器和框架，这样更容易集成.
$ gem install compass-core
$ cat <<- EOF > _project-setup.scss
\$project-path: absolute-path(join-file-segments(".."));
@import "compass/configuration";
\$compass-options: (http_path: "/");
@include compass-configuration(\$compass-options);
EOF
Add to the top of each sass file: @import "project-setup";
Compile using the Sass command line:
$ sass -r compass-core --update sass:css
详情请读: Compass’s Sass-based配置选项.
更多配置命令
Full documentation of all compass commands can be found by running:
$ compass help
To see the options available and description for a compass command run:
$ compass help <command>
Where
所有compass命令的文档可以通过运行下面的代码发现:
$ compass help
可以设置一个可选参数，指定具体的一个命令:
$ compass help <command>
教程 Tutorials
教程 Tutorials
Compass Tutorials
These tutorials are still a work-in-progress, if you have questions that aren’t covered here let us know on the Compass users mailing list where there are lots of friendly Compass users standing by to help you out.
New to Compass?
If you’re new to Compass, you might be interested in best practices, the configuration reference, configurable variables, or the command line documentation.
Want to contribute?
If you’ve been using Compass for a while and you’d like to give back, check out the tutorials on contributing and creating extensions.
Compass 教程
这篇教程还在改进, 如果你有问题，可以和我们联系 Compass用户联系表 ，那里有很多可爱的 Compass 用户帮你 .
Compass 不熟悉?
如果你对Compass不熟悉, 你最好看看 最佳联系, 配置索引, 变量配置, 还有 命令行手册.
贡献点?
如果你使用Compass中有些建议和想法, 可以看下贡献 和 创建插件.
应用集成 Application Integration
Application Integration
Ruby on Rails
Rails 3.1
Just add compass to your Gemfile like so:
gem 'compass'
Also checkout this gist
Rails 3
compass init rails /path/to/myrailsproject
Rails 2.3
rake rails:template LOCATION=http://compass-style.org/rails/installer
Sinatra
require 'compass'
require 'sinatra'
require 'haml'
configure do
set :haml, {:format => :html5}
set :scss, {:style => :compact, :debug_info => false}
Compass.add_project_configuration(File.join(settings.root, 'config', 'compass.rb'))
end
get '/stylesheets/:name.css' do
content_type 'text/css', :charset => 'utf-8'
scss :"stylesheets/#{params[:name]}", Compass.sass_engine_options
end
get '/' do
haml :index
end
This assumes you keep your Compass config file in config/compass.rb. If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly. Check out this sample compass-sinatra project to get up and running in no time!
Sinatra Bootstrap - a base Sinatra project with support for Haml, Sass, Compass, jQuery and more.
nanoc
Minimal integration: just drop it in
One simple route for lightweight integration is to simply install compass inside nanoc. Then edit config.rb to point to the stylesheets you want to use. This means you have to have the Compass watch command running in a separate window from the Nanoc compilation process.
Example project that works this way: unthinkingly.
More formal integration
At the top of the Nanoc Rules file, load the Compass configuration, like this:
require 'compass'
Compass.add_project_configuration 'compass.rb'# when using Compass > 0.10
sass_options = Compass.sass_engine_options# when using Compass > 0.10
Compass.configuration.parse 'compass.rb' when using Compass < 0.10
sass_options = Compass.config.to_sass_engine_options when using Compass < 0.10
Then create a compass.rb file in your site’s root folder and add your Compass configuration. An example configuration could look like this:
http_path = "/"
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
css_dir = "output/stylesheets"
sass_dir = "content/stylesheets"
images_dir = "assets/images"
javascripts_dir = "assets/javascripts"
fonts_dir = "assets/fonts"
http_javascripts_dir = "javascripts"
http_stylesheets_dir = "stylesheets"
http_images_dir = "images"
http_fonts_dir = "fonts"
You may need to change the path to some directories depending on your directory structure and the setup in your Rules file.
To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
compile '/stylesheets/*' do
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
end
nanoc projects using the formal approach
应用集成 Application Integration
Ruby on Rails
Rails 3.1（一款构建在 Ruby 语言之上的一款web框架）
添加compass到你的依赖中:
gem 'compass'
也可以去 gist(一款代码分享平台)看看
Rails 3
compass init rails /path/to/myrailsproject
Rails 2.3
rake rails:template LOCATION=http://compass-style.org/rails/installer
Sinatra
Sinatra （基于ruby的微型web框架）
require 'compass'
require 'sinatra'
require 'haml'
configure do
set :haml, {:format => :html5}
set :scss, {:style => :compact, :debug_info => false}
Compass.add_project_configuration(File.join(settings.root, 'config', 'compass.rb'))
end
get '/stylesheets/:name.css' do
content_type 'text/css', :charset => 'utf-8'
scss :"stylesheets/#{params[:name]}", Compass.sass_engine_options
end
get '/' do
haml :index
end
假设你保存配置文件到 config/compass.rb. 如果你保存样式表到 “views/stylesheets/” 目录，而不是 “views/”, 记得按你设置好的配置更新 sass_dir . 看看 sample compass-sinatra project 实时运行!
Sinatra Bootstrap - 一个 支持Haml, Sass, Compass, jQuery 等 的Sinatra项目.
nanoc
nanoc 是一个用 Ruby 实现的静态网页产生工具
最小集成: 只需要拖他进去
最简单的途径集成compass到nanoc. 更改 config.rb 指向到你所使用的样式表. 你需要单独运行一个窗口用Compass watch命令监控编译nanoc程序.
实力项目，如: unthinkingly.
标准集成
Nanoc文件规范的首要要点, 像这样加载 Compass 配置文件:
require 'compass'
Compass.add_project_configuration 'compass.rb'# when using Compass > 0.10
sass_options = Compass.sass_engine_options# when using Compass > 0.10
Compass.configuration.parse 'compass.rb' when using Compass < 0.10
sass_options = Compass.config.to_sass_engine_options when using Compass < 0.10
创建并配置一个 compass.rb 文件到你站点的根目录 .示例配置:
http_path = "/"
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
css_dir = "output/stylesheets"
sass_dir = "content/stylesheets"
images_dir = "assets/images"
javascripts_dir = "assets/javascripts"
fonts_dir = "assets/fonts"
http_javascripts_dir = "javascripts"
http_stylesheets_dir = "stylesheets"
http_images_dir = "images"
http_fonts_dir = "fonts"
根据您的目录结构和配置，您可能需要更改一些目录的路径。
Sass 和 Compass过滤样式表, 从Compass按照配置好的sass引擎，调用sass进行过滤, 如下:
compile '/stylesheets/*' do
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
end
nanoc projects using the formal approach
最佳实践 Best practices
Here are some best practices for making your projects easier to build and simpler to maintain.
Use a Base stylesheet file
Create a _base.scss partial to initialize your stylesheets with common variables and (often) the framework utilities you plan to use:
_base.scss
$blueprint-grid-columns : 24;
$blueprint-grid-width : 30px;
$blueprint-grid-margin : 10px;
$font-color :333;
@import “compass/reset”;
@import “compass/utilities”;
@import “blueprint”;
// etc.
The _base.scss file is also a great place to keep your own custom mixins, so they’re available to any stylesheet that includes it.
Then you can include this file in all other stylesheets:
application.scss
@import “base”;
#wrapper {
@include container;
}
// etc.
It is important to define any compass/framework constants that you want to override in base.scss first, before @import-ing the framework files. See Working with Configurable Variables, for a specific example. Note that you can refer to _base.scss without the leading underscore and without the extension, since it is a partial.
Write your own Custom Mixins
Mixins let you insert any number of style rules into a selector (and its descendants!) with a single line. This is a great way to DRY up your stylesheet source code and make it much more maintainable. Using mixins will also make your stylesheet look like self-documented source code – It’s much more obvious to read something like @include round-corners(6px,f00) than the whole list of rules which define that appearance.
Presentation-free Markup
CSS was created to extract the presentational concerns of a website from the webpage content. Following this best practice theoretically results in a website that is easier to maintain. However, in reality, the functional limitations of CSS force abstractions down into the markup to facilitate the DRY principle of code maintainability. Sass allows us to move our presentation completely to the stylesheets because it lets us create abstractions and reuse entirely in that context. Read this blog post for more information on the subject.
Once you have clean markup, style it using Mixins and Inheritance. With clean and clear abstractions you should be able to read stylesheets and imagine what the webpage will look like without even loading the page in your web browser.
If you find your CSS is getting too bloated due to sharing styles between semantic selectors, it may be time to refactor. For instance this stylesheet will be unnecessarily bloated:
@mixin three-column {
.container { @include container; }
.header,
.footer { @include column(24); }
.sidebar { @include column(6); }
article { @include column(10); }
.rightbar { @include column(8); }
}
body#article,
body#snippet,
body#blog-post { @include three-column; }
Instead, ask yourself “what non-presentational quality do these pages share in common?” In this case, they are all pages of content, so it’s better to apply a body class of “content” to these pages and then style against that class.
Nest selectors, but not too much.
It’s easier to style a webpage from scratch or starting from some common base point for your application than it is to contend with unwanted styles bleeding into your new design. In this way, it is better to use some basic nesting of styles using some selector early in the markup tree. And then to refactor as patterns of use emerge to reduce bloat.
It’s important to remember that long selectors incur a small rendering performance penalty that in aggregate can slow down your web page. There is no need to exactly mimic your document structure in your css. Instead nest only deep enough that the selector is unique to that part of the document. For instance, don’t use table thead tr th when a simple th selector will suffice. This might mean that you have to separate your styles into several selectors and let the document cascade work to your advantage.