Day 53: In The Mix!


One of the most powerful features of SCSS is mixins. I mentioned in my last post that CSS preprocessors give writing CSS more of a programming feel and mixins in SCSS are a prime example of that. A prevalent concept in modern programming languages is Don’t repeat yourself (DRY) and mixins are a great way to properly handle code that has to be used in many parts of a project. Mixins are blocks of reusable CSS declarations that can be used though out a project.

Creating and using mixins is a simple process. Mixins are declared by using the @mixin directive, followed by the name of the mixin, and the reusable code is input within curly braces. To use a mixin, one must simply add the @include directive followed by the mixin name to the desired selector and the code defined in the mixin will be included when the SCSS is compiled to CSS. The next level use and creation of mixins is a bit more complex.

Mixins can be used with with more complex programming concepts. For example, arguments can be passed though mixins and default values can be defined for parameters. Conditional statements can also be used with mixins. A mixin can become as complex as the engineer(s) need them to be.

Until next time!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.