104 New B

SCSS & style guide

Derek Hong

SCSS

Sass with compass

經由compile出css檔案

安裝與使用

Installed

Windows:

http://blog.yam.com/hanasan/article/66719615

Linux:

http://blog.longwin.com.tw/2011/06/linux-sass-install-usage-2011/

Mac:

http://ilandy-chiu-blog.logdown.com/posts/188205-mac-install-sass

其實方法都差不多啦～

Then?

  • 設定好config (別擔心已經設好了)
  • cmd -> 到config 所在的資料夾 -> compass watch

compass 會自動監聽你對於scss檔案的所有變更，並即時compile出css檔案

當然你也可以用...

koala

http://www.minwt.com/html/12059.html

fire.app

http://fireapp.kkbox.com/doc/tw/getting_started.html​

SCSS特性

  • 變數
  • 巢狀結構
  • Function
  • Mixin
  • 繼承
$color-plus-maincolor: #eee;

.home {
    background-color:$color-plus-maincolor;
}

.block {
    background-color:$color-plus-maincolor;
}

//更酷的是可以直接運算

$width-plus: 100px;
$width-left: 50px;

.left-big {
    width: $width-plus + $width-left;
}

//result : 150px

自行設定變數

( CSS 語義化 )

//scss

.home {
    width:110px;
    .home2 {
        width:120px;
        &:hover {
            color:yellow;
        }
    }
    &.active {
        color:red;
    }
}


//css

.home { width: 110px; }
.home .home2 { width:120px; }
.home.active { color:red; }
.home .home2:hover { color:yellow }

巢狀

巢狀過深會造成閱讀上的困難，因此還是要搭配pure css的寫法來減少巢狀結構

//scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

//css

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

//注意！！mixin裡面還可以放if/else喔！

@mixin border-radius($radius) {
  @if $radius == '10px'{
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
    } @else {
        background:red;
    }  
}

Mixins

神功能，mixin用得好可以減少大量scss code

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

extend

可繼承extend class 的所有樣式

compass 優良部分

Compass/css3

@import "compass/css3";
.box{
	@include border-radius(5px);
}

resault:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

Compass/reset

就是reset.css

inline background

	
background: inline-image("images/fav_ico.png") no-repeat;

//會產生base64的圖片網址

其他還有很多好用的功能任君選用

Compass sprites

自動壓縮圖片功能

壓縮圖片、減少request

step 1

// config.rb

require 'compass/import-once/activate'
require 'breakpoint'
# Require any additional compass plugins here.

Encoding.default_external = "UTF-8"

# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"  <-- 確保你的圖片資料夾路徑正確
javascripts_dir = "js"

在圖片資料夾下面新增icon資料夾，要壓縮的圖片都放在此資料夾內（限png）

sprite.scss

@import "compass/utilities/sprites";//可寫可不寫

$my-icons-spacing: 20px; //每個圖片間隔寬度
$my-icons-sprite-dimensions: true; // 讓他依照圖片產生寬高

@import "my-icons/*.png"; //『my-icons』是你自訂的資料夾名稱
@include all-my-icons-sprites; // 『all-』 後面接著的 『my-icons』也記得是你自訂的資料名稱

//sprites.css

.all-menu1-1 {
  background-position: 0 -603px;
  height: 30px; //自動抓出來
  width: 66px; //自動抓出來
}
.all-menu1-2 {
  background-position: 0 -633px;
  height: 30px;
  width: 66px;
}
.all-menu2-1 {
  background-position: 0 -663px;
  height: 30px;
  width: 66px;
}

當然可以寫很多個方便管理

@import "compass/utilities/sprites";//可寫可不寫

$my-icons-spacing: 20px; //每個圖片間隔寬度
$my-icons-sprite-dimensions: true; // 讓他依照圖片產生寬高
@import "my-icons/*.png"; //『my-icons』是你自訂的資料夾名稱
@include all-my-icons-sprites; // 『all-』 後面接著的 『my-icons』也記得是你自訂的資料名稱


$myfav-icons-spacing: 10px; 
$myfav-icons-sprite-dimensions: true; 
@import "myfav-icons/*.png"; 
@include all-myfav-icons-sprites;

實際使用

.textbg {
    @include my-icons-sprite(textbg); //裡面指定你的圖檔名稱
    /*以下是如果你沒有寫前面提到的設定的話*/
    width: image-width("my-icons/textbg.png"); //圖檔的寬
    height: image-height("my-icons/textbg.png"); //圖檔的高   
}

//當然也可以在之後做一些後續的調整

.epg-pretime-day {
    @include sprite-background-position($epg-sprites, pretime-day, 7px, 19px);
}

SCSS檔案架構與撰寫規範

參考

SCSS檔案架構

Many SCSS, one CSS

<link rel="stylesheet" href="{{ uri_prefix }}/css/all.css" />

html只需include一個檔案

  • 因為只有一個檔，所以不會有圖片網址的問題

檔案結構表

all.scss            //全部匯集到此scss
_layout.scss        //天、地、基本排版、rwd layout
_colors.scss        //基本顏色變數、基本顏色設定、元件顏色設定
_typography.scss    //字型大小設定、import 字體、各種tag字體設定、文本設定
_page.scss          //各page的scss
_mixin.scss         //只放mixin、function  給別人import用的、sprites設定也放這邊
_partials.scss      //重複使用的元件放到這邊，盡量打造容易重複使用的結構
sprites.scss        //用來放sprites的設定

//資料夾
basic/
partials/
        lightbox.scss
        somebtn.scss
        ...
page/
        persernal.scss
        home.scss
        ...

//偷懶
_general.scss       //真的沒地方放放這邊，但是有這個後通常就會什麼都放這邊.....

all.scss

@import "compass/reset";
@import "sprites";
@import "mixins";   	// 常用的 mixin
@import "layout";   	// website framework , girds & position
@import "colors";		// 整體顏色設定
@import "typography";	// 整體字型設定
@import "general";		// 常用的一些設定
@import "partials";
@import "pages";		// 所有page css

//that's all
.page-personal{

    .container{

    }
    .box{
    
    }

}

[page] personal.scss

用一個大scope包起來以防干擾

撰寫語法規範

基本原則

  • 不要使用！important
  • 不可濫用巢狀，適度混和傳統css寫法
  • 盡量讓自己的css code模組化
  • 前綴詞的使用（討論）

.class{
    @include somemixin(200px);
    width:200px;
    color:red;

    &:hover{
    
    }
    .sub-class{

    }
    
}

自有屬性放前面、mixin/extend放前面

 

  • 基礎字體大小設定在html上
  • 行高沒有單位 
  • 字體大小以百分值定義
  • margin、padding以em定義

字體

HTML & CSS PATTERN

http://juanitofatas.com/code-guide/

進階與其他資源

  • susy：rwd神器
  • animate.scss : 用變數管理動畫
Made with Slides.com