2013年11月2日 星期六

安裝 Compass

compass簡介：

Compass 使用 Sass，而 sass 是一種 Css Preprocessor / Css Extension，
Compass & Sass 都是需要 Ruby 編譯
Compass 是一個 css 編寫 Framework (css authoring framework)
(題外話，像 Sass 這種透過編譯的方式就可以產出 Css 的 通常稱之為 CSS 預處理器(css preprocessor)，當然世界上不止 Sass，很多人也聽過 less, stylus 等等的，可以看看 8 CSS preprocessors to speed up development time)

通常大家都會 Sass 搭配 Compass 做使用，為什麼？因為 Sass 搭配 Compass 更強大，這也是為什麼很多網路上的教學都會把這兩個一起做教學。

比方說 Compass 讓我覺得最主要的功能是 @import ，比方說我們需要用到 border-shawow，會幫你寫好所有的 css 前綴，像這樣：

@import 'compass/css3/box-shadow'
h1
    @include box-shadow(3px)
而編譯後會得到的結果是： 

h1 {
  -moz-box-shadow: 3px;
  -webkit-box-shadow: 3px;
  box-shadow: 3px;
}

要開始用 Compass 以及想要擁有 import, sprites 等等的功能，你必須要有可以編譯 compass 的環境，或者是一些現成的工具，以下是介紹用 CLI 安裝 Compass。
compass 有很多很神奇之處，之後再聊 :) 我歡迎有人陪我一起學習。

Setup Compass Environment

更新 gem
sudo gem update --system

安裝 compass
sudo gem install compass

初始化(init)一個專案
compass create <YourProjectName>

初始化完畢，會在 Command Line 見到以下訊息
  • 這些說明所表達的意思：
    1. 已經幫你 scaffolding 專案目錄以及子目錄, 相關檔案等等
    2. config.rb 是主要的設定檔
    3. stylesheets 資料夾放 css 檔案
    4. sass 資料夾放 sass 或 scss 檔案
    5. 編譯指令可以用 compass compile path/to/project
    6. watch 指令可以用 compass watch path/to/project
    7. 什麼是 watch? 當你用 watch 時表示每當你修改 sass 存檔後就會自動 compile 該 sass，有點類似監控你是否有存檔的行為
    8. compile 之後，應該 (很有機會) 會出現 . sass-cache 資料夾，這是快取的資料夾，通常如果該專案有用 git 控管，我會把它家到 .gitignore，或是修改 .sass-cache 路徑到 /tmp 資料夾底下。
wintekiMacBook-Pro:compass_practice win$ compass create web
directory web/
directory web/sass/
directory web/stylesheets/
   create web/config.rb
   create web/sass/screen.scss
   create web/sass/print.scss
   create web/sass/ie.scss
   create web/stylesheets/ie.css
   create web/stylesheets/print.css
   create web/stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>



通常建立完之後，恩...然後呢？
你可以開始編輯你的 sass 資料夾裡的 sass 或是 scss。
寫完後進行編譯:
compass compile [path/to/project]
或是也可以 watch:
compass watch [path/to/project]

註：通常如果看到 sass 的檔案是用『_』下底線開頭的，那表示他是屬於 partial 的檔案（類似被別的檔案 import 的意思），不會被獨立編譯成 css 檔。


Config.rb
config.rb是主要的設定檔，預設會長這樣:
比方說 css_dir 是指你 sass 編譯後檔案的路徑，如果你不想放在 stylesheets 資料夾，你可以改這些設定，比方說改成 css_dir = "assets/css"。
當然設定不止這些，看看官方提供的設定 Configuration Reference
舉例來說如果希望編譯後是被壓縮的，可以加一行 output_style = :compressed


下一步可以開始看怎麼用 @import。
通常我都會再回官網，找找看我要用的 css 是要 import 哪一個模組的哪個功能。

不喜歡下指令的選擇

文章蒐集
教學影片

於
標籤： , ,

沒有留言:

張貼留言

若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD

訂閱： 張貼留言 (Atom)

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...