When I was working on the FC2013 site, I got introduced to LESS. And it has really transformed my workflow for writing CSS, especially when using new CSS3 features that have a ton of different vendor prefixes.
Check it out: here’s the LESS for the top menu on the new version of my site.
/*
* header menu
*/
#menu-main {
position:relative;
left:-3em;
margin:0px 0 20px;
width:100%;
padding:0 3em;
text-align:center;
font-size:8px;
letter-spacing:0.5em;
background:desaturate(@redaccent,20%);
color:@darkgrey;
height:53px;
overflow:hidden;
line-height:100%;
.transition(0.3s);
&:hover {
height:158px;
background:@redaccent;
}
a {
color:@offwhite;
&:hover {
color:@offwhite;
text-decoration:none;
}
&[href]{
color:inherit;
display:block;
&:visited {
color:mix(@darkgrey,@redaccent, 60%);
}
&:hover {
color:@paleblue;
}
}
}
.current-menu-item a {
color:@offwhite !important;
&:hover {
color:@offwhite !important;
cursor:text;
}
}
&>li {
display:inline-block;
vertical-align:top;
width:20%;
margin:0 1em 10px;
text-align:left;
&:first-child {
display:block;
width:100%;
line-height:30px;
position:relative;
text-align:center;
a {
display:block;
letter-spacing:1em;
font-size:10px;
overflow:hidden;
margin:0 auto;
i {
position:relative;
top:9px;
font-family:"EUDingbats";
font-size:40px;
font-style:normal;
}
}
}
ul {
margin:3px 0 0 0;
border-top:1px solid @darkgrey;
a {
padding:0.5em 0;
}
}
}
}That’s still a ton of stuff, don’t get me wrong – but it’s got a LOT less mental overhead to write. I get to say things like “color:mix(@darkgrey,@redaccent, 60%);” instead of jumping over to Illustrator to futz with some color sliders, and copy the results into a raw hex code. I get to have a nice embedded structure for my CSS that mirrors the structure of my HTML quite neatly. I even get to say “.transition (0.3s)” instead of “-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;”.
Developing the CSS for this site went a lot faster than I was expecting, due to me using LESS. If you do any kind of CSS, I strongly recommend checking out LESS. Or SASS, which does much the same sort of thing.
I also use less.app to abstract out compiling things; I just launch that app and tell it to watch my .less files, and every time I change it, the .css is magically regenerated.