5 PRACTICAL SCSS MIXIN EXAMPLES

SCSS or sass is such an important part of every CSS developer toolkit. Scss adds some special features to CSS. One such important feature is scss mixin. If you want to be a comfortable scss developer, it’s important for you to understand how scss mixins work. Before we go through CSS mixin examples, let’s take some time to understand what SCSS actually stands for and its place in the developer community.

What is in the tutorial?

Before kicking off the tutorial about SCSS mixins. let me show you what you’ll learn throughout the SCSS mixin tutorial.

• What is SCSS OR SASS?
• What are SCSS mixins?
• How are SCSS mixins written?
• SCSS mixin examples.
  • Media Query SCSS mixin.
  • Hiding an element utility SCSS mixin:
  • Hiding the overflow SCSS mixin.
  • A circle creator SCSS mixin
    • Passsing arguments to SCSS mixnins.
    • Using default parameters
  • Using a mixin for vendor prefixes.
• Conculsion.

What is SCSS or SASS?

SASS (SCSS) is a preprocessor scripting language compiled into CSS (Cascading style sheets). It has two syntaxes, the original one and the sassy one. The original one called “the indented syntax” implements a syntax similar to Haml. It uses indentation to separate different code blocks and newline characters to separate rules. It traditionally has a .sass file extension. As per the official website of SASS, SASS is short for syntactically awesome style sheets.

Also read: 10 CSS pro tips, code this not that

What Are SCSS Mixins?

Mixins are a set of CSS rules that can reuse throughout the stylesheet. It helps to keep the code very dry. Moreover, these declarations can be added anywhere in the stylesheet by just adding a line of code.

How are SCSS mixins written?

Writing SCSS mixin is a two-step process. Step one is the declaration part and the second step is the usage part. An SCSS mixin example given below separated into two steps demonstrated the process.

Declaration:

@mixin center-element {
display: flex;
justify-content: center;
align-items: center;
}

In the above example, we declare a mixin with the name center-element. The center-element mixin when used in a selector, centers the element both vertically and horizontally.

We use the CSS display rule to set the display property to flex. This turns the element into a flex container. On a flex container, we are able to use justify-content property to align the item horizontally center and align-items to set the vertical alignment to center. So, with the use of just three CSS properties, we can center an element both vertically and horizontally.

Usage:

.photo {
  @include center-element;
}

The mixin declared in the declaration section can be used multiple times anywhere in the style sheet. In the above example, we use it to make the photo align vertically and horizontally center. The mixin centers it in its parent container.

The example of mixin are

SCSS Mixin Examples:

Given below is a general-purpose example of SCSS mixin.

SCSS:

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }
}

#data {
  @include table-base;
}

SASS:

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

#data
  +table-base

Compiled CSS:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

5 Practical SCSS Mixin Examples:

1.Media Query SCSS mixin examples:

You can use mixins as media queries. This is probably the best use case of SCSS mixins. It reduces the CSS code written for media queries by a great length. This helps to standardize and dry code.

The best thing about writing a media query with SCSS is that you don’t need to use write separate media queries for each screen breakpoint. You can just write one media query and pass the dimensions when using it.

Declaration:

@mixin media-query($break-point) {
  @if $break-point== lg {
    @media (max-width: 1250px) { @content }
  }
  @if $break-point== md {
    @media (max-width: 900px) { @content }
  }
  @if $break-point== sm {
    @media (max-width: 600px) { @content }
  }
  
}

In the above SCSS declaration, we create a mixin with the name media-query. The mixin takes the parameter $break-point. The break-point can have values lg, md, sm pointing to large, medium, and small screen sizes respectively. We can create more breakpoints using the same syntax.

The @content is just like a block of code. It makes it possible to make the mixin’ work just like a normal block. For illustration please give the use cases given below a look.

If statements work the same way they work in other programming languages. In the above example if the break-point is equal to lg, then the CSS rules written in the selector will be applied according to the max-width. For example

Simple use case:

The SCSS mixin declared above is used like this.

.container{
  width: 50%;
  background-color: pink;
  height: 50vh;
  @include media-query(md) {
    width: 100%;
  }
}

In the above use case, the initial width of the toolbox is 50% of its parent. Now, we apply the media query by using the media query we declared above. We pass the argument md for medium-size displays. In the media query, the size of the toolbox will now become 100% of its parent element’s width.

2nd Use case:

.footer {
  a {
    display: inline-block;
    @include media-query(sm) {
      display: block;
    }
  }
}

In the above use case, we set the display property of the footer link to block from inline-block using the SCSS mixin media query.

Try it on Codepen:

See the Pen Media Query SCSS mixin by nadeem (@nasyxnadeem) on CodePen.

2. Hiding an element utility SCSS mixin:

We can also use SCSS mixins to hide an HTML element.

Declaration:

@mixin hide-text() {
  position: absolute;
  top: -11111px;
  left: -11111px;
}

Here, we declare an SCSS mixin to hide the text from the display. We set the position to absolute and top and bottom each to -11111px. These CSS rules take the element out of the flow and eventually hide it.

Use:

.hidden-text {
  @include hide-text;
}

We use the mixin hide-text in the hidden-text class. This makes the element with class hidden-text hidden.

Compiled CSS:

.hidden-text {
  position: absolute;
  top: -11111px;
  left: -11111px;
}

Try it on Codepen:

See the Pen Hiding an element utility SCSS mixin by nadeem (@nasyxnadeem) on CodePen.

3. Hiding the overflow SCSS mixin:

Mostly we want to hide the overflow and set the text-overflow to ellipsis. It’s very common and repentance makes the code less dry. So, we have a mixin for it.

Declaration:

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

In the above SCSS mixin, we set the overflow to hidden. It hides the content that overflows its parent container or the specified height and width for the element.

White-space nowrap collapses white space and suppresses line breaks. In simpler terms, nowrap puts the whole paragraph in a line and removes the line breaks from the context.

Text-overflow limits the text to the specified or available height and width and appends three dots (…) at the end of the last line.

Use:

.ellipsis {
  font-size: 20px;
  @include ellipsis;
}

To use it, just include the mixin in the particular selector you want the CSS properties to apply to. Like, we have added the ellipsis mixin to the elements with the ellipsis class.

Compiled CSS:

.ellipsis {
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Try it on codepen:

See the Pen Hiding the overflow SCSS mixin by nadeem (@nasyxnadeem) on CodePen.

4. A circle creator SCSS mixin examples:

Perhaps, the best thing about SCSS mixins is that they make your code abide by the DRY (Don’t repeat yourself) principle. For example, if you have multiple instances where you need to create a circle in CSS, using traditional CSS you’ll need to repeat it at multiple places. But, with SCSS it’s easy. Just create an SCSS mixin and include it as many times as you want. Here is the complete demonstration of the mixin.

Declaration:

@mixin circle($width, $height, $color) {
    width: $width;
    height: $height;
    border-radius: 50%;
    background: $color ;
}

In the above code example, we create a mixin with three parameters width, height, and color. These parameters can be passed as arguments to create circles of different sizes and colors. So, next time you need a circle, just pass the requirements to the mixin and a circle will be created.

Use:

.circle {
  @include circle(100px, 100px, #000);
}

Here, we use the mixin circle with three arguments of 100px, 100px, and #000 for the parameters height, width, and color respectively.

It should be noted that the order of arguments matters. If you pass the arguments in any other order different than the one specified in the declaration it won’t just work.

Also read: Reactjs best practices 2022, code this not that

Also, you can specify a default value for some parameters, so you don’t need to specify them manually. For example

Default Parameters:

Here is an example of an SCSS mixin where we set the default value to the parameters. So, if we don’t specify the arguments it’ll create the circle with the default values.

Declaration:

@mixin circle($width : 50px, $height: 50px, $color: green) {
    width: $width;
    height: $height;
    border-radius: 50%;
    background: $color ;
}

In this example, we set the default values of width, height, and color to 50px, 50px, and green respectively. That means if we don’t pass any values in the mixin argument, the default values will be used. So, after including the mixin in the CSS selector, a circle of height 50px, width 50px and color green will be created.

Use:

.circle {
  @include circle();
}

Since we don’t write any arguments for the above mixin a circle of default values will be created. The default values are 50px, 50px and green.

Compiled CSS:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: green;
}

Try it on codepen:

See the Pen Untitled by nadeem (@nasyxnadeem) on CodePen.

5. Using a Mixin For Vendor Prefixes:

Probably, the best use of SCSS mixins would be to prefix browser vendors. It’s such a handle tool to have at your disposal which saves you a ton of time and code. People who write a lot of CSS code would know how tiring it is to write these properties for each browser.

Browser vendors are an important part of CSS code. Imagine writing a CSS property and then a browser not supporting it. It’ll repeat the whole purpose of web design and make a mess of the layout.

Declaration:

@mixin prefixer($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  -webkit-transform: $property;
  transform: $property;
}

The SCSS mixin “prefixer” takes property as an argument and adds browser prefixes to them. For example, if Google Chrome doesn’t support a property without a “webkit” prefix, we include the mixin prefixed and pass the property. The mixin adds a “webkit” prefix to it.

Use:

.box {
  @include prefixer(rotate(20deg));
}

To use the mixin declared above, just include the mixin and pass the property as an argument. The mixin will automatically convert the properties to their prefixed properties.

Compiled CSS:

.box {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

Try it on Codepen:

See the Pen Using a Mixin For Vendor Prefixes by nadeem (@nasyxnadeem) on CodePen.

Conclusion:

Great if you were able to get the most out of this tutorial. The things discussed in the above tutorial had such an impact on me as a CSS developer. Also, it’s made my life easier and cut out on time and amount of code, which are essentially the most important things to be concerned about as a developer. I Hope, the tutorial helped to clear out some confusion or taught some new concepts. It’d be such a nice thing to hear if you talk about it in the comments below. Thanks a lot :). Have a nice day.