Sass Mixins to Kickstart Your Project

Mixins are great, aren’t they? They are like functions that output CSS. According to the Sass docs:

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins.

Mixins are really convenient, especially when working on a large project. How many times have you had to define width and height values in your last project? How many times have you Googled how to do a triangle in CSS? Or haven’t you ever wished there was a shorthand for top, right, bottom, left when using CSS positioning?

You can solve all those problems with mixins. Even better: you won’t have to write them since I’ve already done that for you. Here we go guys, a couple of Sass mixins to kickstart your projects!

Sizing

I bet you already know this one. I use it as a mixin 101 in all my projects: a size() mixin defining both the width and the height. First argument is the width, second one is the height. If height is omitted, it falls back to the width value.

@mixin size($width, $height: $width) {
      width: $width;
      height: $height;
}

Simple enough.

Example Usage

Sass:

.element {
  @include size(100%);
}

.other-element {
  @include size(100%, 1px);
}

CSS output:

.element {
  width: 100%;
  height: 100%;
}

.other-element {
  width: 100%;
  height: 1px;
}

Positioning

If there is one shorthand I really think CSS misses, it’s a shortcut for offsets: top, right, bottom and left. We have shorthands for everything: padding, margin, background, even text-decoration! But we still don’t have one for offsets… So I built my own.

Continue reading %Sass Mixins to Kickstart Your Project%

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s