Sass is the most popular CSS preprocessor among web developers. It allows you to introduce programmatic logic to your CSS code and make use of advanced features such as variables, mixins, functions, inheritance, nesting, and others. Mixins are probably the most popular feature of Sass, as they let you create groups of CSS declarations that you can easily reuse whenever you need. With mixins, you can save a lot of time, avoid repetitions, and make your code more readable.
In this article, we have collected ten awesome Sass mixins that solve everyday CSS tasks web developers frequently encounter, such as applying vendor prefixes, supporting retina images, or maintaining aspect ratio. We have provided the mixins in SCSS format.
1. ADD VENDOR PREFIXES TO ANY CSS PROPERTY
These days many web developers use PostCSS and Autoprefixer to add vendor prefixes to CSS properties that don’t come with sufficient browser support. However, there are still many developers who rather use Sass for that purpose. You can use the following mixin to add vendor prefixes to any CSS property:
Example of Usage
This mixin takes two arguments that you need to define when you call it with the @include rule. The first is the name of the CSS property, and the second is its value.
Compiled CSS
In the compiled CSS, you will see that Sass has added all the necessary vendor prefixes to the transform property, used in the example.
2. VERTICAL CENTERING
Vertical alignment with CSS is hard, as it doesn’t have a property that explicitly lets you vertically align elements. The following mixin contains all the CSS declarations you need to vertically position any HTML element you want:
Example of Usage
As this mixin doesn’t take any argument, it’s pretty easy to call it. You simply need to add it to the @include rule. Don’t forget to add the parentheses after the name of the mixin.
Compiled CSS
The Sass compiler simply adds the CSS declaration to the selector you want to position vertically.
3. FONT-FACE RULE
It’s kind of annoying to add a separate @font-face rule to every custom font you want to use, especially since you need to support so many formats. With this following font-face mixin, you can make that tedious task much faster. Make sure that you use the right file path within the url() function.
Example of Usage
The font-face mixin has two arguments, the name of the font and the file name that will be part of the URL. You need to use the same file name with every font format (.eot, .woff, .ttf, etc.)
Compiled CSS
The compiled CSS is very elegant as you can see. The Sass compiler has concatenated the URL paths and returned the proper @font-face rule.
4. KEYFRAME ANIMATIONS
You can create beautiful animations with CSS using the @keyframes rule. Mastering animations is not easy by any means. Even if you are a pro, the syntax can be still hard to remember. The following keyframes mixin makes use of the @content directive that allows you to pass a bunch of CSS rules to the mixin.
Example of Usage
The keyframes mixin takes one argument, the name of the animation. As the mixin uses the @content directive, you need to add the rules related to animation within the @include block.
Compiled CSS
The Sass compiler returns all the @keyframe declarations you need in order to run your animation smoothly in every browser.
5. RETINA-READY IMAGES
Here is a great Sass mixin for supporting retina-ready images you can serve to Apple devices with a Retina Display. To use this mixin, you need to provide two versions of the same image, one in single size (1x) and one in double size (2x). You can use this mixin to provide a retina-ready background image for any HTML element.
Example of Usage
You need to specify three arguments for this mixin: the file path to the retina image (2x) and its width and height.
Compiled CSS
In the compiled CSS, you will find the proper media queries for Retina Display with all the necessary declarations.
6. ABSOLUTE POSITIONING
Although it’s not particularly hard to absolutely position an element with CSS, you can save a lot of time with this mixin. It allows you to quickly specify values for the four directions: top, right, bottom, and left.
Example of Usage
To use the absolute positioning mixin, you simply need to add the values for the four directions. Don’t forget to pay attention to the order of the arguments. They follow each other in clockwise direction.
Compiled CSS
The compiled CSS is pretty straightforward; it’s just a simple rule set for absolute positioning.
7. ARROW WITH FOUR OPTIONAL DIRECTIONS
Even if an arrow is not the most spectacular part of a web page, we frequently need to use it. And, it’s not that easy to create it with CSS, as you need to use a certain technique that can be hard to remember. This mixin helps you quickly create an arrow with CSS. You can choose from four directions (up, down, left, right) and set the size and color of the arrow.
Example of Usage
The arrow mixin takes three arguments: the direction, size, and color of the arrow. However, as the mixin also comes with defaults for the arguments (down, 5px, #555), you can also use it without specifying custom arguments.
Compiled CSS
Below, you can see how the compiled CSS looks like in both cases.
8. MEDIA QUERIES FOR MOBILE-FIRST DESIGN
You can find several Sass mixins for media queries all over the web. However, this mixin allows you to use media queries that support mobile-first design. In mobile-first design, we design for the smallest screen at first, then define styles for larger screens wherever it’s necessary. You can use the following mixin with three breakpoints: tablet, desktop, and large. There’s no breakpoint for mobile because that’s the size you design for by default.
Example of Usage
Here, you only need to define one argument, the breakpoint you want to use. You can choose from tablet, desktop, and large. This mixin uses the @content directive, so you need to add the related CSS rules separately, within the @include rule.
Compiled CSS
As you can see below, the Sass-compiler has generated the proper media query for the screen size you want to apply these specific rules for.
9. FIXED ASPECT RATIO
If you want a consistent look across different screen sizes you will find this aspect ratio mixin useful. It maintains the aspect ratio at any screen size. To use this mixin, you need two HTML elements: an outer and an inner one. The mixin calculates the aspect ratio of the two elements and maintains that at any resolution.
Example of Usage
You need two HTML elements to make the aspect ratio mixin work. Both need to be either a block or an inline-block element.
In the SCSS, you need to define the aspect ratio within the arguments of the mixin and add the mixin to the outer element.
Compiled CSS
The Sass-compiler calculates the aspect ratio and applies it to the padding-top rule.
10. TEXT SHORTENING
Our last mixin is quite simple to use but it can come in handy if you work a lot with text. It performs truncation on any text that overflows its containing element and adds an ellipsis (…) to the end.
Example of Usage
This mixin doesn’t take any argument, so you can add it to any element without much thinking.
Compiled CSS
The compiled CSS simply applies the specified rule set to the HTML element you’ve added the mixin to.
NEXT STEPS
Sass mixins can automate and facilitate a lot of tasks that would be much harder to do in regular CSS.
In this article, we have collected ten awesome Sass mixins that solve everyday CSS tasks web developers frequently encounter, such as applying vendor prefixes, supporting retina images, or maintaining aspect ratio. We have provided the mixins in SCSS format.
1. ADD VENDOR PREFIXES TO ANY CSS PROPERTY
These days many web developers use PostCSS and Autoprefixer to add vendor prefixes to CSS properties that don’t come with sufficient browser support. However, there are still many developers who rather use Sass for that purpose. You can use the following mixin to add vendor prefixes to any CSS property:
Example of Usage
This mixin takes two arguments that you need to define when you call it with the @include rule. The first is the name of the CSS property, and the second is its value.
Compiled CSS
In the compiled CSS, you will see that Sass has added all the necessary vendor prefixes to the transform property, used in the example.
2. VERTICAL CENTERING
Vertical alignment with CSS is hard, as it doesn’t have a property that explicitly lets you vertically align elements. The following mixin contains all the CSS declarations you need to vertically position any HTML element you want:
Example of Usage
As this mixin doesn’t take any argument, it’s pretty easy to call it. You simply need to add it to the @include rule. Don’t forget to add the parentheses after the name of the mixin.
Compiled CSS
The Sass compiler simply adds the CSS declaration to the selector you want to position vertically.
3. FONT-FACE RULE
It’s kind of annoying to add a separate @font-face rule to every custom font you want to use, especially since you need to support so many formats. With this following font-face mixin, you can make that tedious task much faster. Make sure that you use the right file path within the url() function.
Example of Usage
The font-face mixin has two arguments, the name of the font and the file name that will be part of the URL. You need to use the same file name with every font format (.eot, .woff, .ttf, etc.)
Compiled CSS
The compiled CSS is very elegant as you can see. The Sass compiler has concatenated the URL paths and returned the proper @font-face rule.
4. KEYFRAME ANIMATIONS
You can create beautiful animations with CSS using the @keyframes rule. Mastering animations is not easy by any means. Even if you are a pro, the syntax can be still hard to remember. The following keyframes mixin makes use of the @content directive that allows you to pass a bunch of CSS rules to the mixin.
Example of Usage
The keyframes mixin takes one argument, the name of the animation. As the mixin uses the @content directive, you need to add the rules related to animation within the @include block.
Compiled CSS
The Sass compiler returns all the @keyframe declarations you need in order to run your animation smoothly in every browser.
5. RETINA-READY IMAGES
Here is a great Sass mixin for supporting retina-ready images you can serve to Apple devices with a Retina Display. To use this mixin, you need to provide two versions of the same image, one in single size (1x) and one in double size (2x). You can use this mixin to provide a retina-ready background image for any HTML element.
Example of Usage
You need to specify three arguments for this mixin: the file path to the retina image (2x) and its width and height.
Compiled CSS
In the compiled CSS, you will find the proper media queries for Retina Display with all the necessary declarations.
6. ABSOLUTE POSITIONING
Although it’s not particularly hard to absolutely position an element with CSS, you can save a lot of time with this mixin. It allows you to quickly specify values for the four directions: top, right, bottom, and left.
Example of Usage
To use the absolute positioning mixin, you simply need to add the values for the four directions. Don’t forget to pay attention to the order of the arguments. They follow each other in clockwise direction.
Compiled CSS
The compiled CSS is pretty straightforward; it’s just a simple rule set for absolute positioning.
7. ARROW WITH FOUR OPTIONAL DIRECTIONS
Even if an arrow is not the most spectacular part of a web page, we frequently need to use it. And, it’s not that easy to create it with CSS, as you need to use a certain technique that can be hard to remember. This mixin helps you quickly create an arrow with CSS. You can choose from four directions (up, down, left, right) and set the size and color of the arrow.
Example of Usage
The arrow mixin takes three arguments: the direction, size, and color of the arrow. However, as the mixin also comes with defaults for the arguments (down, 5px, #555), you can also use it without specifying custom arguments.
Compiled CSS
Below, you can see how the compiled CSS looks like in both cases.
8. MEDIA QUERIES FOR MOBILE-FIRST DESIGN
You can find several Sass mixins for media queries all over the web. However, this mixin allows you to use media queries that support mobile-first design. In mobile-first design, we design for the smallest screen at first, then define styles for larger screens wherever it’s necessary. You can use the following mixin with three breakpoints: tablet, desktop, and large. There’s no breakpoint for mobile because that’s the size you design for by default.
Example of Usage
Here, you only need to define one argument, the breakpoint you want to use. You can choose from tablet, desktop, and large. This mixin uses the @content directive, so you need to add the related CSS rules separately, within the @include rule.
Compiled CSS
As you can see below, the Sass-compiler has generated the proper media query for the screen size you want to apply these specific rules for.
9. FIXED ASPECT RATIO
If you want a consistent look across different screen sizes you will find this aspect ratio mixin useful. It maintains the aspect ratio at any screen size. To use this mixin, you need two HTML elements: an outer and an inner one. The mixin calculates the aspect ratio of the two elements and maintains that at any resolution.
Example of Usage
You need two HTML elements to make the aspect ratio mixin work. Both need to be either a block or an inline-block element.
In the SCSS, you need to define the aspect ratio within the arguments of the mixin and add the mixin to the outer element.
Compiled CSS
The Sass-compiler calculates the aspect ratio and applies it to the padding-top rule.
10. TEXT SHORTENING
Our last mixin is quite simple to use but it can come in handy if you work a lot with text. It performs truncation on any text that overflows its containing element and adds an ellipsis (…) to the end.
Example of Usage
This mixin doesn’t take any argument, so you can add it to any element without much thinking.
Compiled CSS
The compiled CSS simply applies the specified rule set to the HTML element you’ve added the mixin to.
NEXT STEPS
Sass mixins can automate and facilitate a lot of tasks that would be much harder to do in regular CSS.
Post a Comment