--- title: Reuse code: Master SCSS Mixins | daily.dev description: Mixins reduce duplication and enhance code structure by encapsulating styles into reusable blocks. Mixins encourage code reuse, decrease duplication, and... canonical: https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Reuse code: Master SCSS Mixins | daily.dev og:description: Mixins reduce duplication and enhance code structure by encapsulating styles into reusable blocks. Mixins encourage code reuse, decrease duplication, and... og:url: https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt og:image: https://api.daily.dev/og/posts/LjhO5YCXT.png og:image:alt: Reuse code: Master SCSS Mixins og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Reuse code: Master SCSS Mixins **[asayer](https://daily.dev/sources/asayer)** · 8 min read · 18 upvotes · 2 comments ## Summary Mixins reduce duplication and enhance code structure by encapsulating styles into reusable blocks. Mixins encourage code reuse, decrease duplication, and improve CSS code structure. They help in the creation of consistent designs and the improvement of code structure, and you end with a better style sheet. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@bongudth** · 1 upvotes > nice post --- Tags: [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Reuse code: Master SCSS Mixins","url":"https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt"},"datePublished":"2023-07-06T03:01:32.378Z","dateModified":"2023-07-20T14:10:56.027Z","description":"Mixins reduce duplication and enhance code structure by encapsulating styles into reusable blocks. Mixins encourage code reuse, decrease duplication, and...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cfd3e7be123c9aec9748a7ea2f082474?_a=AQADKdt","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cfd3e7be123c9aec9748a7ea2f082474?_a=AQADKdt","isAccessibleForFree":true,"articleSection":"asayer","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"asayer","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/be8d9d38650943c8a1718ba79f23e9ac","url":"https://daily.dev/sources/asayer"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":18},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"css,frontend","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"asayer","item":"https://daily.dev/sources/asayer"},{"@type":"ListItem","position":3,"name":"Reuse code: Master SCSS Mixins"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/reuse-code-master-scss-mixins-ljho5ycxt","comment":[{"@type":"Comment","text":"nice post","datePublished":"2023-08-01T07:42:54.486Z","url":"https://daily.dev/posts/LjhO5YCXT#c-8AUOaOpVx","author":{"@type":"Person","name":"Huynh Thi Khanh Linh","url":"https://daily.dev/bongudth","image":"https://avatars.githubusercontent.com/u/73637868?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```