重新認識切版 - Sass實作

雖然之前整理過一篇 Sass 筆記，但許多實作的地方紀錄的還是有點不清楚。

為什麼要使用 Sass?

管理 css 的時候非常方便。

但是，網頁只看的懂 css 檔案，副檔名還是 css，不用改 sass。

sass 的原理為，css 都寫在 sass 檔案裡面，途中就是經過編譯的地方，再轉換成 css。

Sass 程式語言，兩種格式寫法

1. SASS (利用空格去區分階層)
2. SCSS (保有括號與逗號)

如何編譯 Sass?

1. 軟體編譯
2. gulp，webpack 前端軟體 / 打包工具
3. 編輯器內建的插件

& 連接符號，可以跟據上一層的結構，繼續進行編譯。

.header{
    height: 500px;
    .content{
        background: yellow;
        a{
            color:white;
            &:hover{
                color:pink;
            }
        }
    }
}

使用變數

• 時常需要設定的 css 可以放在變數來管理。
• 變數使用美元 $ 符號開頭
• 結尾需使用分號
• 變數放在前面的位置，後面的 css 才會吃到

$link-color: #ffff;
$font-l:18px;
$text-color: #f00;
$font-size: 13px;
$width: 960px;

.shop li{
    width: $width / 4; <!--  編譯出240px    -->
}

.header a{
    width:500px;
    color:$link-color;
    font-size: $font-l;
}

變數搭配加減乘除好方便

變數格式

• 格式
  • 數字： 10，1px，3em
  • 字串： ‘test’，”../images/big”
  • 顏色： red，#000000
  • 布林： true，flase
  • 空值： null
• 支援運算 (1em+1em，6px*2)

數字

$link-color: #ff0000;
$font-m: 16px;
$font-l: $font-m * 1.2;

字串

設定不同的字體格式。

$font-family-base: "Arial,sans-serif";

調出理想的顏色

範例

darken，lighten的使用方法。

$base-color: #008000;

.box2{
	background: darken($base-color,20%);
}

.box3{
	background: lighten($base-color,30%);
}

Sass import - 切分檔案好工具，維護管理更方便

@import，可將 Scss 檔案彙整成一隻 CSS 檔。

有下底線的是會被合併的，_variable.scss。

拆開管理

@import "varialbe";

• _variable.scss
• _all.scss (import 全部的檔案)
• _main.scss

常見的錯誤

• 沒有在結束的地方加上分號
• variable 檔案(變數)，放在 main 下方(找不到變數)

CSS Reset 的差異

• meyerweb

全部清空

• Normalize

保有瀏覽器該有的樣式

整合 Reset 流程

1. _variable.scss
2. reset.scss
3. main.scss (自己寫的 css)
4. hover (載入別人的第三方插件)

從網路上載下來的檔案，直接在 css 後面改 scss 就好，前方加上下底線 _。

Sass Mixin - 讓你不會回想原理，而中斷思緒

@mixin 能記住 css 技巧，讓你不用再因回想原理而思緒中斷。

@mixin hide-text{
    text-indent:110%;
    white-space:nowrap;
    overflow:hidden;
}

.header h1{
    background:url('');
    @include hide-text;
}

Mixin + import 組合技

新增 _mixin.scss，在 all.css 加上此檔案。注意要放在 main.css 的上面。

搭配參數，讓 Mixin 更加靈活！

在@mixin加上變數，可以更靈活使用。

@mixin color($color){
    color: $color;
    border: 5px solid $color;
    text-decoration: $color
}

.header h1{
    @include color(blue);
}

熟悉 Mixin 後，搭配 RWD 宛如天衣無縫

@content 可以在撰寫 main.scss 的時候，放入適合的內容。

@mixin ipad {
    @media(max-width:768px){
        @content;
    }
}

@mixin mobile {
    @media(max-width:568px){
        @content;
    }
}

.header h1{
    width:100px;
    @include ipad {
        width:13px;
        font-size: 20px;
    }
    @include mobile{
        width:6px;
        font-size: 10px;
    }
    a{
        background: #000;
        @include mobile{
            color: red;
        }
    }
}

Sass/CSS 設計模式 - 教您最實用的網頁收納術！

OOCSS 是 CSS 的架構方法，在這基本原則下 CSS 具有以下特點：

1. 結構與樣式分離
2. 容器與內容分離

新技術的出現，就是要解決當下的問題。OOCSS 的出現，是就是強化了 CSS 的可複用性 與 CSS 的擴展能力。

結構與樣式

樣式表就像是幫手機換上不同的手機殼。結構與樣式分開，當想要換上手機殼時，只需要更換樣式就好。

/* 結構 */
.header{
    width:200px
    margin: 0 auto;
}

.clearfix{
    overflow:hidden;
}

/* 樣式 */
.header-shadow{
    box-shadow: 10px 10px 10px #000;
}

容器與內容

960 Grid System 就是一款容器與內容分離的格線系統。

容器處理容器的事情，內容處理內容的。

/* 容器 */
.container_12 .grid_12{
    width: 940px;
}

/* 內容 */
.header{
    width:771px;
}