SCSS基本使用教學:變數、巢狀、函式、繼承寫法

梅問題-SCSS基本使用教學:變數、巢狀、函式、繼承寫法
  現在製作網頁愈來愈複了,不再像以前只需透過Photoshop+Dreamwaver,就能快速的將平面轉成網頁,之所以現在會使用Jade、SCSS不外乎就是希望能縮短網頁切版的製作時程,同時也減少重覆性的屬性編寫,與減少畫面跑版,找尋標籤忘了結尾的問題, 而透過Jade Html - Templat,正可以解決html標籤開關門的問題,接下來網頁的樣式,就可交給SCSS來幫忙解決,而SCSS是相當適合已經熟悉CSS的網頁設計師來使用,使用上完全沒任何的不適感,同時還能善用SCSS所提供的像是變數、巢狀、函式....等機制,讓在寫CSS時更具結構化,同時要修改時也更加容易,因此對於SCSS感興趣的朋友,也一塊來看看。

SCSS 變數(Variables):
在SCSS中,當要使用變數時,只要使用$當起頭,後方再放入所要設定的參數值就可以了,這對於設定網站的標準色相當的方便,如此一來就不用每次往返的查詢當初所設定的顏色是什麼。
var.scss
$color1 : #FD1B3F;
$color2 : #F7E02A;
$color3 : #6AC217;
$color4 : #403ED3;
$color5 : #ffffff;
$color6 : #000000;
a{
background: $color6;
color:$color5;
}

var.css

a {
background: #0000;
color: #ffffff;
}


在變數的地方,除了是文字外,也支援數學的運算。<br>
var-1.scss
$num:5px;

.container{
margin:$num*2 $num;
}


var-1.css
.container{
margin:10px 5px;
}


SCSS 巢狀(Nesting):
巢狀結構算是最常被使用的,透過巢狀式的結構,可清楚的知道元素上下層的關聯性,同時也可減少重覆的編寫開頭。
nessing.scss
.container {
  width: 1170px;
  margin:0 auto;

  .post {
    border: solid 1px #ccc;
    padding: 10px;
     .post-info{
       background:#eee;
       font-size: 12px;
       padding: 10px;
        p {
         color:#333;
        }
     }
   }
}

nessing.css

.container {
width: 1170px;
margin: 0 auto;
}

.container .post {
border: solid 1px #ccc;
padding: 10px;
}

.container .post .post-info {
background: #eee;
font-size: 12px;
padding: 10px;
}

.container .post .post-info p {
color: #333;
}


SCSS 函式(Mixins):
函式的部分,可將一些重覆性的屬性給行寫好,像是CSS3的動畫,或是一些CSS3的新屬性,前方需加前綴詞的部分,就可透過函式來完成,同時函式本身還具備參數的機制,因此也可入參數,使用上就更加靈活。
mixins.scss

@mixin css3-transition() {
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}

.post {
@include css3-transition();
}


mixins.css
.post {
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}

而也可透過參數的方式,來設定函式裡面的設定值。
mixins-1.scss

@mixin css3-transition($i) {
transition: width $i;
-moz-transition: width $i;
-webkit-transition: width $i;
-o-transition: width $i;
}

.post {
@include css3-transition(5s);
}


mixins-1.css
.post {
transition: width 5s;
-moz-transition: width 5s;
-webkit-transition: width 5s;
-o-transition: width 5s;
}

SCSS 繼承(Extend):
繼承聽起來很複雜,其實簡單的來說,就是CSS中的群組,可將共用到的放在一起,而寫法也相當的簡單。
extend.scss

body {
margin:0
padding: 0;
color: #333;
}

h1 {
@extend body;
font-size:30px;
}

h2 {
@extend body;
font-size:24px;
}

p {
@extend body;
font-size:15px;
}


extend.css

body, h1, h2, p {
margin:0;
padding: 0;
color: #333;
}

h1 {
font-size:30px;
}

h2 {
font-size:24px;
}

p {
font-size:15px;
}


  以上這五個是最常被使用到,當然SCSS也具備一些像for迴圈與if判斷式,這邊梅干就不多作介紹,而工具是要提升工作效能,因此對於for迴圈與if判斷有興趣的朋友,可再自行研究,而這五大類,就足以解決版型樣式設定上的大大小小需求,同時在SCSS中,若這五大類都不需使用時,也可直接寫CSS也是可以的,同時不會出現任何的錯誤,這有別於SASS,因此梅干才說SCSS相當適合網頁設計師來使用,因此還在觀望的朋友,不妨有空也可使用看看喔!

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。