Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Sass & Color-Variablen - So geht's
If you write CSS and you’re not using SASS & Compass yet, you should stop whatever you’re doing and go download Codekit right now. Do it, you’ll thank me later.
But if you’re already familiar with the awesomeness that is SASS, I’d like to share a small tip about handling color variables.
The CSS Way
First of all, just so we’re all on the same page, here’s how you’d use colors in plain old dumb CSS:
$darkgrey: #333333;
$lightblue: #001eff;
$lightred: #ff0000; // set your new color…
$text_color: $darkgrey;
$link_color: $lightred; // …and use it here
$border_color: $lightblue;
.myClass{
color: $text_color;
border-color: $border_color;
}
a{
color: $link_color;
}
Want to make links red instead of blue, but without affecting the color of the borders? Not a problem!
// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
.myClass{
color: $text_color;
border-color: $border_color;
}
a{
color: $link_color;
}
See the problem? Not only does it look weird, but what happens when I want to change the color of borders, but not links? I’ll have to manually edit my code once again, which is the problem we were trying to solve in the first place…
The Solution
The solution is actually pretty simple once you understand the problem. We’ll use a two-tier system, with both functional and descriptive variable names. Here’s what I mean:
$text_color: #333333;
$link_color: #001eff;
.myClass{
color: $text_color;
border-color: $link_color; // insanity!
}
a{
color: $link_color;
}
Now we can change our link color without introducing any ambiguities in our code. Mission accomplished!
It Gets Tricky
But wait, what if I want to add a border, and to make sure my design stays harmonious I decide to make that border the same color as my links?
$text_color: #333333;
$link_color: #001eff;
.myClass{
color: $text_color;
}
a{
color: $link_color;
}
Our “$blue” color is now actually red! Nothing makes sense anymore!
Functional Variable Names
Thankfully there’s a simple solution: instead of using variable names that describe the color, we’ll use names that describe the color’s function.
$darkgrey: #333333;
$lightblue: #ff0000; // not actually blue!
.myClass{
color: $darkgrey;
}
a{
color: $lightblue;
}
This will work great… as long as your links are blue. What happens when you decide to make your links red instead of blue?
// first we set the variables:
$darkgrey: #333333;
$lightblue: #001eff;
// now we can use them in our code:
.myClass{
color: $darkgrey;
}
a{
color: $lightblue;
}
Simple enough. But the problem is that if I want to change a color, I usually have to change it in multiple places.
Variables to the Rescue
SASS lets us define reusable variables, which can be used for any type of value but are especially useful for colors:
.myClass{
color: #333333;
}
a{
color: #001eff;
}
So here you go. This is a simple tip, but I hope you’ll find it useful! And if you have another way of organizing your colors, or some other SASS/Compass tips, please share them in the comments or in the Hacker News thread!
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar