Managing Colour Variables
@jordanlewiz
button{
background-color: #FF0000;
}
a {
color: #FF0000;
}
$red: #FF0000;
button{
background-color: $red;
}
a {
color: $red;
}
// config.scss
$red: #FF0000;
// config.scss
$red: #FF0000;
$red-dark: #A00202;
$blue: #0000FF;
$blue-a-tad-darker: #0000CE;
$royalBlue: lighten($blue, 5%);
$link-color: #00FFCC;Expectation
Reality
Pitfalls
Inconsistent use of
colours and variables
a{ color: #ff0000; }
b{ color: red; }
i{ color: $red-dark; }
li{ color: darken($red, 20%); }
Restrictive & inconsistent
naming conventions
$red6: #BB0000;
$red-border: #BB0000;
$red-a-bit-dark: #BB0000;
$dropdown-hover: #BB0000;Too many similar colours
$grey-somewhat-light: #9e9e9e
$grey-lightish: #aaa
$grey-light: #bbb
$grey-barely-lighter: #cbcbcb
$grey-slightly-lighter: #c5c5c5
$grey-a-bit-lighter: #d2d1d0
$grey-lighter: #d4d4d4
$grey-lots-lighter: #ddd
$grey-very-light: #e0e0e0
$grey-very-veryish-light: #e3e3e3
$grey-very-very-light: #e5e5e5
$grey-super-light: #eee
$grey-mega-light: #f4f4f4
$grey-ultra-light: #f5f5f5Unwelcome colours
// Bad
color: darken($red, 20%);
// Good
color: $red-dark;
Types of variables
// Descriptive
$blue: #0000FF;
// Functional
$link-colour: $blue;
Descriptive Variables
are your colour constants which make up the colour palette.
They should describe a colour and be named in a way that is easy to remember and visualise.
Descriptive Variables:
// Good
$red: #FF0000;
// Bad
$fruit-salad: #54A056;
Descriptive Variables:
// Brand colours
$envato-green: #82b541;
// Functions
$blue-light: lighten($blue, 10%);
// HSL or RGB
$blue-dark: hsl(209,100%,32%);
// RGBA?
$white-transparent-rgba: rgba(255,255,255,0.7)
Descriptive Variables:
Colour Names
// Good
$grey-charcoal: #444;
// Not so good
$deep-cerulean: #0077b3;
// The worst
$macaroni-and-cheese: #FFB97B;// Greys
$mine-shaft: #222;
$emperor: #555;
$boulder: #777;
$dusty-gray: #999;
$silver: #BBB;
$alto: #DDD;
$gallery: #EEE;
Descriptive Variables:
Colour Description
$grey-extra-dark: #222;
$grey-dark: #555;
$grey-mid-dark: #777;
$grey: #999;
$grey-mid-light: #bbb;
$grey-light: #ddd;
$grey-extra-light: #eee;
http://colorhexa.com
Descriptive Variables:
Scale
$red1: #FF0000;
$red2: #EE0000;
$red3: #CD0000;
$red4: #8B0000;
Descriptive Variables:
Sass Maps
color: palette(purple, light);
// config.sass
$palettes: (
purple: (
base: rgb(42,40,80),
light: rgb(51,46,140),
dark: rgb(40,38,65)
)
);
@function palette($palette, $tone: 'base') {
@return map-get(map-get($palettes, $palette), $tone);
}Functional Variables
are colour agnostic and accordingly they should be named to describe a colour’s function rather than the colour itself.
Functional Variables:
$link-color: $blue-light;
$brand-color: $envato-green;
$pagination-active-color: $red;
Functional Variables:
Limited Use
- Limit to a select set of global descriptive variables
- Reduces another layer of abstraction
Functional Variables:
Colour Command Center
// bootstrap/_variables.scss
$pagination-color: $link-color !default;
$pagination-bg: #fff !default;
$pagination-border: #ddd !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-lighter !default;
$pagination-hover-border: #ddd !default;
$pagination-active-color: #fff !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-border: $brand-primary !default;
Functional Variables:
Per Module
// _rating.scss
$rating-background: $white;
$rating-color: $dark-grey;
$rating-star-color: $yellow;
.rating{
background: $rating-background;
color: $rating-color;
}
.rating__star{
color: $rating-star-color;
// etc
}
Successfully managing colour variables requires
a well defined
colour pallet and enforcing a strict set of rules on how colours, variables and functions are used.
Thanks!
Questions?
Managing Colour Variables
By Jordan Lewis
Managing Colour Variables
Sass colour variables and functions can be very powerful tools in your CSS arsenal, but if they are not managed correctly they can easily lose their charm.
