邊撸鐵健身邊學Code的Dhal

動呲動呲

0%

S2-3-前端-SCSS-切版實作

Posted on In ,

紀錄第一次使用SCSS預處理器來實作切版，處理Form大魔王。
此文章圖片大部分均來自Alpha Camp課程內容
完成作品

變數 (variable) 與運算子 (operator)

使用$號來宣告變數，使用:來賦值。 也可以使用 + - * /來做值的運算

繼承與覆寫

使用%來宣告共同屬性，在選擇的元素中使用 @extend來繼承共同屬性

mixin

在 Sass 裡，我們使用 @mixin 進行宣告，並使用 @include 使用 mixin。
在以下例子中，我們創建了一個名為 font-setting 的 mixin。可以發現，透過 mixin，大幅提高了程式碼的重用性 (reusability) 以及可讀性 (readability) 。

使用@each 及變數生成 basic setting

1
2
3
4
5
6
7
8
9
10
11
12
13
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
);
@each $prop, $abbrev in (width: w, height: h) {
 @each $num, $val in $sizes {
   .#{$abbrev}-#{$num} {
     #{$prop}: $val;
   }
 }
}

$prop， $abbrev , $num, $val, $sizes 都是變數，分別代表:

  • $prop: width, height
  • $abbrev: w,h
  • $sizes: 上方定義的變數sizes
  • $num: 25, 50, 75, 100
  • $val: 25%, 50%, 75%, 100%

意思會生成以下

可以使用 Sass to CSS 的工具Sass.js來觀察

使用cursor改變滑鼠樣式

可以使用cursor來改變滑鼠樣式，可以參考 MDN

使用 ::-webkit-scrollbar 生成捲動軸

::-webkit-scrollbar 只支援WebKit的瀏覽器 (Chrome, Safari) 可以使用。

可以在要加上卷軸的BLOCK上使用以下偽元素
::-webkit-scrollbar — 整個滾動條。
::-webkit-scrollbar-button — 滾動條上的按鈕（向上和向下箭頭）。
::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊。
::-webkit-scrollbar-track — 滾動條軌道。
::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分。
::-webkit-scrollbar-corner — 同時有垂直滾動條和水平滾動條的部分。
::-webkit-resizer — 部分元素角部樣式的一部分（例如：textarea 的可拖動按鈕）。

如果是 Mozilla Firefox，我們可以使用 CSS Scrollbar

nth-child 偽元素

我們可以用 nth-child 這個選擇器去選取每個步驟的元件，然後再透過偽元素 ::after 加上數字：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.step {
  flex: 1;
  text-align: center;
  &:nth-child(1) .circle-container::after {
    content: "1";
  }
  &:nth-child(2) .circle-container::after {
    content: "2";
  }
  &:nth-child(3) .circle-container::after {
    content: "3";
  }
  //...
}

但這樣做，有很多重複的內容，也可以使用 @mixin 的功能。
是先叫出 @mixin，再為它取個適合的名字，並將變數名稱傳進去。最後，把要重複使用的 CSS 放在 { } 裡面。像這樣：

1
2
3
@mixin <mixin_的名字> (<變數名稱>) {
  // 要重複使用的程式碼
}

這個 @mixin 是用來取得 stepper 裡的數字，所以我們叫它 getStepNums。而要傳進去的變數就是 num。同時，我們使用 Sass 提供的 @for 迴圈來產生 1、2、3 這三個數字：

1
2
3
4
5
6
7
@mixin getStepNums($num) {
  @for $i from 1 through $num {
    &:nth:child(#{$i}) .circle-container::after {
      content: '#{$i}';
    }
  }
}

建立好這個 mixin 之後，要如何「呼叫」它呢？我們會回到需要這段 CSS 的地方，使用 @include 來呼叫它，並傳入我們的的參數，也就是我們總共需要的步驟數目 3。

所以在 .step 我們的 CSS 會是這樣：

1
2
3
4
5
6
.step {
  flex: 1;
  text-align: center;
  @include getStepNums(3);
  // ...
}

屬性選擇器

可以透過 &[type=”checkbox”] 來一口氣選擇所有在 HTML 中 type 等於 checkbox 的元素：

1
2
3
4
5
6
7
 &[type="checkbox"] {
  ~ label {
    display: inline-block;
    font-weight: normal;
    margin: 0;
  }
}

[<屬性> = 字串] 是一個 CSS 選擇器，意義是透過 HTML 屬性來選擇 HTML 元素。

我們也使用了 ~ sibling 選擇器來選擇跟 checkbox 同一層的 label ，確保它跟 checkbox 本身會排在同一行。最後，再調整一下 margin ，這樣 checkbox label 的樣式就已經調好了。

取消checkbox在瀏覽器中的預設樣式

checkbox的樣式在每個瀏覽器中都會被設定好，而且無法改動，若要修改，要先取消瀏覽器的預設。

1
2
3
4
5
6
7
8
 &[type="checkbox"] {
   -webkit-appearance: none; // 補上
  ~ label {
    display: inline-block;
    font-weight: normal;
    margin: 0;
  }
}

這時會發現checkbox樣式已經被取消了，接著才可以透過指令修改。
接著透過不同的狀態，去設定樣式

使用box-shadow: inset 製作radio button 圓點

複習box-shadow參數

分別是：x-偏移量 (x-offset)、y-偏移量 (y-offset)、陰影模糊半徑 (blur radius)、陰影擴散半徑 (spread radius)、與陰影顏色 (color)。

在 x-偏移量與 y-偏移量的部分，是指陰影是相對於元素輪廓本身的偏移。目前要製作的是內圓，陰影其實在 x-軸與 y-軸都沒有偏移。所以都設為0。

陰影模糊半徑指的是希望模糊散開，還是邊緣銳利的。實心是銳利的圓形，陰影模糊半徑也設 0。

陰影擴散半徑指在陰影最邊緣還要往外擴散多少距離。在打造一般常見的陰影時，可以利用陰影模糊半徑跟陰影擴散半徑的配搭，讓陰影擴散得很遠。但在這邊，我們就只會利用這個擴散半徑來做出內圓，設定 5px。

1
2
3
4
5
6
7
8
&[type="radio"] {
  -webkit-appearance: none; 
  border-radius: 50%;
  cursor: pointer;
  &:checked {
    box-shadow: inset 0 0 0 5px $secondary-blue;
  }
}

修改select 標籤樣式

要修改select 樣式，必須要先取消瀏覽器預設，之後把select用一個div包起來，之後在div設上after偽元素來新增下拉符號。
之後再設定外圍的select-wrapper寬度跟select標籤的寬度一樣就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.select-wrapper {
    width: 150px;
    position: relative;
    &::after {
      content: "\25BE";
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
    }
  }
  select {
    @extend %input-style;
    -webkit-appearance: none;
    cursor: pointer;
    width: 100%;
  }

下拉箭頭border製作法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.select-wrapper {
    width: 150px;
    position: relative;
    &::after {
      content: "\25BE";
      content: "";
      position: absolute;
      border-style: solid;
      border-width: 6px 5px 0 5px; // 設定border寬度來製作
      border-color: $light-gray transparent transparent transparent; // 之後將其他三邊透明
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
    }
  }
  select {
    @extend %input-style;
    -webkit-appearance: none;
    cursor: pointer;
    width: 100%;
  }

優化按鈕

現在select的下拉箭頭蓋住了select，所以下拉箭頭點了會沒反應，設定z-index 將下拉箭頭放置到select後方即可

Welcome to my other publishing channels