Ellie's Blog
0%

6/8 SCSS +RWD 基礎頁面 1.0版

發表於 更新於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

學習 Sass 基礎 1 –Sass 是什麼 如何引入

學習 Sass 基礎 2 – 語法

RWD 01 基礎

什麼是 PostCSS？

成品

6/8 scss +RWD 基礎頁面 1.0 版

初期步驟：學習工具 /規劃頁面

基礎是啥? 掌握工具的基礎

  • 找相關文章
    • 基礎的文章優先
  • 寫筆記
    • 記錄下來 作為實作的參考
    • 也可以作為複習

先安裝 嘗試使用 安裝插件

  • 用用看 basic

找出想模仿的頁面

基礎實作步驟 : 為了熟悉工具的使用

做出 html 切版

寫出原版的 css

修改 css 變成模組化的檔案

RWD 規劃

  • 規劃 madia 斷點
  • 從哪裡開始寫 ?
    • 手機 使用 min-width

實作筆記

兩種設定 flex 的方法

建立 @each 迴圈生成的 class

  • 用在 HTML 添加 class
  • 注意:
    • 不能生成@extend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$direction-types: center, start, end, space-between, space-around, space-evenly;
@each $type in $direction-types {
  .flex-row-#{$type} {
    display: flex;
    justify-content: $type;
    align-items: center;
  }
  .flex-column-#{$type} {
    display: flex;
    flex-direction: column;
    justify-content: $type;
    align-items: center;
  }
}
1
2
3
4
5
6
7
<ul class="flex-row-start">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

建立 mixin

  • 用在 css 添加@include
  • 在 media 的時候使用
1
2
3
4
5
6
7
8
9
10
11
@mixin flex-row($justify-content, $align-items) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;
}
@mixin flex-column($justify-content, $align-items) {
  display: flex;
  flex-direction: column;
  justify-content: $justify-content;
  align-items: $align-items;
}
1
2
3
4
5
6
@include pad {
  @include flex-row(space-between, start);
  article {
    width: 75%;
  }
}

怎樣使用變數?

什麼可以寫成變數 ?

  • 原則就是會很多次重複使用的設定 就可以寫成 variable

  • 範例: $logo-img

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //注意寫法 需要" 不需要"url()"
    $logo-img: "https://cdn-icons-png.flaticon.com/512/7041/7041416.png";

    @mixin logo-img($logo-img, $width, $hight) {
      a {
        background-image: url($logo-img);
        width: $width;
        height: $hight;
      }
    }

    @include logo-img($logo-img, 50px, 50px);

命名方法 ?

  • 讓人可以清楚明白用途的

我自己寫過覺得好用的變數 (之後會慢慢增加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//font
$font-sm: 1rem;
$font-md: 1.5rem;
$font-lg: 2rem;
$line-height: 1.5rem;
//color
$theme-color-main: #b2998e;
$theme-color-second: #dcc6c6;
$theme-color-background: #e1e0e7;
$text-color: #854e4b;
$border-color: #854e4b;
$table-color: #f6ded4;
//btn
$btn-text-color: #e1e0e7;
$btn-background-color: $theme-color-background;
$btn-hover-color: $theme-color-second;

//margin
$margin-s: 0.5rem;
$margin-m: 1rem;
$margin-l: 1.5rem;
$margin-xl: 2rem;
//pic
$logo-img: "https://cdn-icons-png.flaticon.com/512/7041/7041416.png";

什麼可以寫成 MIXIN？

  • 比較複雜 但是常用的設定
    • 要一次設定很多東西 怕會有遺漏就可以使用 mixin

寫成 MIXIN 的好處

  • 寫一次之後之後可以重複使用這些設定
  • 可以慢慢改善單一元件的功能 越寫越完整
  • 也可以參考別人的寫法 改善自己的專案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//logo
@mixin logo-img($logo-img, $width, $hight) {
  h1 {
    a {
      background-image: url($logo-img);
      display: block;
      width: $width;
      height: $hight;
      text-indent: -1000px;
      background-size: contain;
      background-repeat: no-repeat;
      text-indent: 101%;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

例如: 按鈕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin btn {
  display: block;
  padding: 0.5rem;
  background-color: $btn-background-color;
  border: $btn-background-color solid 1px;
  border-radius: 5%;
  text-decoration: none;
  color: $text-color;
  text-align: center;
  font-weight: bold;

  &:hover {
    background-color: $btn-hover-color;
  }
}

修改 prettier 設定 讓 scss 自動排版

選擇設定

1.png

修改預設的 formatter

1.png