iT邦幫忙

DAY 32
8

30天掌握Sass語法系列 第 28

Sass開發流程設計 - (2) Sass結構規劃、全域變數設定

切完所有圖片後,
就可以開始規劃Sass檔案了,

當你今天新建立一個Sass專案時,
裡面預設會有print、ie、screen的Sass檔案,
第一次撰寫Sass的新手我是會建議全部刪掉,再依序建立Sass檔案,
建立的檔案與@import先後順序為:

@import compass
@import variable  //專門放變數
@import mixin  // mixin
@import reset  // reset 網頁用的css
@import extend // 合併CSS用,裡面都是使用%的符號來取代class的「.」符號。
@import index // 撰寫Sass 首頁樣式


由於目前我只切一頁首頁,
所以Sass這一次我只切割為一隻_index.sass,
但如果你是多頁Sass檔案時,
可以再細分有layout的共通框架、
或者依照各單元再切割Sass檔案,
這樣才會有助於你立即找到你想要改的Sass檔。

我自己用sublime編輯器,是較常用下面的熱鍵:

Ctrl+P //輸入關鍵字就可以開啟檔案,不用打得很完全他還是會幫你搜尋出來
Ctrl+w //關閉目前所在檔案
alt+數字鍵 // 檔案間切換

這樣當你要修改各Sass檔案時,
就可以透過熱鍵的幫助讓你很快地就能修改檔案,
相關操作流程可再瀏覽錄製的影片。

接下來我們就可以開始規劃全域的變數部份了,
像之前曾有講到關於比較常用的全域設定有下述幾種:

$text-color:pink→預設文字顏色
$link-color:#000→文字連結樣式,多則就再加紹數字
$link-color-hover:#fff→滑鼠拖曳過後的樣式顏色
$font-size:13px→全域字型大小,如一網站有多種就下多種字型
$line-height:1.8→全域行距
$container-width:960px→ 網站整體寬度
$font-style:"Helvetica Nueue", Arial, Sans Serif; →全域字型

以我這次要切的版型中,我則先設定了三種全域樣式:
1.網站預設文字顏色: $text-color: #292929
2.熱門文字顏色: $hot-color: #01a5ca
3.網站整體寬度: $width:940px

你可能會想說為什麼我不一次到位,
把所有的全域設定都先設定好呢?
其實這個部分也會關係到你是什麼角色。

像以譬如來說我是前端工程師,
所以美術設計師在設計網站版型時,
通常都是一頁一頁給過來,
我再一頁頁切。

我會不曉得我所設定的東西是否在其他版型又有所變化,
所以通常有些東西真的比較常見我就會先設定,
但就不會一次都設定完,
以避免之後設計頁面一一給過來才發現又必須調整很多地方。

但如果你是美術設計師/網頁設計師,
你在設計畫面的同時,其實就可以開始考慮你的全域變數該怎麼設計了,
因為版型皆在你的掌控之下,就算其他版型不出來,你也可以先預設立場來設計。

當然也可以雙方溝通好後再設計變數,
也是沒問題的,全域變數設計完後,
預設文字顏色你就可以放在html或body的CSS來設定文字預設顏色樣式與變數。

明天我就會開始實際開發Sass與HTML內容,敬請期待嘍^_^
另附上影片開發流程:

延伸閱讀:
(03)如何透過「變數」提升撰寫CSS效率
http://ithelp.ithome.com.tw/question/10127206
(05)利用Sass「@import」進行CSS檔案模組切割
http://ithelp.ithome.com.tw/question/10127832
(10)如何建立自己的Sass Reset CSS:
http://ithelp.ithome.com.tw/question/10129547
(18)規劃你的Sass結構
http://ithelp.ithome.com.tw/question/10132821


上一篇
Sass開發流程設計 - (1) 切圖、規劃Layout
下一篇
Sass開發流程設計 - (3) 網頁排版流程(上)
系列文
30天掌握Sass語法41

2 則留言

我要留言

立即登入留言