compass入門

　　本文將參考官方文檔，結合最佳實踐，讓咱們把compass用起來。

　　進入項目目錄（有疑問回看上一篇sass+compass起步），在sass目錄下新建_base.sacc文件，該文件的用處是初始化樣式表，內容是全局變量和要用的框架，此外，還能夠放一些本身寫的mixins。

　　P.S.下劃線_開頭的sacc文件不會編譯成css，要注意，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。 例如， _base.scss 不能與 base.scss 並存。

　　一、變量

　　sass中有2種方式定義變量（注意變量名前要有$，就像less的變量前是@）：

$my-constant : #fedcba  //定義變量my-constant爲#fedcba
$my-constant : #fedcba !default  //定義變量my-constant的默認值爲#fedcba

　　不少compass模塊在使用的時候容許自定義設置默認值，作法是在引入該模塊以前定義好變量，就像這樣：

$blueprint-grid-columns = 12
@import "blueprint/grid"

　　二、_base.sacc

_base.sacc:

$font-color: #333;

@import "compass/reset";

而後咱們就能夠在其餘全部的scss文件中引入該文件了，好比在test.scss文件中：

@import "base";

.test{
    color: $font-color;
}

編譯後的css文件以下：

/* line 5, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, D:/programs/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* line 3, ../sass/test.scss */
.test {
  color: #333;
}

View Code

　　知道如何引入模塊和變量以後，就須要考慮哪些模塊須要引入。

　　compass主要有7大模塊，分別是Browser Support、CSS三、Helpers、Layout、Reset、Typography和Utilities。

　　引入：

@import "compass";  // 引入除了reset和layout以外的全部模塊，layout模塊用的少，就不引入了，reset模塊須要用normalize插件替換

　　安裝normalize：

gem install compass-normalize

　　config.rb增長下面一行代碼:

require 'compass-normalize' 

　　修改_base.sacc文件：

@import "compass";
@import "normalize";

　　此外還要經過Browser Support模塊設置瀏覽器的兼容性。

　　利用sacc的debug能夠在命令行中顯示一些咱們想看到的信息，好比，查看支持哪些瀏覽器，在sacc文件中輸入：

@debug browsers();

　　就能夠在命令行窗口中看到支持的瀏覽器列表，默認是全部的瀏覽器：

　　可是通常不須要支持這麼多瀏覽器，因此須要配置supported-browsers變量，好比，只支持chrome、ff和ie：

$supported-browsers: chrome,firefox,ie;

　　一個瀏覽器會有不少版本，因此須要配置browser-minimum-versions指定瀏覽器支持的最低版本，好比指定chrome支持到39，ff支持到34，ie支持到10：

$browser-minimum-versions: ("chrome": "39", "firefox": "34", "ie": "10");

　　因此最後咱們的_base.sacc長這樣：

//browser support
$supported-browsers: chrome,firefox,ie;
$browser-minimum-versions: ("chrome": "39", "firefox": "34", "ie": "10",);

@import "compass";
@import "normalize";

　　而後就能夠在其餘全部的sacc文件中引入該文件了，而且不須要擔憂瀏覽器兼容性。

　　三、sass+compass

　　好比使用CSS3模塊的border-top-right-radius：

　　好比使用Typography模塊的link-colors：

　　接下來就是熟悉好compass各大模塊都有什麼具體功能。知足不了的話能夠自行添加插件或本身寫mixins。