SCSS styleguides.md

#Coding style:

• 使用兩個半型空白作為縮排。
• 在 property 宣告中的 : 後面皆一個半型空白。
• 在 { 的宣告前面加上一個半型空白。

範例：

.styleguide-format {
      border: 1px solid #0f0;
      color: #000;
      background: rgba(0,0,0,0.5);
}

#結構：

 stylesheets
 ├── app(App 的 StyleSheets)
 |   ├── features
 |   |    ├── _comments.css.scss
 |   |    └── _feeds.css.scss
 |   |
 |   ├── pages(僅作為單一頁面使用的 StyleSheets)
 |   |	  |
 |   |    ├── login.css.scss
 |   |    └── invitation.css.sc	ss
 |   |
 |   ├── products(App 基於 Model 元件頁面的 StyleSheets)
 |   |	  |
 |   |    ├── events.css.scss
 |   |    └── tracks.css.scss
 |   |
 ├── foundation(App 視覺的主架構，以及可重複共用的元件)
 |   |
 |   ├── _wigets.scss
 |   ├── _background.scss
 |   ├── _container.scss
 |   ├── _foreground.scss
 |   ├── _layout.scss
 |   ├── _spacers.scss
 |   ├── _typographies.scss
 └── Library(App 視覺的預設變數設定，以及 SCSS 的 function 或 mixin)
     ├── _config.scss
     ├── _variables.scss
     ├── Library.scss
     └── _helper.scss

• app: App 頁面的 Style
  • features: 可共用的區塊頁面，像是留言、動態這種可以在網站中各種不同頁面被重複利用的區塊頁面。
  • pages: 僅為了單一目的而設計的頁面，像是 Landing page、登入頁面。
  • products: 動態產生的頁面，以 Controller 的 Actions 來區分，像是活動列表(events.css.scss)、活動頁面(event.css.scss)。
• foundation: Style 的制定，不產生 CSS 檔案的 Mixin 集合
  • _widget: 可被重複利用的頁面元件，像是 Navbar、Widget。
  • _background: 背景的 mixin。
  • _container: 容器的 mixin。
  • _foreground: 前景的 mixin。
  • _layout: 布局的 mixin。
  • _spacer: 空間的 mixin。
  • _typographies: 字體的 mixin。
  • foundation.css.scss: 使用 @import 匯入整個 foundation 中定義的 mixin。
• Library：全站所使用的變數以及 Helper。
  • _variables: 所有制定的變數以及調色盤。
  • _helper: 就是 helper。
  • Library: 使用 @import 匯入整個 Library 的設定。

#使用方式:

• 在 application.css 中取消使用原先的 require_tree . 改成 require 整個 app 資料夾。
• app 資料夾中的頁面 Style 皆需 import foundation 及 library 兩支 mixin 來使用。
• mixin 的命名必須是語意化的，例如 right-bottom-shadow-box 表示一個在右下有陰影的容器設定。

@import "library/library";
@import "foundation/foundation";

• 使用 foundation 中的 mixin 來闡述一個元件的 Style，例如：

<div id="example"></div>

#example {
	@include reading-text; //字體
	@include right-bottom-shadow-box; //容器
	@include bright-widget-bg; //背景
	@include bright-bg-type; //前景
	@include vertically-separated; //空間
	@include vertically-padded; //空間
}

##Selector: 定義 Selector 力求精確，舉例來說，像是下面這個 Markup:

<header>
  <ul class="main-nav>
    <li></li>
  </ul>
</header>

使用 header ul{} 以及 .main-nav{} 都可以選到我們的 main-nav，但兩者有不同的意義，前者是一個在 header tag 裡的 ul 而後者則是選擇一個 main-nav。