自訂樣式

Last updated on 10/29/2024@mrbirddev

介紹

Slidde.co 提供了一種獨特的網頁設計方法,允許您在每個組件中直接使用 CSS 來自訂樣式。與 Webflow 等傳統網站建構器不同,Slidde.co 的特色在於:

  • 標準 CSS 使用
    • 實現任何網站樣式。
    • 將樣式匯出到任何網站建構器,使其在切換到基於代碼的開發時可重用。
  • 預設值
    • 受 Tailwind 等庫的啟發,Slidde.co 提供樣式的預設值,允許您通過滑鼠點擊選擇選項,而不是輸入。
  • 清晰結構
    • 即使是複雜的樣式,設置仍然清晰,不會擾亂 DOM 結構。

範例組件:水平導航欄

讓我們以一個複雜的組件——水平導航欄為例,探索五個自訂區域:

  1. 自訂樣式:整個導航欄的 CSS。
  2. 容器自訂樣式:左側容器的樣式,通常放置標誌或標題。
  3. 按鈕自訂樣式:桌面按鈕的樣式。
  4. 按鈕啟用樣式:啟用的桌面按鈕樣式。
  5. 切換按鈕自訂樣式:移動端漢堡菜單按鈕的樣式。

您可以在這裡查看完整的導航欄範例 範本

高級 CSS 語法

Slidde.co 支援高級 CSS 語法以實現更精確的樣式:

  • 點分隔符:使用 . 將屬性與修飾符分隔。
  • 駝峰式命名:使用駝峰式命名法來命名 CSS 屬性。

範例:

  • &:hover.color:懸停時的字體顏色。
  • &:hover.borderColor:懸停時的邊框顏色。
  • padding:所有螢幕尺寸的內邊距。
  • md.padding:大於中等(桌面)螢幕的內邊距。

要為移動端和桌面設置不同的內邊距:padding: .5remmd.padding:2rem

標準 CSS 選擇器:

  • & > img.height:當前元素內第一層 img 元素的高度。
  • &:first-child.color:針對第一個子元素的 ::first-child 偽類。
  • &::after.content:使用 ::after 偽類來添加額外的元素。

遵循這些指導方針,您可以有效地使用 Slidde.co 精確且輕鬆地設計和自定義您的網頁組件。