Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Teams 教育訓練Q&A 群
https://tinyurl.com/skzxl25
什麼是SASS / SCSS跟CSS有什麼差別
05
SASS
(Syntactically Awesome StyleSheets)
大型專案時傳統 CSS 會遇到的重複、可維護性差等問題。
簡潔、富語意(expressive)、重複性佳(reusable)、可維護性佳和可延展性佳的 CSS 程式碼。
06
SASS 的語法分為新的 SCSS和舊的 SASS。
SCSS 語法是 CSS3 的超集合,兼容傳統的 CSS 檔案,學習曲線相對較緩。
// SASS
.parent
color: blue
.child
font-size: 12px
// SCSS
.parent {
color: blue;
.child {
font-size: 12px;
}
}
07
Nesting:降低父元素重複性
Variables:變數可以用來儲存值,方便重複利用
Mixins:降低偽元素撰寫的重複性
Functions:Sass 內建一些好用 functions 可以簡單設定色相、漸層
Operations:透過加減乘除和取餘數等運算子可以方便運算所需的屬性值
@import 引用:可以引入其他 Sass、SCSS 檔案
@extend 共用:可以合併與擴充其他 Class樣式
09
巢狀結構可大幅降低代碼的重複性,也可提高代碼的可閱讀性。
// SCSS
.parent {
color: blue;
.child {
font-size: 12px;
}
}
// CSS
.parent {
color: blue;
}
.parent .child {
font-size: 12px;
}
10
在 Nesting 中不僅只有 child selectors 可以使用,
還可以使用在相同的 Properties 上。
// CSS
.parent {
font-family: Roboto, sans-serif;
font-size: 12px;
font-decoration: none;
}
// SCSS
.parent {
font : {
family: Roboto, sans-serif;
size: 12px;
decoration: none;
}
}
11
Sass 中我們使用 $ 來表示變數,型態可以是 Numbers、Strings、Booleans、null 值(視為空值),甚至可以使用 Lists、Maps 。
$font-style-2: Helvetica, Arial, sans-serif;
$standard-border: 4px solid black;
p {
border: $standard-border;
}
// maps key:value
$font-style-2: (key1: value1, key2: value2);
12
如::before、::after、:hover,在 Sass 中使用 & 代表父元素
並可以用@include傳入已寫好的屬性值。
// CSS
.notecard:hover {
border-color: red;
}
.notecard:active {
border-color: red;
}
// SCSS
@mixin border-color($color:yellow) {
border-color: $color;
}
.notecard {
&:hover, &:active {
@include border-color(red);
}
}
13
重用群組的 CSS,例如跨瀏覽器的 prefix,使用 @include 加入群組:
.notecard {
.head, .footer {
width: 100%;
height: 100%;
position: absolute;
@include display-flex-center;
}
}
@mixin display-flex-center {
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
align-items: center;
-ms-flex-align: center;
}
.notecard .head, .notecard .footer {
width: 100%;
height: 100%;
position: absolute;
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
align-items: center;
-ms-flex-align: center;
}
14
@mixin 可以透過 @include 使用參數,也可以使用預設值:
@mixin backface-visibility($visibility:hidden) {
backface-visibility: $visibility;
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
-ms-backface-visibility: $visibility;
-o-backface-visibility: $visibility;
}
.front, .back {
@include backface-visibility(hidden);
}
15
在 Sass 內建一些好用 functions 可以簡單設定色相、漸層,例如:
adjust-hue($color, $degrees)、fade-out:
$lagoon-blue: fade-out(#62fdca, 0.5);
16
透過加減乘除和取餘數等運算子可以方便運算所需的屬性值。
width: $variable/6;
line-height: (600px)/9;
margin-left: 20-10 px/ 2;
font-size: 10px/8px;
$color: #010203 + #040506;
/*
01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
color: #050709;
*/
17
我們通常使用處組件去處理特定功能,方便管理和維護。以下是引用 _variables.scss 檔案範例,其中檔名前的 "_" 表示引用前要先編譯。
@import "variables";
18
透過@extend可合併或擴充其他 Class的樣式。
.lemonade {
border: 1px yellow;
background-color: #fdd;
}
.strawberry {
@extend .lemonade;
border-color: pink;
}
.lemonade, .strawberry {
border: 1px yellow;
background-color: #fdd;
}
.strawberry {
border-color: pink;
}
19
@extend 搭配 % 使用可達到擴充樣式的目的。
a.lemonade {
font-size: 2em;
background-color: $lemon-yellow;
}
.lemonade {
font-weight: bold;
line-height: 2;
}
a%drink {
font-size: 2em;
background-color: $lemon-yellow;
}
.lemonade {
@extend %drink;
font-weight: bold;
line-height: 2;
}
20
// SCSS
@mixin no-variable {
font-size: 12px;
color: #FFF;
opacity: .9;
}
%placeholder {
font-size: 12px;
color: #FFF;
opacity: .9;
}
span {
@extend %placeholder;
}
div {
@extend %placeholder;
}
p {
@include no-variable;
}
h1 {
@include no-variable;
}
21
// CSS
// @extend
span, div {
font-size: 12px;
color: #FFF;
opacity: .9;
}
// CSS
// @mixin
h1 {
font-size: 12px;
color: #FFF;
opacity: .9;
}
p {
font-size: 12px;
color: #FFF;
opacity: .9;
}
什麼是Flexbox?
什麼是Grid?
Flexbox瀏覽器支援度
26
27
28
Flex 與 Grid
共同的特徵
外容器屬性
內元件屬性
29
flex-direction
flex-wrap
30
flex-grow
flex-shrink
flex-basis
31
32
屬性特點
36
.flex-container {
display: flex inline-flex;
}
37
.flex-container {
flex-direction: row row-reverse column column-reverse;
}
38
.flex-container {
flex-wrap: nowrap wrap wrap-reverse;
}
39
flex-direction 與 flex-wrap 的縮寫
.flex-container {
flex-flow: <'flex-direction'> || <'flex-wrap'>
}
40
接近水平對齊的設定,嚴格說來是稱為主軸對齊,主軸是依據上方的 flex-direction而定。
.flex-container {
justify-content:
flex-start flex-end center space-between space-around;
}
41
相對於上一個屬性,這是交錯軸的對齊設定。
.flex-container {
align-items: flex-start flex-end center baseline stretch;
}
42
上一個屬性的多行版本
.flex-container {
align-content:
flex-start flex-end center space-between space-around stretch;
}
43
flex 裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis,預設則是 flex-grow。
.flex-container {
ㄌflex: <flex-grow>、<flex-shrink> <flex-basis>;
}
44
.flex-2 {
flex-grow: 2;
}
flex-grow: 元件的伸展性,預設值為 0,如果設置為 0 則不會縮放。
flex-shrink: 元件的收縮性,預設值為 0,如果設置為 0 則不會縮放。
flex-basis: 元件的基準值,可使用不同的單位值。
45
align-self 可以調整單一元件交錯軸的對齊設定。
.align-self {
align-self: auto flex-start flex-end center baseline stretch;
}
46
可以重新定義元件的排列順序,順序會依據數值的大小排列。
.order {
order: -1;
}
47
codesandbox: https://codesandbox.io/s/objective-colden-yjplv
codepen: https://codepen.io/a32112354jhj/pen/ExjGbRV
codesandbox: https://codesandbox.io/s/objective-lake-d4vdx
codepen: https://codepen.io/a32112354jhj/pen/dyowJQq?editors=1100
https://codepen.io/apple715028/pen/NWqeKoX
https://codepen.io/apple715028/pen/NWqeKoX?editors=1100
青蛙森友會
Flexbox Froggy
https://flexboxfroggy.com/
ㄓ50
.container {
display: grid inline-grid subgrid;
}
51
用來定義版型的結構,由 column 及 row 定義直、橫列的格線,內容再依隔線作安排。
.container {
grid-template-columns: <track-size> ... <line-name> <track-size> ...;
grid-template-rows: <track-size> ... <line-name> <track-size> ...;
}
52
.wrap {
display: grid;
grid-template-columns:
200px 50px auto 50px 200px;
grid-template-rows:
25% 100px auto;
height: 100vh;
width: 940px;
margin: 0 auto;
}
53
fr 這個單位能夠將可用的 剩餘空間 做比例分割,以下面的 1fr 2fr 為例,空間將被分割成 1/3、2/3 兩個大小。
另一個是 repeat,可以重複隔線。
.wrap {
grid-template-columns: repeat(2, 1fr 2fr) 100px;
/* grid-template-columns: repeat({次數}, {格線...} {格線...}) {格線...}; */
}
54
如果版型較為簡單,可以直接使用 grid-auto-{ cols or rows}。
.row {
display: grid;
grid-auto-columns: 60px;
grid-auto-flow: column;
grid-gap: 20px;
width: 940px;
min-height: 100vh;
margin: 0 auto;
}
55
格線的間隔包含垂直及水平。
grid-column-gap: { grid-column-gap };
grid-row-gap: { grid-row-gap };
grid-gap: { grid-row-gap } { grid-column-gap };
56
與 flex 的使用方法一樣
.flex-container {
justify-content: flex-start flex-end center space-between space-around;
align-items: flex-start flex-end center baseline stretch;
align-content: flex-start flex-end center space-between space-around stretch;
}
57
物件所佔的空間位置,Column 及 Row 所到的起始點及終點
.item {
grid-column-start: <number> <name> span <number> span <name> auto
grid-column-end: <number> <name> span <number> span <name> auto
grid-row-start: <number> <name> span <number> span <name> auto
grid-row-end: <number> <name> span <number> span <name> auto
}
.item {
grid-column-start: 2; /* 物件起始線 */
grid-column-end: span 4; /* 終點線 = 物件所佔的空間數 */
grid-row-start: 3; /* 物件起始線 */
grid-row-end: auto; /* 不設定終點線 */
background-color: red;
z-index: 999; /* 欄位重疊可用 z-index 設定前後順序 */
}
58
上面那段的縮寫,使用斜線 (/) 隔開屬性。
.item {
grid-column: 2 / span 4;
}
59
與 flex 的使用方法一樣
.align-self {
align-self: auto flex-start flex-end center baseline stretch;
}
60
https://codepen.io/SabrinaGuo/pen/ZEGmXKj?editors=1100
https://codepen.io/SabrinaGuo/pen/dyoapEj
https://codepen.io/SabrinaGuo/pen/WNvPGBv
農夫森友會
Grid Garden
https://codepip.com/games/grid-garden/
課程總結
62
SASS / SCSS 重點回顧
Flex & Grid 重點回顧
課後問卷調查
https://www.surveycake.com/s/pqXKR
NEXT TIME
2 0 2 0 / 0 5 / 1 5
文件撰寫 & 提高程式碼品質及有效提交
程昱翔
1. 如何撰寫開發文件?
2. 票券組開發文件分享
THANK YOU
FOR LISTENING