Theming With Sass And Compass CodePen

Wrote up a little CodePen to demo how Sass and Compass can help with theming.

This code is useful if you're writing a theme and want to easily change colours.

The problem, your design calls for multiple colour values. So in CSS you'd have to declare each of these values, for example.

1
2
3
4
5
6
7
8
9
10
11
12

body {
  background: #003;
}

p {
  colour: blue;
}

a {
  background-image: linear-gradient(#3333ff, #0000cc);
  box-shadow: #3333ff 0 0 0.4em;
}

Now, what if you want to create another theme that's red? That means, working out and changing all the colour values. Enter Sass.

Using variables such as:

1
2
3
4
5
6

$base: red;

$base-light: lighten( $base, 10% );
$base-lighter: lighten( $base, 40% );
$base-dark: darken( $base, 10% );
$base-darker: darken( $base, 40% );

Then calling them in your Sass file, you now only have to change one value to change all the values throughout the entire document.

Taking things a step further, you can also make use of Compass to handle all those vendor prefixes.

1
2
3

@include background-image(linear-gradient($base-light, $base-dark));
@include box-shadow($base-light 0 0 1em);
@include text-shadow(rgba($base-lighter, 1) 0 0 2em);

Video

CodePen

https://codepen.io/simonowendesign/pen/wHLDc