--- title: "#mixins articles | Hashnode" description: "Explore 11 articles tagged #mixins on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/mixins" --- Tag # #mixins 11 posts · 0 followers [PEAKIQ](https://hashnode.com/@peakiqofficial) · [May 10](https://hashnode.com/posts/less/69ffe70ffed21b41d0c23637) ### [Less: CSS Preprocessor for Maintainable Stylesheets](https://peakiq.hashnode.dev/less?utm_source=hashnode&utm_medium=feed) Enhance CSS with variables, mixins, functions, and nesting using the Less tool. Write cleaner, more maintainable, and reusable styles for modern web 1 min read · [peakiq.hashnode.dev](https://peakiq.hashnode.dev/less?utm_source=hashnode&utm_medium=feed) [YI-LIN CHEN (Eva)](https://hashnode.com/@im1010ioio) · [Oct 6, 2025](https://hashnode.com/posts/scss-mixin/68e3e8900b4629b1136ba681) ### [#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 寫法、寬度與高度、清除浮動的樣式，或是特定的按鈕風格等等。如果每次都手動複製貼上... 1 min read · [im1010ioio.hashnode.dev](https://im1010ioio.hashnode.dev/scss-mixin?utm_source=hashnode&utm_medium=feed) [Akinwolemiwa Siyanbola](https://hashnode.com/@akinwolemiwa) · [Sep 20, 2025](https://hashnode.com/posts/understanding-mixins-in-flutter-dart/68cece28b6ec189fee2ee7e7) ### [Understanding Mixins in Flutter (Dart)](https://littleaboutcoding.hashnode.dev/understanding-mixins-in-flutter-dart?utm_source=hashnode&utm_medium=feed) Learn how Flutter mixins help with reusability and clean architecture. This beginner-friendly guide explains everything step by step. 2 min read · [littleaboutcoding.hashnode.dev](https://littleaboutcoding.hashnode.dev/understanding-mixins-in-flutter-dart?utm_source=hashnode&utm_medium=feed) [Iwarifgha Toby](https://hashnode.com/@iwari) · [Mar 20, 2025](https://hashnode.com/posts/understanding-extends-implements-and-with-in-flutters-dart-a-comprehensive-guide/67dbd6b60d169cd271742fc4) ### [Understanding Extends, Implements, and With in Flutter's Dart: A Comprehensive Guide](https://flutterhows.hashnode.dev/understanding-extends-implements-and-with-in-flutters-dart-a-comprehensive-guide?utm_source=hashnode&utm_medium=feed) Learn the differences between extends, implements, and with, and how to effectively use inheritance, interfaces, and mixins in your Flutter projects. 6 min read · [flutterhows.hashnode.dev](https://flutterhows.hashnode.dev/understanding-extends-implements-and-with-in-flutters-dart-a-comprehensive-guide?utm_source=hashnode&utm_medium=feed) [Francisco](https://hashnode.com/@franciscog98) · [May 15, 2024](https://hashnode.com/posts/frontend-notes-101/66441152aa75ed3084f6e967) ### [Frontend notes 101](https://franciscog98.hashnode.dev/frontend-notes-101?utm_source=hashnode&utm_medium=feed) How to organize SASS files in a project using global variables and SASS mixins for a mobile-first approach. 3 min read · [franciscog98.hashnode.dev](https://franciscog98.hashnode.dev/frontend-notes-101?utm_source=hashnode&utm_medium=feed) [Ahmed Abdelaal](https://hashnode.com/@AhmedabdelAal) · [Mar 11, 2024](https://hashnode.com/posts/understanding-ruby-modules-prepend-vs-include/65eeda0af21123c9688f82b5) ### [Understanding Ruby Modules: Prepend vs. Include](https://ahmedabdelaal.hashnode.dev/understanding-ruby-modules-prepend-vs-include?utm_source=hashnode&utm_medium=feed) Introduction: Module is a collection of constants, methods, classes, and variables in a container. Modules implement the mixin facility module Animal def sound puts 'animal sound' end end class Dog include Animal ... 2 min read · [ahmedabdelaal.hashnode.dev](https://ahmedabdelaal.hashnode.dev/understanding-ruby-modules-prepend-vs-include?utm_source=hashnode&utm_medium=feed) [Andres Gesteira](https://hashnode.com/@Kaplan) · [Feb 3, 2024](https://hashnode.com/posts/class-composition-in-typescript/65be9791367c475f8a71a845) ### [Class Composition in TypeScript](https://quantum-quirks.hashnode.dev/class-composition-in-typescript?utm_source=hashnode&utm_medium=feed) Unlock the secrets of TypeScript's Class Composition. 18 min read · [quantum-quirks.hashnode.dev](https://quantum-quirks.hashnode.dev/class-composition-in-typescript?utm_source=hashnode&utm_medium=feed) [Shivam Akhouri](https://hashnode.com/@Rider) · [Dec 27, 2023](https://hashnode.com/posts/custom-mixins-in-django/658c30b8c4a49e8e382389aa) ### [Custom mixins in Django | Django](https://rider.hashnode.dev/custom-mixins-in-django?utm_source=hashnode&utm_medium=feed) Enhance Your Django Views with Reusable Custom Mixins 3 min read · [rider.hashnode.dev](https://rider.hashnode.dev/custom-mixins-in-django?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/custom-mixins-in-django/658c30b8c4a49e8e382389aa) [Ronil Rodrigues](https://hashnode.com/@ronilrodrigues) · [Sep 28, 2023](https://hashnode.com/posts/understanding-abstract-classes-interfaces-and-mixins-in-object-oriented-programming/6516057bbf135f8dfd9e952f) ### [Understanding Abstract Classes, Interfaces, and Mixins in Object-Oriented Programming](https://ronilrodrigues.hashnode.dev/understanding-abstract-classes-interfaces-and-mixins-in-object-oriented-programming?utm_source=hashnode&utm_medium=feed) Object-oriented programming (OOP) is a paradigm that emphasizes the use of classes and objects to model real-world entities. In Java and other similar languages, we have three powerful tools for achieving this: Abstract Classes, Interfaces, and Mixin... 3 min read · [ronilrodrigues.hashnode.dev](https://ronilrodrigues.hashnode.dev/understanding-abstract-classes-interfaces-and-mixins-in-object-oriented-programming?utm_source=hashnode&utm_medium=feed) [Dileepa Chandima](https://hashnode.com/@dilipchandima) · [Jun 2, 2023](https://hashnode.com/posts/my-way-to-implement-media-queries-using-scss-mixins/6479fcaeed1f885a817b70a4) ### [My way to implement media queries using SCSS mixins](https://blog.dilipchandima.com/my-way-to-implement-media-queries-using-scss-mixins?utm_source=hashnode&utm_medium=feed) What is SCSS A CSS preprocessor scripting language, specifically SCSS (Sassy CSS), is a powerful tool that enhances the capabilities of traditional CSS by adding programming features. SCSS acts as an extension to CSS, allowing developers to write mor... 2 min read · [blog.dilipchandima.com](https://blog.dilipchandima.com/my-way-to-implement-media-queries-using-scss-mixins?utm_source=hashnode&utm_medium=feed)