CSS / SASS / THEMING THURSDAYS

Functions in CSS? No.. in SASS? Yes!

Functions and Mixins

Functions and Mixins

In CSS there’s absolutely no way to include functions as of today. It’s all just as is. In SASS you can create functions as well as mixins, more on what that is later. They are two ways that SASS allows you to keep your code DRY (because nobody likes repeating themselves.)

Functions are an easy way to produce some output through a few input parameters. Like computing a sum or percentage or something else.

If you don’t already know, you can create variables in SASS. the notation is similar to PHP where you just add a ‘$’ as a prefix to variable names.

Now for the fun part.


Functions

In SASS you can create functions like so:

@function cube-me-then-add($cubeme, $add) {
$result = $cube * $cube *cube;
return $result + $add;
}

To use it in your styles:

#mydiv {
padding-top: cube-me-then-add(2px, 5px);
}

This results in:

#mydiv {
padding-top: 12px;
}

If you’ll notice, if you add pixel values, with ‘px’, it produces a result with ‘px’ as well.


Mixins

Mixins are similar to functions in the way that it’s another way to write DRY code. The difference is that functions allow you to calculate something and return a single result. Mixins on the other hand allow you to include a chunk of code. It also allows you to pass variables into it so you can flex a bit more.

It’s really handy for those pieces of CSS code where you have browser specific rules.

Let me demonstrate:

@mixin my-fancy-button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
padding: 10px;
background-color: red;
}

To use it:

.fancy-buttons {
@include my-fancy-button;
}

This results in:

.fancy-buttons {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
padding: 10px;
background-color: red;
}

Neat isn’t it? Let’s stretch that a bit more.

Stretch

@mixin my-fancier-button( $radius, $padding, $color ) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
padding: $padding;
background-color: $color;
}

Now this piece of code allows you to create a larger variety of buttons. You can adjust the radius, padding and the background color.

Let’s try using it:

.fancier-buttons {
@include my-fancier-button( 10px, 5px, red );
}

.fancier-blue-buttons {
@include my-fancier-button( 0, 10px, blue);
}

The result?

.fancier-buttons {
@include my-fancier-button( 10px, 5px, red );
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
padding: 5px
background-color: red;
}

.fancier-blue-buttons {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
padding: 10px
background-color: blue;
}

Awesome, right? Now go forth and be fancy.

References:

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