the clojure cookbook
AppleScript window title
malnutrition jokes
“Search Term Haiku” is a series wherein I examine this site’s log files and construct one or more haiku poems from search terms and phrases that led visitors to the site. Where possible, I attempt to keep the search phrases intact. However, as these are haiku poems, I do need to follow the rules.
CSS. Verbose, repetitive, rife with bizarre quirks.
Can’t say that I’m a fan. On the web, you’re using it out of necessity. Even the CSS masters out there must admit, there has got to be something better.
Fortunately, there’s Sass. A super-set of CSS, it helps to eliminate some of CSS’s most obnoxious aspects during the development lifecycle. By way of example, my ten favorite parts about Sass:
#container .post code,
#container .post tt,
#container .post pre {
font-family: Consolas, Courier, monospace;
}
Well, Sass will lets you do that like this:
#container .post {
code, tt, pre {
font-family: Consolas, Courier, monospace;
}
}
.styledText {
font-family: Georgia, Times, serif;
font-style: oblique;
}
In Sass you can do this:
.styledText {
font: {
family: Georgia, Times, serif;
style: oblique;
}
}
More lines perhaps, but it feels less verbose. And more manageable.
@import rule, and while Sass @import results in an extra http request for the imported stylesheet, Sass will auto-concatenate the files—getting the request down to one. (And as a side-benefit, reducing your CSS build/deploy phases down to just calling Sass on your scss file(s).)
/* CSS: */
@import url("_reset.css");
/* Sass: */
@import "reset";
$theme_accent: #771100;
$theme_bg: #222222;
#container {
h1, h2, h3 { color: $theme_accent; }
.post {
border: {
$accent_border: 1px $theme_accent;
$dark_border: 1px $theme_bg;
top: $accent_border;
left: $accent_border;
bottom: $dark_border;
right: $dark_border;
}
}
}
Need I go on?
// need I go on?
@mixin rounded-top {
$side: top;
$radius: 10px;
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded-top; }
#footer { @include rounded-top; }
And did I mention that you can set up your mixins to take arguments?
border as boarder or failed to close a curly bracket or some such thing. Your IDE might be warning you. But Sass goes a step further and puts the error message right into your page—right there at the top where you can’t ignore it. (It’s also a useful error message.)CSS needs to allow me to write: * { saturation:+15%; }
And of course, Sass has almost exactly this:
$my_color: #77110;
.post-title { color: saturate($my_color, 15%); }
…and a whole bunch of other color functions. Among other functions.
article {
$base_font_size: 12px;
$base_line_height: $base_font_size * 1.5;
font-size: $base_font_size;
line-height: $base_line_height;
/* simple math */
h1 { font-size: $base_font_size * ($base_line_height + 1em); }
h2 { font-size: $base_font_size + 4px; }
}
/* some looping with conditional logic */
@for $i from 1 through 10 {
#flickr_badge_image#{$i} {
@if $i % 2 == 0 {
color: 3993FF;
} @else {
color: #ff1c92;
}
}
}
All this amazing power… and I have just been casually exploring Sass over the past couple days. This project is a treasure trove and I hope that it is here to stay. My hat is off to the folks working on Sass. Marvelous work.
In preparation for an up-coming post[1], I did a bit of extra legwork on syntax highlighting plugins for WordPress and wound up switching from Google Syntax Highlighter for WordPress (GSHW)[2] to SyntaxHighlighterPro. Both of them are backed by Alex Gorbatchev’s Syntax Highlighter library. But more on that in a moment.
What prompted the switch was the fact that I noticed that GSHW was mangling some CSS syntax highlighting operations. The regex used to grab hex colors was getting greedy and highlighting #id-selectors as if they were colors[3]. After a little digging, I came to discover that GSHW was using a quite-out-of-date version of Gorbatchev’s library.
Exploring the Syntax Highlighter site a bit, I found a couple of other plugins that appeared to be more up-to-date. I gave a crack at SyntaxHighlighter Evolved and the above mentioned SyntaxHighlighterPro. Both had more recent versions[4] of the library baked in. Both seemed a step up in that regard, but I went with -Pro because it was going to require the fewest tweaks and changes[5] in the code samples already posted[6] and also because its control panel offered the ability to toggle specific syntaxes at will.
That said, the “Evolved” plugin has a nice suite of options.
This is likely just a temporary stop-gap measure, however. I may pull the plug on the plugins and just drop in Gorbatchev’s script directly—the latest version appears to offer on-demand loading of the “brush” scripts. Combine that with a minified version of the script and that may prove a better overall solution than the plugins can offer.
Nevertheless, the problem remains that the CSS highlighter “brush” script needs some work. It doesn’t really seem to recognize common selectors (#id and .class selectors, I’m looking at you)… and this bugs me.
But until then…
#container. [↩]<pre> formatted blocks whereas Evolved was going to require changing all those to use BBCode-style [bracket] syntax. Ick. [↩]The real answer is JavaScript IS object oriented already, without any “help” from libraries. It seems that most developers simply don’t get it, and cannot get past the concept of traditional “Classes”. Javascript is a prototypal, object oriented, instance based programming language.
Saturdays are for playing.
Blockbuster has lost a total of $1.1 billion since the beginning of 2008 and has been severely hamstrung in efforts to grow its business due to interest payments on $920 million in debt.
Heh. Maybe they shouldn't have been so soft on late fees?
…don’t try and hide a wrapper behind HTML5 bling by using a section, that’s wrong.
Retiring old favorites.
Climbing feels like playing Tetris with my body.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
