搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. SCSS基本使用教學：變數、巢狀、函式、繼承寫法

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

2015/11/05

梅問題－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相當適合網頁設計師來使用，因此還在觀望的朋友，不妨有空也可使用看看喔!


scss, scss教學, scss用法, scss語法, scss資源,