Sass - SCSS 語法初學
在上一篇【在 VISUAL STUDIO 撰寫 SASS(SCSS) 讓您快樂似神仙】中，我們完成了在 Visual Studio 裡開發 SCSS 的設定，這一篇主要是參考【Sass Reference】網站內容與【Sass & Compass: The future of stylesheets now.】簡報內容裡的程式碼做一些註解，未來查詢時方便自我取用。
SCSS 語法:Nesting Rules, 巢狀規則
就那麼簡單: {} 一層，{{}} 兩層，以此類推。在 SCSS 語法裡巢狀規則也很簡單，你就看包幾層的 {} 符號，那就是幾層。
巢狀規則 SCSS 範例
/* 巢狀規則1 */
/* article 與 border-top 一條規則 */
/* article 與 header 一條規則 */
article {
border-top: 1px dashed #eee;
header { margin-bottom: 1.5em; }
}
/* 巢狀規則2 */
/* article 與 header 一條規則 */
/* article 與 section 一條規則 */
article {
header, section { margin-bottom: 1.5em; }
}
/* 巢狀規則3 */
/* article 與 >, ~, +, * 各一條規則(共 4 條規則) */
article {
> h2 { border-top: 1px dashed #eee; }
~ article { padding-top: 1.5em; }
+ footer { margin-top: 0; }
* { color: #000; }
}
/* 巢狀規則4 */
/* Parent Selector - & 參考父選擇器 */
/* a 一條規則 */
/* &:hover 一條規則 */
a {
color: blue;
&:hover { color: red; }
display: inline-block;
line-height: 1.8em;
}
/* 巢狀規則5 */
/* Parent Selector - & 新增內容至選擇器 */
/* article 與 h1 一條規則 */
/* .blog-index & 參考(&)父選擇器形成
".blog-index article"，.blog-index article 與 h1 一條規則
*/
article {
h1 { font-size: 2.4em; }
.blog-index & {
h1 { font-size: 2em; }
}
}
/* 巢狀規則6 */
/* Parent Selector - & 與 Modernizr 一起運作 */
/* button 與 backgroud 一條規則 */
/* .no-cssgradients & 參考(&)父選擇器形成
".no-cssgradients button" 一條規則
*/
button {
background: linear-gradient(#444, #222);
.no-cssgradients & { background: #333; }
}
巢狀規則 SCSS 轉成 CSS
@charset "UTF-8";
/* 巢狀規則1 */
article {
border-top: 1px dashed #eee; }
article header {
margin-bottom: 1.5em; }
/* 巢狀規則2 */
article header, article section {
margin-bottom: 1.5em; }
/* 巢狀規則3 */
article > h2 {
border-top: 1px dashed #eee; }
article ~ article {
padding-top: 1.5em; }
article + footer {
margin-top: 0; }
article * {
color: #000; }
/* 巢狀規則4 */
a {
color: blue;
display: inline-block;
line-height: 1.8em; }
a:hover {
color: red; }
/* 巢狀規則5 */
article h1 {
font-size: 2.4em; }
.blog-index article h1 {
font-size: 2em; }
/* 巢狀規則6 */
button {
background: linear-gradient(#444444, #222222); }
.no-cssgradients button {
background: #333; }
父選擇器碰到子選擇器，就形成一條規則。碰到 &(參考) 就形成一條規則。例如以下 SCSS，
a {
color: red;
b {
color: greed;
c {
color:blue;
}
}
}
產生的 CSS，
a {
color: red; }
a b {
color: greed; }
a b c {
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
@charset "UTF-8";
/* 媒體查詢 */
/* 媒體查詢會像氣泡般包含內容(#content) */
#content {
margin: 0 1.5em; }
@media screen and (min-width: 1280px) {
#content {
margin: 0 2.5em; } }
媒體查詢把父選擇器(#content)包進來形成規則。
SCSS 語法:Variables, 變數
就那麼簡單: $變數:值;，$ 符號宣告一個變數，接下來如 CSS 一樣透過 : 符號設定值。
變數 SCSS 範例
/* 就那麼簡單: $變數:值; */
/* 可使用在:
顏色(Colors), 數字(Numbers), 文字(text)
了解單位上
*/
/* 變數1 */
$link-color: blue;
$link-hover: red;
a {
color: $link-color;
&:hover { color: $link-hover; }
}
/* 變數2 */
/* 負數要用刮弧包起來，例如，(-變數) */
$msg-pad: 24px;
.msg {
padding: $msg-pad;
h3 {
padding: $msg-pad;
margin: (-$msg-pad) (-$msg-pad) 0;
}
}
在 a {} 樣式規則裡有個 &，那個 & 會去參考父選擇器，&:hover 的父選擇器是 a，所以下面的 css 出來的就是 a:hover {}，有沒有很方便。
變數 SCSS 轉成 CSS
@charset "UTF-8";
/* 變數1 */
a {
color: blue; }
a:hover {
color: red; }
/* 變數2 */
.msg {
padding: 24px; }
.msg h3 {
padding: 24px;
margin: -24px -24px 0; }
SCSS 語法: @extend, 延伸
@extend 延伸像我們頁面的主版頁面裡會使用的使用者控制項(Webform)或Partial方法(MVC)，把一個一個子版先切好，然後在需要的地方放入使用。像 Login 頁面，因為每一頁都會用到，我們就切出來一個子頁，讓每一頁去引用，當我們修改更新任何 Login 頁面，所以頁面就會立即使用最新的 Login 頁面一樣道理。
延伸 SCSS 範例
/* 定義.button */
/* 這裡被拿去做延伸使用，所以在 CSS 不會出現 */
.button {
background: blue;
color: white;
padding: 0.2em 0.8em;
border-radius: 0.4em;
}
/* .button-delete 與 @extend .button 形成一條規則 */
/* .button-delete 形成一條規則 */
.button-delete {
@extend .button; // .button .button-delete {}
background: red;
}
用白話來說：.button-delete 要延伸自 .button 的規則，所以注意產生的 CSS 規則會是 .button .button-delete {}。
延伸 SCSS 轉成 CSS
@charset "UTF-8";
.button, .button-delete {
background: blue;
color: white;
padding: 0.2em 0.8em;
border-radius: 0.4em; }
/* .button-delete 與 @extend .button 形成一條規則 */
/* .button-delete 形成一條規則 */
.button-delete {
background: red; }
SCSS 語法: Mixins, 混合使用
@mixin 把可重覆使用的規則提煉出來，而且還可以與變數、&(參考)…一起使用，大大增加彈性。在要引用的樣式規則裡使用 @include 引用定義的好的規則即可。
混合使用 SCSS 範例
/* 把可重覆使用的規則提煉出來 */
/* 混合1 */
@mixin hover-link {
text-decoration: none;
&:hover { text-decoration: underline; }
}
/* 使用 hover-link 規則 */
nav a { @include hover-link; }
/* 混合2 - 與變數一併使用 */
@mixin border-radius($amount) {
border-radius: $amount;
-webkit-border-radius: $amount;
-moz-border-radius: $amount;
}
/* 傳入變數 */
.msg { @include border-radius(5px); }
/* 混合3 - 預設與名稱參數 */
/* $text:blue 給$text變數預設值，如果未傳入變數值，即使用預設值 */
@mixin link-color ($text:blue, $hover:red){
color: $text;
&:hover { color: $hover;}
}
/* $text 使用預設值, $hover 使用 green */
a { @include link-color($hover:green); }
混合使用 SCSS 轉成 CSS
@charset "UTF-8";
/* 混合1 */
/* 使用 hover-link 規則 */
nav a {
text-decoration: none; }
nav a:hover {
text-decoration: underline; }
/* 混合2 - 與變數一併使用 */
/* 傳入變數 */
.msg {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; }
/* 混合3 - 預設與名稱參數 */
a {
color: blue; }
a:hover {
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 範例
/* 使用 import 請對應至"_檔名.scss"，然後 import "檔名" */
/* 對應 _core.scss */
@import "core";
/* 對應 _typography.scss, _grid.scss */
@import "typography", "grid";
/* 你也能在巢狀裡使用 import */
@media screen and (min-width: 320px) {
@import "core";
}
/* 這裡用巢狀 a, ab, ac 共三條規則 */
#account {
@import "typography", "grid";
}
注意，你要讓 SCSS 匯入的檔名必須在開頭加底線(_檔名.scss)。
匯入 SCSS 轉成 CSS
@charset "UTF-8";
/* import 測試用 _core.scss */
body {
color: red; }
/* import 測試用 _typography.scss */
body {
color: blue; }
/* import 測試用 _grid.scss */
body {
color: greed; }
/* 你也能在巢狀裡使用 import */
@media screen and (min-width: 320px) {
/* import 測試用 _core.scss */
body {
color: red; } }
/* 這裡用巢狀 a, ab, ac 共三條規則 */
#account {
/* import 測試用 _typography.scss */
/* import 測試用 _grid.scss */ }
#account body {
color: blue; }
#account body {
color: greed; }
設計初期，可以功能區分、部門區分…來設計相關 SCSS，最後再進行匯入整合即可，而且只產生一整合的檔案，可大大減少 request 數量，比起 CSS 的匯入好太多了。
SCSS 語法: Math, 數學
在 SCSS 語法裡，只要是數字型態(可含單位，例如 1em, 5px)都可以進行【+, -, *, /, %】等運算，讓你透過公式去計算而不是在那裡按計算機老半天。
數學 SCSS 範例
/* Scss 可進行數學操作(+, -, *, /, %) 在數字型態
例如：
1em + 1em; // 2em
1em - 1em; // 0em
1in + 72pt; // 2in
6px * 4; // 24px
18 % 5; // 3
*/
/* Math 1 - 除法 */
/*
font: 18px / 1.45em;
font: (20px / 5); // 4px
font: 20px / 5 + 1; // 5px
font: $base / 5;
$size: 20px / 5; // 4px
*/
/* Math 2 */
$container : 960px;
$main: 680px;
$gutter: 30px;
#sidebar {
width: $container - $main - $gutter;
}
/* Math 3 - 數學函式 */
/* Scss 提供一些好用的函式可使用 */
/*
percentage(13/25) // 52%, 百分比
round(2.4) // 2, 取最大整數
ceil(2.2) // 3, 無條件進位
floor(2.6) // 2, 無條件去位
abs(-24) // 24, 絕對值
*/
數學 SCSS 轉成 CSS
#sidebar {
width: 250px; }
SCSS 語法: Loops & Conditions, 迴圈與條件
在 SCSS 裡我們也能包含如【邏輯運算: < > <= >= == !=】、【條件運算:@if, @else, @else if】、【and, or】，也就是說，你可以在樣式規則中使用程式的方法來動態產生你所想要的規則。
迴圈與條件 SCSS 範例
/* 條件包含:
邏輯運算: < > <= >= == !=
@if, @else, @else if
and, or
*/
/* 運算 */
/*
1 < 20 // true
10 <= 20 // true
4 > 1 // true
4 >= 1 // true
*/
/*
1 + 1 == 2 // true
small != big // true
#000 == black // true
*/
/*
red == #f00
red == #ff0000
red == rgb(255, 0, 0)
red == rgba(255, 0, 0, 1.0)
red == hsl(0deg, 100%, 100%)
reg == hsla(0deg, 100%, 100%, 1)
*/
/* if-else 條件 */
$theme: ocean;
$color: red;
div {
@if $theme == dusty {
background: #c6bba9;
color: $color;
} @else if $theme == ocean {
background: blue;
color: white;
}
}
/* if() 函式 */
$main-bg: #000;
.main{
color: if( $main-bg == black, #fff, #000);
}
/* @for 迴圈 */
@for $level from 0 to 5 {
.tag-#{$level + 1} {
font-size: .7em + ($level * .5em);
}
}
/* @while 迴圈 */
$level2: 0;
@while $level2 < 5 {
.tag-#{$level2 + 1} {
font-size: .7em + ($level2 * .5em);
}
$level2: $level2 + 1;
}
/* @each 迴圈 */
$animals: puma, crab, emu, duck;
@each $animal in $animals {
.#{$animal}-icon {
background: url('/images/#{$animal}.png');
}
}
程式的【if, if-else, for, while, for each, 二元判斷】都有提供，而且能使用在 CSS 裡，再說一次，SCSS 太棒了。
迴圈與條件 SCSS 轉成 CSS
@charset "UTF-8";
/* if-else 條件 */
div {
background: blue;
color: white; }
/* if() 函式 */
.main {
color: white; }
/* @for 迴圈 */
.tag-1 {
font-size: 0.7em; }
.tag-2 {
font-size: 1.2em; }
.tag-3 {
font-size: 1.7em; }
.tag-4 {
font-size: 2.2em; }
.tag-5 {
font-size: 2.7em; }
/* @while 迴圈 */
.tag-1 {
font-size: 0.7em; }
.tag-2 {
font-size: 1.2em; }
.tag-3 {
font-size: 1.7em; }
.tag-4 {
font-size: 2.2em; }
.tag-5 {
font-size: 2.7em; }
/* @each 迴圈 */
.puma-icon {
background: url("/images/puma.png"); }
.crab-icon {
background: url("/images/crab.png"); }
.emu-icon {
background: url("/images/emu.png"); }
.duck-icon {
background: url("/images/duck.png"); }
SCSS 語法: Color, 顏色
SCSS 的顏色是提供一大堆顏色運算函式，建議看簡報檔的 page 54 ~ 67 頁，裡面有詳細的圖解。
顏色 SCSS 範例
/* RGBA 函式 */
a { color: rgba(blue, .75); }
p { background: rgba(#ffa, .25); }
/* Color 檢查函式 */
/*
$color: red;
hue($color); // 0deg, 色度
saturation($color); // 100%, 飽合度
lightness($color); // 50%, 淡
red($color); // 100
green($color); // 0
blue($color); // 0
alpha($color); // 100
*/
$bg: silver;
$darkgb: lightness($bg) < lightness(gray);
button {
color: if($darkgb, #fff, #000);
}
/* Color 操作 */
/*
invert(blue) // 顛倒, blue --> yellow
mix(red, yellow) // 混合, red + yellow = orange
mix(red, yellow, 30%) // red 30% + yellow 70% = orange (亮一些)
grayscale(yellow) // 灰度
complement(#6cf620) // 補足
*/
/* HSLA 操作 */
/*
adjust-hue(#77a7f9, 90)
adjust-hue(#77a7f9, -90)
saturate(#9b8a60, 50%) // 飽合
desaturate(#d9a621, 50%)
darken(#6cf620, 30%) // 深
lighten(#2e7805, 50%) // 亮
fade-out(#fab, .5)
fade-in(rgba(#fab, .5), .5)
*/
/* change-color函式 - 為color設定任何屬性 */
/*
change-color($color, [$red], [$green], [$blue],
[$hue], [$saturation], [$lightness], [$alpha])
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
change-color(#6cf620, $green:60, &blue:100);
*/
/* adjust-color函式 - 為color設定任何操作屬性 */
/*
adjust-color($color, [$red], [$green], [$blue],
[$hue], [$saturation], [$lightness], [$alpha]);
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
*/
/* scale-color函式 - 為color設定動態比例屬性(以百分比為基礎) */
/*
scale-color($color, [$red], [$green], [$blue],
[$saturation], [$lightness], [$alpha]);
scale-color(#adf609, $lightness:50%);
adjust-color(#adf609, $lightness:50%);
如果:
lightness 是 0%
#adf609 是 50%
scale-color 是 75%
adjust-color 是 100%
*/
顏色 SCSS 轉成 CSS
@charset "UTF-8";
/* RGBA 函式 */
a {
color: rgba(0, 0, 255, 0.75); }
p {
background: rgba(255, 255, 170, 0.25); }
button {
color: black; }
簡報 Page 55 裡的 a {color: rgba(blue, .75);} 給的 CSS 答案是錯誤的。
SCSS 語法: Custom Functions, 自訂函式
與程式裡的自訂函式觀念相同，我們能自行定義要執行的函式運作，進行 SCSS 相關運算之後，再將結果回傳。
自訂函式 SCSS 範例
/* 自訂函式1 */
@function pxem($px, $context: 16px) {
@return ($px / $context) * 1em;
}
/* 使用自訂函式 pxem */
article h2 { font-size: pxem(45px); }
/* 自訂函式2 */
@function text-contrast($gb, $light:#fff, $dark:#000) {
$darkgb: lightness($gb) < lightness(gray);
@return if($darkgb, $light, $dark);
}
/* 使用自訂函式 text-contrast */
@mixin easy-button($gb) {
color: text-contrast($gb);
background: linear-gradient(lighten($gb, 8), darken($gb, 8));
}
button { @include easy-button(blue); }
自訂函式 SCSS 轉成 CSS
@charset "UTF-8";
/* 使用自訂函式 pxem */
article h2 {
font-size: 2.813em; }
/* 使用自訂函式 text-contrast */
button {
color: white;
background: linear-gradient(#2929ff, #0000d6); }
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。