SCSS 基本語法

要先從 Sass 說起 Sass 是 Syntactically Awesome Stylesheet
是一種 Preprocessor (預處理器) , Sass 經過編譯後,會變成 CSS 語法

SCSS – Sassy CSS 是一種 Sass 風格的 CSS 檔名是 .scss

有很多比 CSS 簡潔的地方

——–

* 注解的方式

// 這是注解

用 SCSS // 產生的注解會在編譯過程消失

——–

* 匯入檔案

@import "main";

附檔名可以不用打

在命名的時候可以注意
加上 _ 的檔名只會被 import 不會編譯成單獨檔案

_button.scss 這個檔

@import "button";

只會匯入不會單獨編譯成檔
——-

* 可以很容易的寫巢狀

.content {
    color: #000;
    h1 {
        font-size: 32px;
    }
    p {
        font-size: 16px;
    }
}

就等於

.content {
    color: #000;
}
.content h1 {
    font-size: 32px;
}
.content p {
    font-size: 16px;
}

不過要注意最好不要有太深的巢狀寫法,限制在3-4層比較好
再深就必須重構
——

* 可以建立對父元素的參考

.content {
    color: #000;
    &:hover {
        font-size: 32px;
    }
    & .main{
        font-size: 16px;
    }
}

就等於

.content {
    color: #000;
}
.content:hover {
    font-size: 32px;
}
.main .content {
    font-size: 16px;
}

————-

* 可以使用變數

$base-color: #ccc;

.box {
    border: 1px solid $base-color;
    color: $base-color;
}

* 在定義一次的話會覆蓋過去

$base-color: #ccc;
$base-color: #000;

這樣的話 $base-color 會是 #000

* 不過可以設定預設

$base-color: #ccc;
$base-color: #000 !default;

加上 !default 會變成預設的值

這樣的話 $base-color 反而會是 #ccc 比預設值蓋掉

* 變數有 scope
在 { } 的範圍內可見

h1 {
    $color: #000;
}
p {
    color: $color; // 會 error
}

* 全域變數在區域內改寫是全域都改寫

$base-color: #333;

h1 {
    $base-color: #C72F21;
}
p {
    color: $base-color; // #333 因為變數是全域變數
}

* 要把變數用在選擇器、變數名稱的話要用 #{ }

$side: top;
border-#{$side}: 1px solid $base-color;

————–

* mixin

常常要重複寫一樣的樣示時可以用mixin

@mixin box-sizing($x: border-box) {
    -webkit-box-sizing: $x;
    -moz-box-sizing: $x;
    box-sizing: $x;
}

.content {
    @include box-sizing;
    border: 1px solid #ccc;
    padding: 20px;
}

.callout {
    @include box-sizing(content-box);
}

可以在 mixin 名稱後面加入參數、設定預設值
然後用 @include 引入

多參數的話可以用 , 隔開,但是沒有預設值的參數要放前面

要一個或多個參數時要在參數後面加上 …

@mixin transition($val...) {
    -webkit-transition: $val;
    -moz-transition: $val;
    transition: $val;
}

.btn-a {
    @include transition(color 0.3s ease-in, background 0.5s ease-out);
}

—————–

* 繼承的方式 extend

.btn-a {
    color: red;
}

.btn-b {
    @extend .btn-a;
    background: #333;
}

但這樣會把之後所有的 .btn-a 與相關的
例如 .btn-a p 或是 .content .btn-a 都繼承

不想要這樣的話可以使用一個只用來參照而不用來當選擇器的 %

%btn {
    color:red;
}
.btn-a {
    @extend .btn;
}
.btn-b {
    @extend .btn;
}

這樣之後再對 .btn-a 做其他相關的設定就不會干擾到 .btn-b 了

——–

再來介紹幾種程式語言中常會出現的語法

* function

@function percentage($target, $context) {
    @return ($target / $context) * 100%;
}

.sidebar {
    width: percentage(450px, 768px);
}

—–

* if (if-elseif-else)

可用的判斷式有 == != > >= < <=

.main {
    @if $base-color == red {
        font-size: 16px;
    } @else if $base-color == blue {
        font-size: 18px;
    } @else {
        font-size: 20px;
    }
}

—–

* each

$sideList: top right bottom left;

@each $side in $sideList {
    border-#{$side}: 1px solid #555;
}

—–

for (for from through)

.item {
    position: absolute;
    right: 0;
    @for $i from 1 through 3 {
        &.item-#{$i} {
            top: 30px * $i;
        }
    }
}

—-

* while

$i: 1;

.item {
    position: absolute;
    right: 0;
    @while $i <= 3 {
        &.item-#{$i} {
            top: 30px * $i;
        }
        $i: $i + 1;
    }
}

—–

數學上有幾種運算子跟 function

+

*
/ (有時候需要加上括號或其他運算子避免被當成一般語法)
%

round($number)
ceil($number)
floor($number)
abs($number)
percentage($number)
min($list)
max($list)

——————–

顏色

rgba(#111111, 0.8);
可以用 hex 取代 rgba

lighten($color, 20%); // 調亮
darken($color, 20%); // 調暗
saturate($color, 20%); // 升飽和
desaturate($color, 20%); // 降飽和
mix($color1, $color2, 30%); // 混合比例
grayscale($color); // 灰階
invert($color); // 反轉
complement($color); // 補色

更詳細的可以看文件:
http://sass-lang.com/documentation/Sass/Script/Functions.html

————-

responsive (media query)

可以寫入巢狀

.sidebar {
    border: 1px solid #ccc;
    @media (min-width: 700px) {
        float: right;
        width: 30%;
    }
}

可以建立以裝置分別的 media query mixin

@mixin response-to($media) {
    @if $media == tablet {
        @media (min-width: 700px) {
            @content
        }
    }
}

.btn {
    @include response-to(tablet) {
        //......
    }
}

也可以用以 min-width 為主的

@mixin response-to($query) {
    @media (min-width: $query) {
        @content
    }
}

.btn {
    @include response-to(780px) {
        //......
    }
}

或是也可以設兩個參數來調整 min-width 跟 值

不過要特別注意
宣告在 media query 外面的元素不能在裡面 extend

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s