Sass(Syntactically Awesome Stylesheets)——概述（待續）

官網地址：http://sass.bootcss.com/

 

 

Sass(Syntactically Awesome Stylesheets)

Sass 是成熟、穩定、強大的 CSS 擴展語言。

 

特徵

兼容 CSS 語法

Sass 徹底兼容個版本的 CSS 語法。咱們對語法兼容嚴格把控，你能夠放心的使用任何現有的 CSS 庫。

功能豐富

Sass 比其餘 CSS 擴展語言具備更多的功能和特性。SASS 一直被追趕，從未被超越。

成熟

Sass 歷經核心團隊 7 年打磨。

久經考驗

一次又一次的證實，SASS 是業界的首選 CSS 擴展語言。

社區

數家企業和數百開發者在爲 Sass 提供支持。

前端框架的基石

無數前端框架由 Sass 構建： Compass,Bourbon, 和 Susy 等等。

 

Pre-processing

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.

Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.

 

Here's an example:

When the Sass is processed, it takes the variables we define for the $font-stack and $primary-colorand outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

Nesting

When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's navigation:

 

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this:

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the @import directive.

Import

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scssinto base.scss.

 

Notice we're using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss Sass is smart and will figure it out for you. When you generate the CSS you'll get:

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-radius.

 

To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this:

Extend/Inheritance

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.

 

:markdown What the above code does is allow you to take the CSS properties in .message and apply them to .success, .error, & .warning. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like:

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.

 

We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:

 

Sass (Syntactically Awesome StyleSheets)

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它容許你使用變量、嵌套規則、 mixins、導入等衆多功能， 而且徹底兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你可以快速開始小型項目， 特別是在搭配 Compass 樣式庫一同使用時。

特點

• 徹底兼容 CSS3
• 在 CSS 語言基礎上添加了擴展功能，好比變量、嵌套 (nesting)、混合 (mixin)
• 對顏色和其它值進行操做的{Sass::Script::Functions 函數}
• 函數庫控制指令之類的高級功能
• 良好的格式，可對輸出格式進行定製
• 支持 Firebug

語法

Sass 有兩種語法。

第一種被稱爲 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本，這份參考資料使用的就是此語法。 也就是說，全部符合 CSS3 語法的樣式表也都是具備相同語法意義的 SCSS 文件。 另外，SCSS 理解大多數 CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法。 這種語種語法的樣式表文件須要以 .scss 擴展名。

第二種比較老的語法成爲縮排語法（或者就稱爲 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式。 它不使用花括號，而是經過縮排的方式來表達選擇符的嵌套層級，I 並且也不使用分號，而是用換行符來分隔屬性。 不少人認爲這種格式比 SCSS 更容易閱讀，書寫也更快速。 縮排語法具備 Sass 的全部特點功能， 雖然有些語法上稍有差別； 這些差別在{file:INDENTED_SYNTAX.md 所排語法參考手冊}中都有描述。 使用此種語法的樣式表文件須要以 .sass 做爲擴展名。

任一語法均可以導入另外一種語法撰寫的文件中。 只要使用 sass-convert 命令行工具，就能夠將一種語法轉換爲另外一種語法：

# 將 Sass 轉換爲 SCSS
$ sass-convert style.sass style.scss

# 將 SCSS 轉換爲 Sass
$ sass-convert style.scss style.sass

　　

使用 Sass

Sass 有三種使用方式： 命令行工具、獨立的 Ruby 模塊，以及包含 Ruby on Rails 和 Merb 做爲支持 Rack 的框架的插件。 全部這些方式的第一步都是安裝 Sass gem：

gem install sass

若是你使用的是 Windows， 就須要先安裝 Ruby。

若是要在命令行中運行 Sass ,只要輸入

sass input.scss output.css

你還能夠命令 Sass 監視文件的改動並更新 CSS ：

sass --watch input.scss:output.css

若是你的目錄裏有不少 Sass 文件，你還能夠命令 Sass 監視整個目錄：

sass --watch app/sass:public/stylesheets

使用 sass --help 能夠列出完整的幫助文檔。

在 Ruby 代碼中使用 Sass 是很是容易的。 安裝 Sass gem 以後，你能夠執行 require "sass" ， 而後就能夠像這樣使用 {Sass::Engine} ：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

Rack/Rails/Merb 插件

若是須要在 Rails 3 以前的版本中啓用 Sass，能夠把這一行加到 environment.rb 中：

config.gem "sass"

對於 Rails 3，則是把這一行加到 Gemfile 中：

gem "sass"

要在 Merb 中啓用 Sass，須要把這一行加到 config/dependencies.rb 中：

dependency "merb-haml"

在 Rack 應用中啓用 Sass，須要在 config.ru 中添加：

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Sass 樣式表跟視圖（views）的運做方式不一樣。 它並無任何動態內容， 因此只須要在 Sass 文件更新時生成 CSS 便可。 默認狀況下，.sass 和 .scss 文件是放在 public/stylesheets/sass 目錄下的（這能夠經過 :template_location 選項進行配置）。 而後，在須要的時候，它們會被編譯成相應的 CSS 文件並被放到 public/stylesheets 目錄下。 例如，public/stylesheets/sass/main.scss 文件將會被編譯爲 public/stylesheets/main.css 文件。

 

http://www.javashuo.com/tag/緩存