網頁

SCSS 語法學習心得筆記

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); }

沒有留言:

張貼留言

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