---
title: "Discussion on \"#85 SASS/SCSS (4) Mixins @mixin & @include\" | Hashnode"
description: "Discussion on \"#85 SASS/SCSS (4) Mixins @mixin & @include\". ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。\n\n\n好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣式碼」的問題，它就是 Mixin！\n\n一、Mixin 是什麼？\n在寫 CSS 的過程中，你一定會遇到某些樣式組合需要不斷重複使用的情況。例如：置中一個元素的 Flexbox 寫法、寬度與高度、清除浮動的樣式，或是特定的按鈕風格等等。如果每次都手動複製貼上..."
url: "https://hashnode.com/posts/scss-mixin/68e3e8900b4629b1136ba681"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [#85 SASS/SCSS (4) Mixins @mixin & @include](https://im1010ioio.hashnode.dev/scss-mixin?utm_source=hashnode&utm_medium=feed)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣式碼」的問題，它就是 Mixin！ 一、Mixin 是什麼？ 在寫 CSS 的過程中，你一定會遇到某些樣式組合需要不斷重複使用的情況。例如：置中一個元素的 Flexbox 寫法、寬度與高度、清除浮動的樣式，或是特定的按鈕風格等等。如果每次都手動複製貼上...

Oct 6, 2025 · 1 min read · im1010ioio.hashnode.dev  
Updated Feb 6  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#scss](https://hashnode.com/tag/scss)
-   [#sass](https://hashnode.com/tag/sass)
-   [#mixin](https://hashnode.com/tag/mixin)
-   [#mixins](https://hashnode.com/tag/mixins)

## Written by

[YI-LIN CHEN (Eva)](https://hashnode.com/@im1010ioio)

@im1010ioio · Taipei, Taiwan

  
[View profile](https://hashnode.com/@im1010ioio)

ғʀᴏɴᴛᴇɴᴅ ᴅᴇᴠᴇʟᴏᴘᴇʀ / ᴅᴇsɪɢɴᴇʀ / ᴄʀᴇᴀᴛᴏʀ

Chief Designer @HealthyPlate

## Responses

Markdown supported · ⌘↵ to post

No responses yet.