分類彙整:Uncategorized

Gulp自動編譯增加CSS前綴

目的

自動編譯增加CSS前綴
【手動編譯】http://autoprefixer.github.io/

檔案架構

.
├── css
│   └── styles.css
└── index.html

安裝node.js

去node.js官網下載node.js

安裝gulp

終端機cd到目前編輯的資料夾,輸入以下指令

npm init

不管他回啥都按enter
接著再輸入以下指令

npm install gulp -g

新增gulpfile.js

.
├── css
│   └── styles.css
├── index.html
└── gulpfile.js

再回到terminal輸入指令

npm install gulp gulp-autoprefixer --save-dev

編輯gulpfile.js

在gulpfile.js新增以下程式碼

var gulp=require('gulp');
var autoprefixer=require('gulp-autoprefixer');

gulp.task('style', function(){
    gulp.src('css/style.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('build'))
})

再到terminal輸入指令

gulp styles

編譯完成後,會出現build資料夾,裡面有styles.css,內容是自動完成前綴的CSS檔案
往後只要把html的<link>換成dist的CSS就能引入有完整前綴的檔案

<link ref="stylesheet" href="dist/styles.css" />

watch 存檔同時編譯

在gulpfile.js下方新增以下程式碼

gulp.task('watch', function(){
    gulp.watch('css/styles.css', ['styles']);
})

再回到terminal

gulp watch

就能看到系統會隨時監控style.css,只要一偵測到存檔,就會即時做編譯

Line Awesome

用法

跟FontAwesome4完全一樣,只要引入CSS,用i tag加上class就能使用

  1. HTML <head>引入CSS資源
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/line-awesome@1.3.0/dist/line-awesome/css/line-awesome.css" />
  2. HTML <body>內使用<i>呼叫line awesome
    i.la.la-exclamation

Line Aewsome取代Font Awesome

當目前的專案已經使用Font Awesome開發一段時間時,
全數手動更換class成Line Awesome會很花成本,
這時可以使用互換性的Line Awesome CSS,
只要替換CSS,不用更換class,就能全數更新成Line Awesome的icon

  1. HTML <head>引入CSS資源
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/line-awesome@1.3.0/dist/font-awesome-line-awesome/css/all.css" />
  2. HTML <body>內繼續使用Font Awesome的<i>
    i.fa.fa-exclamation

參考資料

  • https://icons8.ru/line-awesome/howto
  • https://icons8.com/line-awesome

flex#11 應用:RWD排版與磚牆效果

RWD排版

利用flex-wrap與flex-grow / flex-basis達成不依靠@media做到RWD

.container
 .box.box1 one 😎
 .box.box2 two 🍕
 .box.box3 three 🍟
 .box.box4 four 👍
 .box.box5 five 👀
 .box.box6 six 💩
.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
 
.container
 display: flex
 border: 10px solid mistyrose
 flex-wrap: wrap
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 300px //效力等同於width: 300px
 flex-grow: 1

Display
▼1236px以上

▼900px~1235px

▼600px~899px

▼599px以下

磚牆效果

利用flex-direction、flex-wrap、flex-grow達成類似磚牆的排法

.container
 display: flex
 border: 10px solid mistyrose
 flex-direction: column
 flex-wrap: wrap
 height: 100vh
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 250px
 flex-grow: 1
 
.box3
 flex-grow: 5
 
.box4
 flex-basis: 100px

Display

one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

flex#10 flex-basis, flex-grow, flex-shrink

解説

flexg屬性可以在拆分成以下3項

  • flex-basis:當flex item沒變形時,他的初始預設寬度(或是高度,當在cross-axis時)
  • flex-grow:當容器有多餘空間時,分配給flex item的空間比例
  • flex-shrink:當容器空間不足時,flex item犧牲體積的比例
.container
 .box.box1 one 😎
 .box.box2 two 🍕
.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
one 😎
two 🍕

flex-basis

當flex item沒變形時,他的初始預設寬度(或是高度,當在cross-axis時)

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 400px
one 😎
two 🍕

設定為flex-basis: 400px後,每個item的寬度都變成400px了

flex-grow

套用以下設定

  • box1→flex-grow: 1
  • box2→flex-grow: 2

解説:假定容器寬度為1200px
在flex-basis的設定之下,box1、box2各寬400px
1200-400*2=300px,餘下的寬度為300px

flex-grow總數為1+2=3
300px/3=100px
因此

box1的寬度變為400px+100px=500px
box2的寬度變為400px+200px=600px

【注意】由於flex屬性同時包含了flex-grow / shrink
所以如果今天設定是

  • box1→flex: 1
  • box2→flex: 2

box1寬度會等於1/31200px=400px
box2寬度會等於2/3
1200px=800px

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 400px

.box1
 flex-grow: 1
.box2
 flex-grow: 2
one 😎
two 🍕

基於上述算式,box2只比box1大一點點而已。
並且,由於沒有指定flex-shrink
當容器寬度小於2者的flex-basis加總時(例:容器為700px),
2個flex-item會變成一樣大。

flex-shrink

flex-shrink只會在容器空間不夠時有作用
容器空間過多時不會起作用
(flex-grow的相反)

計算方式也是grow的相反

  • box1→flex-shrink: 1
  • box2→flex-shrink: 2

解説:假定容器寬度為500px
在flex-basis的設定之下,box1、box2各寬400px
500-400*2=-400px,不足400px

flex-grow總數為1+2=3
300px/3=100px
因此

box1的寬度變為400px-100px=300px
box2的寬度變為400px-200px=200px

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 400px

.box1
 flex-shrink: 1
.box2
 flex-shrink: 2
one 😎
two 🍕

在寬度足夠時看會沒差,需要把螢幕條小在看。
條小後,會看到box2比box1大一點點

總結

flex屬性集合了flex-grow, flex-shrink, flex-basis三種屬性
當我們使用flex: 1時,其實代表的是flex: 1 1 auto

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

flex#9 flex

flex屬性

flex屬性,指定在flex item上面。描述當flex container有剩餘空間(或不夠的空間)時要如何分配
flex屬性僅代表等分比例原則,不是px也不是%

  • flex: 1→1份
  • flex: 2→2份(flex1的二倍)
  • flex: 3→3份(flex1的三倍)

未指定flex屬性時

.container
 .box.box1 one 😎
 .box.box2 two 🍕
 .box.box3 three 🍟
 .box.box4 four 👍
 .box.box5 five 👀
 .box.box6 six 💩
.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
.box7
 background: #e74c3c
.box8
 background: #bdc3c7
.box9
 background: #2ecc71
.box10
 background: #16a085
 
.container
 display: flex
 border: 10px solid mistyrose

.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

flex容器有剩餘空間,flex item沒有填滿剩餘空間

flex: 1

若指定所有flex item為1,則會

  • flex item會填補容器的空白
  • 所有flex item寬度變一樣
.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
.box7
 background: #e74c3c
.box8
 background: #bdc3c7
.box9
 background: #2ecc71
.box10
 background: #16a085
 
.container
 display: flex
 border: 10px solid mistyrose

.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex: 1
one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

flex item填滿容器,並且均等長

flex進階指定

套用以下指定

  • box1→flex: 1
  • box2→flex: 2
  • box3→flex: 1
  • box4→flex: 1
  • box5→flex: 3
  • box5→flex: 3
.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
.box7
 background: #e74c3c
.box8
 background: #bdc3c7
.box9
 background: #2ecc71
.box10
 background: #16a085
 
.container
 display: flex
 border: 10px solid mistyrose

.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex: 1

.box2
 flex: 2

.box5
 flex: 3
one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

box1為1等分 ∴寬度為1/9
box2為2等分 ∴寬度為2/9
box3為1等分 ∴寬度為1/9
box4為1等分 ∴寬度為1/9
box5為3等分 ∴寬度為3/9
box6為1等分 ∴寬度為1/9

總長為1+2+1+1+3+1=9

Catalina 在根目錄(Macintosh HD)編輯的方法

關閉SIP

輸入以下指定確認SIP是否開啟

csrutil status

//回傳enabled表示SIP為開啟的撞狀態,需要關閉SIP
//回傳disabled表示SIP為關閉狀態,不需關閉SIP(跳過關閉SIP的步驟)

如SIP為enabled狀態,執行以下步驟關閉SIP

  1. 電腦關機
  2. 關機後,按住開機鍵,同時按住Cmd+R(按住直到螢幕出現apple logo後才放開)
  3. 進入復原模式,選擇使用者後,按下一步
  4. 選擇上方的「工具程式」,選「終端機」
  5. 輸入以下指令
    csrutil disable
  6. 重新開機

解除根目錄唯讀

  1. 終端機輸入csrutil status,確認回傳為disabled
  2. 輸入sudo mount -uw /
  3. 輸入sudo killall Finder
  4. 輸入cd /System/Library/Extensions
  5. 輸入sudo mv AppleThunderboltNHI.kext AppleThunderboltNHI_kext.bak

flex#8 align-self

說明

  • align-items指定全體的flex item沿著cross-axis對齊情況
  • align-self指定個別的flex item沿著cross-axis對齊情況(可以覆蓋align-items的指定)

align-self: auto (default)

預設值:不指定(繼承align-items)

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: auto
1
2
3
4
5
6
7
8
9
10

align-self: flex-end

對齊cross-axis的底部
現在cross是由上至下↓↓↓,所以是靠下對齊

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: flex-end
1
2
3
4
5
6
7
8
9
10

align-self: flex-end

對齊cross-axis的中部
現在cross是由上至下↓↓↓,所以是靠中對齊

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: flex-end
1
2
3
4
5
6
7
8
9
10

align-self: baseline

對齊cross-axis的上部
現在cross是由上至下↓↓↓,所以是靠上對齊

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: flex-end
1
2
3
4
5
6
7
8
9
10