Mixins – we've used a few of these in some of the exercises so far in this book, but, what are they and how do they work?
Mixins are probably the single most useful part of SASS. They allow you to build partial blocks of code, which you can literally mix-in (hence the name) as part of larger style sheets. The key benefit of using them is that they can help remove duplication of code, in much the same way as functions work. I will show you how they work in the next exercise, as part of styling the ubiquitous button.
All we'll need in this recipe is our trusty text editor. If you are using Sublime Text 2 (which I hope you are), you can use the SASS compiler that we hooked in from earlier in the book.
Let's make a start by creating a new HTML document, adding the code template from the start of this book, and saving it as
creatingmixins.html. You will need to update the CSS stylesheet link thus:<link rel="stylesheet" type="text/css" href="creatingmixins.css">
Add the following in between the
<body>tags:<body> <a href="#" class="buttonclass">my button</a> </body>We now need to add some styles, so create a new SCSS document, and save it as
creatingmixins.scss. Add the following code, beginning with the three mixins:@mixin gradient($from, $to) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, $from), color-stop(1, $to)); background: -moz-linear-gradient(center top, $from 5%, $to 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'); } @mixin rounded-corners($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } @mixin box-shadow($top, $left, $blur, $spread, $color) { -webkit-box-shadow: inset $top $left $blur $spread $color; -moz-box-shadow: inset $top $left $blur $spread $color; box-shadow: inset $top $left $blur $spread $color; }Next comes the main style class for the button, so go ahead and add the following to your SCSS file:
.buttonclass { @include gradient(#fe1a00, #ce0100); @include rounded-corners(6px); @include box-shadow(0px, 1px, 0px, 0px, #f29c93); background-color:#fe1a00; border:1px solid #d83526; display:inline-block; color:#ffffff; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #b23e35; }We'll also include styles for hovering and making the button active:
.classname:hover { @include gradient(#ce0100, #fe1a00); background-color:#ce0100; } .classname:active { position:relative; top:1px; }If all is well, you will see the following button when saving and previewing your work in a browser:
Although at first glance it might seem a lot of code to style a button, but a closer look will reveal that most of the code comes from the three mixins that we've included. Mixins are blocks of code that can be imported into a new or existing CSS stylesheet, in much the same way as you might reuse programming code. SASS is clever enough to only compile in those styles that are being used by the HTML code to which they relate.
The key to understanding the previous code is in the @include keyword. When compiling, SASS will bring in the CSS styles from the mixin whenever it sees a mixin placeholder, as shown by the lines highlighted in the following code snippet:
.classname {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
background: -moz-linear-gradient(center top, #fe1a00 5%, #ce0100 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 0px 1px 0px 0px #f29c93;
-moz-box-shadow: inset 0px 1px 0px 0px #f29c93;
box-shadow: inset 0px 1px 0px 0px #f29c93;
background-color: #fe1a00;
border: 1px solid #d83526;
display: inline-block;
color: #ffffff;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 1px 1px 0px #b23e35; }
.classname:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
background: -moz-linear-gradient(center top, #ce0100 5%, #fe1a00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color: #ce0100; }
.classname:active {
position: relative;
top: 1px; }"This is all good, but how is it going to be useful to me…?"… I hear you ask. The answer to that question is simple – in the three mixins you have the beginnings of a code library that can be reused within your projects as many times as you need, and that you can build up over time. SASS will only ever import styles that are referenced within the HTML, so there is no danger of code bloat. You can also separate your SCSS code into several documents; SCSS will import each and create one master document as part of compiling the code, thereby reducing the number of requests made to the server.
Taking the code we've used here further, you could include functions within the mixin (as we've covered in this book), to work out the right shades of color to use – all with the use of parameters as part of calling in the mixins. This should mean you only need to pass in one color.
Ah-ha! Perfect timing – it just so happens that the next exercise is about functions. Although we're going to play with some text, the same principles could easily apply to styling objects such as buttons. Let's take a look and see how functions work in SASS.
Tip
If you would like to see an example of what could be achieved with styling buttons using SASS, then take a look at http://jaredhardy.com/sassy-buttons/, there are some good examples there!
