自訂樣式

介紹

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: .5rem 和 md.padding:2rem。

標準 CSS 選擇器：

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

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