SCSS 語法學習心得筆記

Sass - SCSS 語法初學

在上一篇【在 VISUAL STUDIO 撰寫 SASS(SCSS) 讓您快樂似神仙】中,我們完成了在 Visual Studio 裡開發 SCSS 的設定,這一篇主要是參考【Sass Reference】網站內容與【Sass & Compass: The future of stylesheets now.】簡報內容裡的程式碼做一些註解,未來查詢時方便自我取用。

SCSS 語法:Nesting Rules, 巢狀規則

就那麼簡單: {} 一層,{{}} 兩層,以此類推。在 SCSS 語法裡巢狀規則也很簡單,你就看包幾層的 {} 符號,那就是幾層。

巢狀規則 SCSS 範例

01/* 巢狀規則1 */
02/* article 與 border-top 一條規則 */
03/* article 與 header 一條規則 */
04article {
05    border-top: 1px dashed #eee;
06    header { margin-bottom: 1.5em; }
07}
08 
09/* 巢狀規則2 */
10/* article 與 header 一條規則 */
11/* article 與 section 一條規則 */
12article {
13    header, section { margin-bottom: 1.5em; }
14}
15 
16/* 巢狀規則3 */
17/* article 與 >, ~, +, * 各一條規則(共 4 條規則) */
18article {
19    > h2 { border-top: 1px dashed #eee; }
20    ~ article { padding-top: 1.5em; }
21    + footer { margin-top: 0; }
22    * { color: #000; }
23}
24 
25/* 巢狀規則4 */
26/* Parent Selector - & 參考父選擇器 */
27/* a 一條規則 */
28/* &:hover 一條規則 */
29a {
30    color: blue;
31    &:hover { color: red; }
32    display: inline-block;
33    line-height: 1.8em;
34}
35 
36/* 巢狀規則5 */
37/* Parent Selector - & 新增內容至選擇器 */
38/* article 與 h1 一條規則 */
39/* .blog-index & 參考(&)父選擇器形成
40    ".blog-index article",.blog-index article 與 h1 一條規則
41*/
42article {
43    h1 { font-size: 2.4em; }
44    .blog-index & {
45        h1 { font-size: 2em; }
46    }
47}
48 
49/* 巢狀規則6 */
50/* Parent Selector - & 與 Modernizr 一起運作 */
51/* button 與 backgroud 一條規則 */
52/* .no-cssgradients & 參考(&)父選擇器形成
53    ".no-cssgradients button" 一條規則
54     
55*/
56button {
57    background: linear-gradient(#444, #222);
58    .no-cssgradients & { background: #333; }
59}

巢狀規則 SCSS 轉成 CSS

01@charset "UTF-8";
02/* 巢狀規則1 */
03article {
04  border-top: 1px dashed #eee; }
05  article header {
06    margin-bottom: 1.5em; }
07 
08/* 巢狀規則2 */
09article header, article section {
10  margin-bottom: 1.5em; }
11 
12/* 巢狀規則3 */
13article > h2 {
14  border-top: 1px dashed #eee; }
15article ~ article {
16  padding-top: 1.5em; }
17article + footer {
18  margin-top: 0; }
19article * {
20  color: #000; }
21 
22/* 巢狀規則4 */
23a {
24  color: blue;
25  display: inline-block;
26  line-height: 1.8em; }
27  a:hover {
28    color: red; }
29 
30/* 巢狀規則5 */
31article h1 {
32  font-size: 2.4em; }
33.blog-index article h1 {
34  font-size: 2em; }
35 
36/* 巢狀規則6 */
37button {
38  background: linear-gradient(#444444, #222222); }
39  .no-cssgradients button {
40    background: #333; }

父選擇器碰到子選擇器,就形成一條規則。碰到 &(參考) 就形成一條規則。例如以下 SCSS,

1a {
2    color: red;
3    b {
4        color: greed;
5        c {
6            color:blue;
7        }
8    }
9}

產生的 CSS,

1a {
2  color: red; }
3  a b {
4    color: greed; }
5    a b c {
6      color: blue; }

a、ab、abc 一共三條,這樣清楚了嗎。

SCSS 語法: Media Bubbling, 媒體查詢

@media 是 CSS3 的功能,SCSS 語法裡媒體查詢語法會自動包含父選擇器,有點像泡泡會上升去包著一樣。

媒體查詢 SCSS 範例

/* 媒體查詢 */
/* 媒體查詢會像氣泡般包含內容(#content) */
#content {
	margin: 0 1.5em;
	@media screen and (min-width: 1280px) {
		margin: 0 2.5em;
	}
}

以上有巢狀關係,會產生二條規則,第二條規則使用媒體查詢語法,會自動包含父選擇器。

媒體查詢 SCSS 轉成 CSS

1@charset "UTF-8";
2/* 媒體查詢 */
3/* 媒體查詢會像氣泡般包含內容(#content) */
4#content {
5  margin: 0 1.5em; }
6  @media screen and (min-width: 1280px) {
7    #content {
8      margin: 0 2.5em; } }

媒體查詢把父選擇器(#content)包進來形成規則。

SCSS 語法:Variables, 變數

就那麼簡單: $變數:值;,$ 符號宣告一個變數,接下來如 CSS 一樣透過 : 符號設定值。

變數 SCSS 範例

01/* 就那麼簡單: $變數:值; */
02/* 可使用在:
03        顏色(Colors), 數字(Numbers), 文字(text)
04        了解單位上
05*/
06 
07/* 變數1 */
08$link-color: blue;
09$link-hover: red;
10 
11a {
12    color: $link-color;
13    &:hover { color: $link-hover; }
14}
15 
16/* 變數2 */
17/* 負數要用刮弧包起來,例如,(-變數) */
18$msg-pad: 24px;
19.msg {
20    padding: $msg-pad;
21    h3 {
22        padding: $msg-pad;
23        margin: (-$msg-pad) (-$msg-pad) 0;
24    }
25}

在 a {} 樣式規則裡有個 &,那個 & 會去參考父選擇器,&:hover 的父選擇器是 a,所以下面的 css 出來的就是 a:hover {},有沒有很方便。

變數 SCSS 轉成 CSS

01@charset "UTF-8";
02/* 變數1 */
03a {
04  color: blue; }
05  a:hover {
06    color: red; }
07 
08/* 變數2 */
09.msg {
10  padding: 24px; }
11  .msg h3 {
12    padding: 24px;
13    margin: -24px -24px 0; }

SCSS 語法: @extend, 延伸

@extend 延伸像我們頁面的主版頁面裡會使用的使用者控制項(Webform)或Partial方法(MVC),把一個一個子版先切好,然後在需要的地方放入使用。像 Login 頁面,因為每一頁都會用到,我們就切出來一個子頁,讓每一頁去引用,當我們修改更新任何 Login 頁面,所以頁面就會立即使用最新的 Login 頁面一樣道理。

延伸 SCSS 範例

01/* 定義.button */
02/* 這裡被拿去做延伸使用,所以在 CSS 不會出現 */
03.button {
04    background: blue;
05    color: white;
06    padding: 0.2em 0.8em;
07    border-radius: 0.4em;
08}
09 
10/* .button-delete 與 @extend .button 形成一條規則 */
11/* .button-delete 形成一條規則 */
12.button-delete {
13    @extend .button; // .button .button-delete  {}
14    background: red;
15}

用白話來說:.button-delete 要延伸自 .button 的規則,所以注意產生的 CSS 規則會是 .button .button-delete {}。

延伸 SCSS 轉成 CSS

01@charset "UTF-8";
02.button, .button-delete {
03  background: blue;
04  color: white;
05  padding: 0.2em 0.8em;
06  border-radius: 0.4em; }
07 
08/* .button-delete 與 @extend .button 形成一條規則 */
09/* .button-delete 形成一條規則 */
10.button-delete {
11  background: red; }

SCSS 語法: Mixins, 混合使用

@mixin 把可重覆使用的規則提煉出來,而且還可以與變數、&(參考)…一起使用,大大增加彈性。在要引用的樣式規則裡使用 @include 引用定義的好的規則即可。

混合使用 SCSS 範例

01/* 把可重覆使用的規則提煉出來 */
02 
03/* 混合1 */
04@mixin hover-link {
05    text-decoration: none;
06    &:hover {   text-decoration: underline; }
07}
08 
09/* 使用 hover-link 規則 */
10nav a { @include hover-link; }
11 
12/* 混合2 - 與變數一併使用 */
13@mixin border-radius($amount) {
14    border-radius: $amount;
15    -webkit-border-radius: $amount;
16    -moz-border-radius: $amount;
17}
18 
19/* 傳入變數 */
20.msg {  @include border-radius(5px); }
21 
22/* 混合3 - 預設與名稱參數 */
23/* $text:blue 給$text變數預設值,如果未傳入變數值,即使用預設值 */
24@mixin link-color ($text:blue, $hover:red){
25    color: $text;
26    &:hover { color: $hover;}
27}
28 
29/* $text 使用預設值, $hover 使用 green */
30a { @include link-color($hover:green); }

混合使用 SCSS 轉成 CSS

01@charset "UTF-8";
02/* 混合1 */
03/* 使用 hover-link 規則 */
04nav a {
05  text-decoration: none; }
06  nav a:hover {
07    text-decoration: underline; }
08 
09/* 混合2 - 與變數一併使用 */
10/* 傳入變數 */
11.msg {
12  border-radius: 5px;
13  -webkit-border-radius: 5px;
14  -moz-border-radius: 5px; }
15 
16/* 混合3 - 預設與名稱參數 */
17a {
18  color: blue; }
19  a:hover {
20    color: green; }

SCSS 語法: Importing, 匯入

在 SCSS 裡的匯入與 CSS 的匯入有些不同,在 CSS 裡假設我們在 main.css 匯入了三個 *.css 檔案,總共瀏覽器會發出 4 條 request,main.css + 裡面三個 import *.css = 4 request,這樣才會完成整個 CSS 下載的動作。在 SCSS 裡,它是會匯整成一個檔案來產出,例如,我在 main.scss 裡匯入三個 *.scss 檔案,那它會產出一個 main.css 檔案,面裡包含了那三個 *.scss 檔案的內容。當我更新那三個 *.scss 任何內容,就會重新產生 main.css。

匯入 SCSS 範例

01/* 使用 import 請對應至"_檔名.scss",然後 import "檔名" */
02 
03/* 對應 _core.scss */
04@import "core";
05/* 對應 _typography.scss, _grid.scss */
06@import "typography", "grid";
07 
08/* 你也能在巢狀裡使用 import */
09@media screen and (min-width: 320px) {
10    @import "core";
11}
12 
13/* 這裡用巢狀 a, ab, ac 共三條規則 */
14#account {
15    @import "typography", "grid";
16}

注意,你要讓 SCSS 匯入的檔名必須在開頭加底線(_檔名.scss)。

匯入 SCSS 轉成 CSS

01@charset "UTF-8";
02/* import 測試用 _core.scss */
03body {
04  color: red; }
05 
06/* import 測試用 _typography.scss */
07body {
08  color: blue; }
09 
10/* import 測試用 _grid.scss */
11body {
12  color: greed; }
13 
14/* 你也能在巢狀裡使用 import */
15@media screen and (min-width: 320px) {
16  /* import 測試用 _core.scss */
17  body {
18    color: red; } }
19/* 這裡用巢狀 a, ab, ac 共三條規則 */
20#account {
21  /* import 測試用 _typography.scss */
22  /* import 測試用 _grid.scss */ }
23  #account body {
24    color: blue; }
25  #account body {
26    color: greed; }

設計初期,可以功能區分、部門區分…來設計相關 SCSS,最後再進行匯入整合即可,而且只產生一整合的檔案,可大大減少 request 數量,比起 CSS 的匯入好太多了。

SCSS 語法: Math, 數學

在 SCSS 語法裡,只要是數字型態(可含單位,例如 1em, 5px)都可以進行【+, -, *, /, %】等運算,讓你透過公式去計算而不是在那裡按計算機老半天。

數學 SCSS 範例

01/* Scss 可進行數學操作(+, -, *, /, %) 在數字型態
02    例如:
03        1em + 1em;  // 2em
04        1em - 1em;  // 0em
05        1in + 72pt; // 2in
06        6px * 4;    // 24px
07        18 % 5;     // 3
08*/
09 
10/* Math 1 - 除法 */
11/*
12    font: 18px / 1.45em;
13    font: (20px / 5);       // 4px
14    font: 20px / 5 + 1;     // 5px
15    font: $base / 5;
16    $size:  20px / 5;       // 4px
17*/
18 
19/* Math 2 */
20$container : 960px;
21$main: 680px;
22$gutter: 30px;
23 
24#sidebar {
25    width: $container - $main - $gutter;
26}
27 
28/* Math 3 - 數學函式 */
29/* Scss 提供一些好用的函式可使用 */
30/*
31    percentage(13/25)   // 52%, 百分比
32    round(2.4)          // 2, 取最大整數
33    ceil(2.2)           // 3, 無條件進位
34    floor(2.6)          // 2, 無條件去位
35    abs(-24)                // 24, 絕對值
36*/

數學 SCSS 轉成 CSS

1#sidebar {
2  width: 250px; }

SCSS 語法: Loops & Conditions, 迴圈與條件

在 SCSS 裡我們也能包含如【邏輯運算: < > <= >= == !=】、【條件運算:@if, @else, @else if】、【and, or】,也就是說,你可以在樣式規則中使用程式的方法來動態產生你所想要的規則。

迴圈與條件 SCSS 範例

01/* 條件包含:
02    邏輯運算: < > <= >= == !=
03    @if, @else, @else if
04    and, or
05*/
06 
07/* 運算 */
08/*
091  <  20 // true
1010 <= 20 // true
114  >  1      // true
124  >= 1      // true
13*/
14 
15/*
161 + 1 == 2      // true
17small != big    // true
18#000  == black  // true
19*/
20 
21/*
22red == #f00
23red == #ff0000
24red == rgb(255, 0, 0)
25red == rgba(255, 0, 0, 1.0)
26red == hsl(0deg, 100%, 100%)
27reg == hsla(0deg, 100%, 100%, 1)
28*/
29 
30/* if-else 條件 */
31$theme: ocean;
32$color: red;
33 
34div {
35    @if $theme == dusty {
36        background: #c6bba9;
37        color: $color;
38    } @else if $theme == ocean {
39        background: blue;
40        color: white;
41    }
42}
43 
44/* if() 函式 */
45$main-bg: #000;
46 
47.main{
48    color: if( $main-bg == black, #fff, #000);
49}
50 
51/* @for 迴圈 */
52@for $level from 0 to 5 {
53    .tag-#{$level + 1} {
54        font-size: .7em + ($level * .5em);
55    }
56}
57 
58/* @while 迴圈 */
59$level2: 0;
60@while $level2 < 5 {
61    .tag-#{$level2 + 1} {
62        font-size: .7em + ($level2 * .5em);
63    }
64    $level2: $level2 + 1;
65}
66 
67/* @each 迴圈 */
68$animals: puma, crab, emu, duck;
69@each $animal in $animals {
70    .#{$animal}-icon {
71        background: url('/images/#{$animal}.png');
72    }
73}

程式的【if, if-else, for, while, for each, 二元判斷】都有提供,而且能使用在 CSS 裡,再說一次,SCSS 太棒了。

迴圈與條件 SCSS 轉成 CSS

01@charset "UTF-8";
02/* if-else 條件 */
03div {
04  background: blue;
05  color: white; }
06 
07/* if() 函式 */
08.main {
09  color: white; }
10 
11/* @for 迴圈 */
12.tag-1 {
13  font-size: 0.7em; }
14 
15.tag-2 {
16  font-size: 1.2em; }
17 
18.tag-3 {
19  font-size: 1.7em; }
20 
21.tag-4 {
22  font-size: 2.2em; }
23 
24.tag-5 {
25  font-size: 2.7em; }
26 
27/* @while 迴圈 */
28.tag-1 {
29  font-size: 0.7em; }
30 
31.tag-2 {
32  font-size: 1.2em; }
33 
34.tag-3 {
35  font-size: 1.7em; }
36 
37.tag-4 {
38  font-size: 2.2em; }
39 
40.tag-5 {
41  font-size: 2.7em; }
42 
43/* @each 迴圈 */
44.puma-icon {
45  background: url("/images/puma.png"); }
46 
47.crab-icon {
48  background: url("/images/crab.png"); }
49 
50.emu-icon {
51  background: url("/images/emu.png"); }
52 
53.duck-icon {
54  background: url("/images/duck.png"); }

SCSS 語法: Color, 顏色

SCSS 的顏色是提供一大堆顏色運算函式,建議看簡報檔的 page 54 ~ 67 頁,裡面有詳細的圖解。

顏色 SCSS 範例

01/* RGBA 函式 */
02a { color: rgba(blue, .75); }
03p { background: rgba(#ffa, .25); }
04 
05/* Color 檢查函式 */
06/*
07$color: red;
08 
09hue($color);        // 0deg, 色度
10saturation($color); // 100%, 飽合度
11lightness($color);  // 50%, 淡
12 
13red($color);        // 100
14green($color);      // 0
15blue($color);       // 0
16 
17alpha($color);      // 100
18*/
19 
20$bg: silver;
21$darkgb: lightness($bg) < lightness(gray);
22button {
23    color: if($darkgb, #fff, #000);
24}
25 
26/* Color 操作 */
27/*
28invert(blue)            // 顛倒, blue --> yellow
29mix(red, yellow)        // 混合, red + yellow = orange
30mix(red, yellow, 30%)   // red 30% + yellow 70% = orange (亮一些)
31grayscale(yellow)       // 灰度
32complement(#6cf620)     // 補足
33*/
34 
35/* HSLA 操作 */
36/*
37adjust-hue(#77a7f9, 90)
38adjust-hue(#77a7f9, -90)
39 
40saturate(#9b8a60, 50%)      // 飽合
41desaturate(#d9a621, 50%)
42 
43darken(#6cf620, 30%)        // 深
44lighten(#2e7805, 50%)       // 亮
45 
46fade-out(#fab, .5)
47fade-in(rgba(#fab, .5), .5)
48*/
49 
50/* change-color函式 - 為color設定任何屬性 */
51/*
52change-color($color, [$red], [$green], [$blue],
53[$hue], [$saturation], [$lightness], [$alpha])
54 
55change-color(#ba5637, $hue:60);
56change-color(#8e9cb3, $saturation:100);
57change-color(#6cf620, $green:60, &blue:100);
58*/
59 
60/* adjust-color函式 - 為color設定任何操作屬性 */
61/*
62adjust-color($color, [$red], [$green], [$blue],
63[$hue], [$saturation], [$lightness], [$alpha]);
64 
65adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
66adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
67*/
68 
69/* scale-color函式 - 為color設定動態比例屬性(以百分比為基礎) */
70/*
71scale-color($color, [$red], [$green], [$blue],
72[$saturation], [$lightness], [$alpha]);
73 
74scale-color(#adf609, $lightness:50%);
75adjust-color(#adf609, $lightness:50%);
76 
77如果:
78lightness       是 0%
79#adf609         是 50%
80scale-color     是 75%
81adjust-color        是 100%
82*/

顏色 SCSS 轉成 CSS

01@charset "UTF-8";
02/* RGBA 函式 */
03a {
04  color: rgba(0, 0, 255, 0.75); }
05 
06p {
07  background: rgba(255, 255, 170, 0.25); }
08 
09button {
10  color: black; }

簡報 Page 55 裡的 a {color: rgba(blue, .75);} 給的 CSS 答案是錯誤的。

SCSS 語法: Custom Functions, 自訂函式

與程式裡的自訂函式觀念相同,我們能自行定義要執行的函式運作,進行 SCSS 相關運算之後,再將結果回傳。

自訂函式 SCSS 範例

01/* 自訂函式1 */
02@function pxem($px, $context: 16px) {
03    @return ($px / $context) * 1em;
04}
05 
06/* 使用自訂函式 pxem */
07article h2 { font-size: pxem(45px); }
08 
09/* 自訂函式2 */
10@function text-contrast($gb, $light:#fff, $dark:#000) {
11    $darkgb: lightness($gb) < lightness(gray);
12    @return if($darkgb, $light, $dark);
13}
14 
15/* 使用自訂函式 text-contrast */
16@mixin easy-button($gb) {
17    color: text-contrast($gb);
18    background: linear-gradient(lighten($gb, 8), darken($gb, 8));
19}
20 
21button { @include easy-button(blue); }

自訂函式 SCSS 轉成 CSS

1@charset "UTF-8";
2/* 使用自訂函式 pxem */
3article h2 {
4  font-size: 2.813em; }
5 
6/* 使用自訂函式 text-contrast */
7button {
8  color: white;
9  background: linear-gradient(#2929ff, #0000d6); }

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。