---
title: Css技術支援
Writen in: 2023
---

# Css技術支援

###### tag: `2023`

:::info
有鑑於新生之訊網的網頁排版需要高度的自訂義，因此使用tailwind作為主要的Css框架，並以Sass為輔。
:::

## Vue中的\<style>設定

- 記得使用 **\<style lang="scss" scoped>**

- 不使用scoped的話，你定義的class等等會影響到子元件(具體影響取決與html的架構)，代表別人的檔案能讀取到的你的css設定，你也可能讀取到的別人的css設定。

> 直接害別人無法debug，可以說是非常過分 ==

- scss能大幅優化寫css時的麻煩處，例如你有三個class分別叫 box_container-1 box_container-2 box_content
##### 你可以用scss寫成:

        /* & 代表上層的class名稱 */
        .box {
            &_container {
                &-1 {
                    /* box_container-1 */
                }

                &-2 {
                    /* box_container-2 */
                }
            }

            &_content {
                /* box_content */
            }
        }

解決了傳統css架構過於過於散亂的問題。
> 延伸閱讀: [連接符&、@mixin與@function](https://ithelp.ithome.com.tw/articles/10211934)

## 排版技巧 (tailwind)

- 垂直水平置中
1. 使用display: flex;

        /* 在父元素設定 */
        <div class="flex justify-center items-center">
            <div> 垂直水平置中 </div>
        </div>

2. 使用position: relative;

        /* 將子元素左上角定位於父元素中央
        再讓子元素向左上移動自身半個寬高的距離 */
        <div class="relative">
            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                垂直水平置中
            </div>
        </div>

:::warning

有時候父元素已經使用absolute做自身的定位，無法再添加relative (因為同屬position屬性)，這時候可以在父元素內部添加
\<div class="h-full w-full relative">\</div>

- 根據螢幕長寬調整畫面大小

:::warning
tailwind在2023/12月發布的3.4.0版本後，全面支援dvh lvh svh，意味著手機的排版將變得更加容易。
> 外部連結: [tailwind的viewport height屬性](https://tailwindcss.com/docs/height)
:::

- 設定最外層元素為

        /* navbar的高度為10vh */
        <div class="pt-[10svh] w-svh h-svh"></div>