I'm sure that as a seasoned developer, you will be used to working with functions and operators in code…what if I said you could do the same with CSS? Yes, you heard correctly – with CSS. Well, you can; the power of SASS means that you could potentially create a whole color theme for something like WordPress, from one base color. Let's take a look how, as part of our next recipe.
All we need for this recipe is our text editor. For the purposes of this recipe, I will assume that you are using Sublime Text 2. If you don't use Sublime Text 2, then you will need to have an instance of SASS' watch command running in the background, to compile code.
Let's begin by opening Sublime Text 2, and adding the following code snippet to a copy of the template we created at the start of this book. Save it as
sassfunctions.html:<body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> </body>
You'll also need to add the following code snippet in, this will incorporate our compiled styles:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="sassfunctions.css" type="text/css" > </head>
We now need to add in our styles. Go ahead and create a new SCSS document, then add the following styles, starting with our
firefox-messagemixin, and base variables:@mixin firefox-message($selector, $message) { #{$selector}:before { content: $message; } } $firefox-greeting: "Hi Firefox users! This is a...."; $mainColour: #631; $h1Size: 4em; $removemargin: -20px;Let's now add in each of the
Hstyles, from 1 to 5:h1 { @include firefox-message("&", "Hi Firefox users! This is a...."); font-size: $h1Size; color: transparentize($mainColour, 0.3); } h2 { @include firefox-message("&", $firefox-greeting); color: lighten($mainColour, 5%); margin-top: $removemargin; font-size: $h1Size * .8; } h3 { @include firefox-message("&", $firefox-greeting); color: lighten($mainColour, 10%); margin-top: $removemargin; font-size: $h1Size * .6; } h4 { @include firefox-message("&", $firefox-greeting); color: lighten($mainColour, 15%); margin-top: $removemargin; font-size: $h1Size * .4; } h5 { @include firefox-message("&", $firefox-greeting); color: lighten($mainColour, 20%); margin-top: $removemargin; font-size: $h1Size * .2; }If all is well, you should see something similar to the following screenshot, when saving and previewing your work in a browser:
In this recipe, we've used three pieces of functionality from the library – color functions, string interpolation, and operators.
String interpolation is a simple but very powerful function in SASS. It allows you to use placeholders within your code, so that when a string is passed through to a function, SASS will replace that placeholder with the desired value as part of compiling the code.
Operators work in a similar way to other languages – here, we've used them to work out the font-size value that should be used for each style. For example, based on an H1 style set at 4em, an H3 font size will work out as 0.6 x 4em, or 2.4em.
The lighten and transparentize functions are part of SASS' library of functions for working with color. The former will lighten a given color by the specified amount, and the latter will make a color more transparent by the amount given. A key thing to note is that SASS will normally leave color formatting alone; the exception to this is when using HSL colors, which are automatically output as hex values and HSLa values are shown as RGBa equivalents. You may therefore find RGBa values appearing in your code, in a similar fashion to what we've used for the H1 style rule in this exercise:
color: rgba(102, 51, 17, 0.7);
font-size: 4em; }
h1:before { content: "Hi Firefox users! This is a...."; }It won't make any difference to the outcome, although some people find it easier to use, as it is not always easy to tell what a hex color value is!
This is a really powerful part of SASS, which, if used correctly can significantly reduce the amount of values that you have to work out, such as colors for a theme. It does require you to take care over how you do – to misquote a well-known phrase, "measure twice, and drill a hole once", or in this case, "calculate twice, and then write once…" – you get the idea…
To show you how important it is to take care with this part of the library, a perfect example arose when writing this demo; I used this rule to create my H1 style:
h1 { @include firefox-message("&", $firefox-greeting);
color: transparentize($mainColour, 0.3);
font-size: $h1Size;
}This pulled in the firefox-message mixin, we will learn more about these later:
@mixin firefox-message($selector, $message) {
#{$selector}:before { content: $message; }
}This compiled to the following code, notice the deliberate error?
h1 { color: rgba(102, 51, 17, 0.7); font-size: 4em; }
h1 h1:before {
content: "Hi Firefox users! This is a...."; }In case you didn't spot it, you can't use a double H1 attribute when referencing the content rule. To fix this, you need to pass an ampersand instead of the H1 attribute:
h1 {
@include firefox-message("&", $firefox-greeting);
color: transparentize($mainColour, 0.3);
font-size: $h1Size;
}SASS understands that the whole rule will automatically apply to each style. The & sign tells SASS to use each selector that is passed and to assign the :before pseudo-selector when creating the rule for displaying the text.
