10 SASS (SCSS) mixins you will use every day

SASS is claimed to be “the most mature, stable, and powerful professional grade CSS extension language in the world” (Sass 2018). With SASS (a CSS preprocessor) you can take advantage of features missing from CSS like variables, nested selectors, partials, operators and of course mixins. This article is a collection of mixins. If you are new to SASS, head over to sass-lang.com to learn about the language and how to set it up on your project. Mixins let you group common patterns of CSS into chunks for you to reuse throughout your project. One of the most common use cases is for vendor prefixes. These can be tedious to write and a good example is the linear-gradient, where you may want up to 5 prefixes to maximise browser compatibility.

1. Linear-Gradient SCSS Mixin

As discussed above, the Linear-Gradient SCSS Mixin makes it quick and easy to create background gradients with vendor prefixes for maximum browser support.

2. Vertically Center SCSS Mixin

Vertically aligning elements is made simple with this mixin. With just one line of SCSS you can vertically and horizontally align or just vertically align, it has support both.

3. Input Placeholder SCSS Mixin

Change the colour of the placeholder attribute with this Input Placeholder SCSS Mixin. Add a background colour or just change the text colour, it has support for both.

4. Border SCSS Mixin

The shorthand property for border is neat and tidy, however with this Border SCSS Mixin, you can just as easily add a border to one side or three sides.

5. CSS Transition SCSS Mixin

Add CSS transitions to your elements with this Transition SCSS Mixin. Easily animate properties like color, width and padding to create fade and scale effects.

6. Border-radius SCSS Mixin

Use this Border-radius SCSS Mixin to add a border-radius with vendor prefixes for all common browsers. With just one line of SCSS quickly add a border-radius using a single value, or four values for a unique radius at each corner.

7. Opacity SCSS Mixin

Simple but effective, the Opacity SCSS Mixin will apply vendor prefixes for improved browser support.

8. Text-shadow SCSS Mixin

The Text-shadow SCSS Mixin can be used to easily add a basic shadow behind your text, or to create a unique effect (like emboss) by adding a second shadow.

9. Transform Rotate SCSS Mixin

Rotate elements with ease using the Transform Rotate SCSS Mixin. With just one line of SCSS your rotated elements will have the required vendor prefixes for supporting all common browsers.

10. TinyMCE Image SCSS Mixin

Ths mixin is great for managing image position, margins and text runaround when working with WYSWIYG HTML editors, like TinyMCE, found in common content management systems. The TinyMCE Image SCSS Mixin is intended to be a starting point for you to adjust to suit your project's needs.

Add Your Comment

No one has commented on this page yet.

Subscribe to our mailing list to receive exclusive offers, free resources and more!