Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

SASS/SCSS & Flex Grid

主講人:吳書瑋

關於SASS / SCSS

技術特點

Teams 教育訓練Q&A 群

https://tinyurl.com/skzxl25

什麼是SASS / SCSS跟CSS有什麼差別

什麼是SASS / SCSS

05

SASS

(Syntactically Awesome StyleSheets)

大型專案時傳統 CSS 會遇到的重複、可維護性差等問題。

簡潔、富語意(expressive)、重複性佳(reusable)、可維護性佳和可延展性佳的 CSS 程式碼。

什麼是SASS / SCSS

06

SASS 的語法分為新的 SCSS和舊的 SASS。

SCSS 語法是 CSS3 的超集合,兼容傳統的 CSS 檔案,學習曲線相對較緩。

// SASS

.parent

color: blue

.child

font-size: 12px

// SCSS

.parent {

color: blue;

.child {

font-size: 12px;

}

}

SASS / SCSS 的特性

07

Nesting:降低父元素重複性

Variables:變數可以用來儲存值,方便重複利用

Mixins:降低偽元素撰寫的重複性

Functions:Sass 內建一些好用 functions 可以簡單設定色相、漸層

Operations:透過加減乘除和取餘數等運算子可以方便運算所需的屬性值

@import 引用:可以引入其他 Sass、SCSS 檔案

@extend 共用:可以合併與擴充其他 Class樣式

Nesting:降低父元素重複性

09

巢狀結構可大幅降低代碼的重複性,也可提高代碼的可閱讀性。

// SCSS

.parent {

color: blue;

.child {

font-size: 12px;

}

}

// CSS

.parent {

color: blue;

}

.parent .child {

font-size: 12px;

}

Nesting:降低父元素重複性

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;

}

}

Variables:變數

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

Mixins:降低元素撰寫的重複性

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

}

}

Mixins:降低元素撰寫的重複性

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;

}

Mixins:透過 @include 使用參數

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

}

Functions:Sass 內建functions

15

在 Sass 內建一些好用 functions 可以簡單設定色相、漸層,例如:

adjust-hue($color, $degrees)、fade-out:

$lagoon-blue: fade-out(#62fdca, 0.5);

Operations:加減乘除和取餘數等運算子

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;

*/

@import 引用:引入其他 Sass、SCSS 檔案

17

我們通常使用處組件去處理特定功能,方便管理和維護。以下是引用 _variables.scss 檔案範例,其中檔名前的 "_" 表示引用前要先編譯。

@import "variables";

@extend 合併與擴充

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;

}

@extend 共用與擴充

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;

}

@mixin 和 @extend 比較

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;

}

@mixin 和 @extend 比較

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;

}

關於Flex & Grid

屬性特點

Flexbox

& Grid

什麼是Flexbox?

什麼是Grid?

關於Flex & Grid

Flexbox瀏覽器支援度

26

Grid瀏覽器支援度

27

外容器屬性與內元件屬性

28

Flex 與 Grid

共同的特徵

外容器屬性

內元件屬性

Flex 外容器屬性

29

  • display
  • flex-flow

flex-direction

flex-wrap

  • justify-content
  • align-items

Flex 內元件屬性

30

  • flex

flex-grow

flex-shrink

flex-basis

  • order
  • align-self

Grid 外容器屬性

31

  • display
  • grid-template
  • grid-auto
  • grid-gap

Grid內元件屬性

32

  • grid-column
  • grid-row
  • grid-area

屬性特點

Flexbox

外容器display

36

.flex-container {

display: flex inline-flex;

}

外容器 flex-direction

37

.flex-container {

flex-direction: row row-reverse column column-reverse;

}

外容器 flex-wrap

38

.flex-container {

flex-wrap: nowrap wrap wrap-reverse;

}

外容器 flex-flow

39

flex-direction 與 flex-wrap 的縮寫

.flex-container {

flex-flow: <'flex-direction'> || <'flex-wrap'>

}

外容器 justify-content

40

接近水平對齊的設定,嚴格說來是稱為主軸對齊,主軸是依據上方的 flex-direction而定。

.flex-container {

justify-content:

flex-start flex-end center space-between space-around;

}

外容器 align-items

41

相對於上一個屬性,這是交錯軸的對齊設定。

.flex-container {

align-items: flex-start flex-end center baseline stretch;

}

外容器 align-content

42

上一個屬性的多行版本

.flex-container {

align-content:

flex-start flex-end center space-between space-around stretch;

}

內元件 flex

43

flex 裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis,預設則是 flex-grow。

.flex-container {

ㄌflex: <flex-grow>、<flex-shrink> <flex-basis>;

}

內元件 flex

44

.flex-2 {

flex-grow: 2;

}

flex-grow: 元件的伸展性,預設值為 0,如果設置為 0 則不會縮放。

flex-shrink: 元件的收縮性,預設值為 0,如果設置為 0 則不會縮放。

flex-basis: 元件的基準值,可使用不同的單位值。

內元件 align-self

45

align-self 可以調整單一元件交錯軸的對齊設定。

.align-self {

align-self: auto flex-start flex-end center baseline stretch;

}

內元件 Order

46

可以重新定義元件的排列順序,順序會依據數值的大小排列。

.order {

order: -1;

}

實例分析 - Flexbox

47

  • Flex 跟 與 inline-block 在卡片排版方式比較 - 家豪

codesandbox: https://codesandbox.io/s/objective-colden-yjplv

codepen: https://codepen.io/a32112354jhj/pen/ExjGbRV

  • 利用 Flex 製作垂直置中,與其他垂直置中方法 - 家豪

codesandbox: https://codesandbox.io/s/objective-lake-d4vdx

codepen: https://codepen.io/a32112354jhj/pen/dyowJQq?editors=1100

  • order 跟 grid 以及 float,position 順序排版 - 昱安

https://codepen.io/apple715028/pen/NWqeKoX

  • flex-wrap,flex-directio 還有position 排版 - 昱安

https://codepen.io/apple715028/pen/NWqeKoX?editors=1100

青蛙森友會

Flexbox Froggy

https://flexboxfroggy.com/

Grid

外容器display

ㄓ50

.container {

display: grid inline-grid subgrid;

}

外容器 grid-template

51

用來定義版型的結構,由 column 及 row 定義直、橫列的格線,內容再依隔線作安排。

.container {

grid-template-columns: <track-size> ... <line-name> <track-size> ...;

grid-template-rows: <track-size> ... <line-name> <track-size> ...;

}

  • track-size: 可使用彈性的長度、百分比或分數 (分數的部分需使用 fr 單位)
  • line-name: 可自行命名的名稱

外容器 grid-template

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;

}

fr 與 repeat

53

fr 這個單位能夠將可用的 剩餘空間 做比例分割,以下面的 1fr 2fr 為例,空間將被分割成 1/3、2/3 兩個大小。

另一個是 repeat,可以重複隔線。

.wrap {

grid-template-columns: repeat(2, 1fr 2fr) 100px;

/* grid-template-columns: repeat({次數}, {格線...} {格線...}) {格線...}; */

}

外容器 grid-auto

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;

}

外容器 grid-gap

55

格線的間隔包含垂直及水平。

grid-column-gap: { grid-column-gap };

grid-row-gap: { grid-row-gap };

grid-gap: { grid-row-gap } { grid-column-gap };

外容器 justify-items、justify-content、align-content

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;

}

內部元件 grid-column

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 設定前後順序 */

}

內元件 grid-column、grid-row

58

上面那段的縮寫,使用斜線 (/) 隔開屬性。

.item {

grid-column: 2 / span 4;

}

內元件 align-self

59

與 flex 的使用方法一樣

.align-self {

align-self: auto flex-start flex-end center baseline stretch;

}

實例分析 - Grid

60

  • Grid 起手式 - 怡玲

https://codepen.io/SabrinaGuo/pen/ZEGmXKj?editors=1100

  • Grid-template : 讓排版如你所願 - 怡玲

https://codepen.io/SabrinaGuo/pen/dyoapEj

  • Grid-template-areas : 按照名字排排站 - 怡玲

https://codepen.io/SabrinaGuo/pen/WNvPGBv

農夫森友會

Grid Garden

https://codepip.com/games/grid-garden/

課程總結

62

SASS / SCSS 重點回顧

  • Nesting 降低父層撰寫的重複性
  • Variables 設定變數重複利用
  • Mixins 降低屬性撰寫的重複性
  • @import 引用其他樣式檔案
  • @extend 合併擴充CSS樣式

Flex & Grid 重點回顧

  • 外容器、內元件屬性分別
  • flex-flow 主軸及交錯軸
  • justify-content 水平對齊設定
  • align-items 垂直對齊設定
  • flex 內元件延展特性
  • order 元件排序設定
  • grid-template 直橫列格線設定
  • grid-column 物件起始與結束點

課後問卷調查

https://www.surveycake.com/s/pqXKR

NEXT TIME

2 0 2 0 / 0 5 / 1 5

文件撰寫 & 提高程式碼品質及有效提交

程昱翔

1. 如何撰寫開發文件?

2. 票券組開發文件分享

THANK YOU

FOR LISTENING

Learn more about creating dynamic, engaging presentations with Prezi