Archive for the ‘Sass/Less/Compass’ Category

Cool Web Developer Tools – Koala and Chrome Remote Preview

Friday, March 22nd, 2013
Cool Web Developer Tools – Koala and Chrome Remote Preview

Don’t like the command line? Fear no more!

I saw a tweet the other day that told of a way to compile Sass, LESS, or CoffeeScript without using the command line. Enter Koala, a cool little app to help you make the jump to preprocessors as painless as possible. Normally I use the command line and type in ‘compass watch’ and forget about it. It really isn’t that difficult, but a lot of people seem to get scared when confronted with it. If all you want to do is compile, I really don’t see a reason why you shouldn’t use Koala. The interface is incredibly easy, with very few buttons or options. The ones it does have, are the ones you would most commonly use. Take a look at the image below and see what I mean.

(more…)

Sass Features Ignored by Beginners

Tuesday, May 22nd, 2012
Sass Features Ignored by Beginners

From Beginner to Intermediate

I consider myself an intermediate level Sass user. I’ve used it enough now to know that I have written some stupid crap in Sass. I’ll take a guess that a lot of others new to Sass have done the same thing because you get excited about the stuff you can do. Like what you ask? Like nested your selectors more than three deep, or creating variables for stupid one word properties even though it would take the same amount of time to write the word out. What? OH FINE! I once created a variable $l: left; Okay? Happy? I don’t know why I did it, but variables in CSS were new to me and I was looking to shorten everything I possible could. Unfortunately it took me just as long to find the ‘$’ symbol as it did to just type the word ‘left’. But with use comes experience, and there are some cool things you can be using, and nothing all that difficult.

(more…)

Compass Gets An App – No Command Line Needed

Friday, April 8th, 2011
Compass Gets An App – No Command Line Needed

Another post on what you think about Compass?

Oh shut up. If it wasn’t as bad ass as it is, I wouldn’t write about it. This isn’t really about Compass though. Well…it is, but more about the app that was built for it, so that users don’t have to use the command line. Honestly, if I can figure out how to at least make Compass compile my Sass through the command line, then anyone can. BUT…this makes the whole process of a hell of a lot easier.

Compass made easier

At first, I thought, the command line really isn’t that hard because you only need to know a few commands, why do I need an app to do this? Then I tried Compass.app by Handlino. After trying it out, there is only one reason why I can see someone not wanting to use this product (which only costs $7 by the way), but I’ll talk about that last.

After you have unzipped the file, and opened the app up, all that happens is that a gray version of the Compass logo appears in your task bar. When you click the icon, you get several things you can do, depending on where you are in your project. If you are starting a new one, you have a bunch of different Compass project options you can install. I went with the HTML5 Boilerplate option, since I love using it. The others are: Blueprint, basic Compass Projects, 960gs, or HTML5 Boilerplate. You can see what I’m talking about in the image below.

Compass.app project creation

(more…)

My Love For SCSS And Sass Grows

Thursday, April 7th, 2011
My Love For SCSS And Sass Grows

As does my stupidity

I’ve been continuing on with my site redesign, which means I continue to use Sass. I’m dead serious with the title of this post, too. Not just Sass, but Compass as well. Sass would be good by itself, but the stuff that Compass puts in, especially it’s CSS3 module. I have used the border-radius and box-shadow includes enough now, that writing them in regular CSS seems an incredible chore.

I only have to write this:

@include border-radius(10px 0px 0px 10px);

To achieve this:

-moz-border-radius:10px 0px 0px 10px;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
-ms-border-radius:10px 0px 0px 10px;
-khtml-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;

You can see why this is awesome. If you can’t, you should stop reading. No, seriously though, how many of you actually write all of those in CSS? I don’t. I write the one for -moz, -webkit, and the last one. Compass is covering ALL of them, so in effect, it is doing more than I originally would have, and I’m writing less. So how did my stupidity grow? Good question.

(more…)

CSS Variables, Mixins and Nesting Might Be Coming

Friday, January 21st, 2011
CSS Variables, Mixins and Nesting Might Be Coming

If you don’t know Sass…you might want to now

I’ve read a couple of posts/articles in the past week that REALLY got me excited again about CSS. A guy over at Google, Tab Atkins, has hinted at it, and then this article by Johan Brook talks about it as well.

What the hell am I talking about you ask? Well by the title of this post you should have figured it out.You know all those articles I’ve posted about my experience with Sass and how much I love it? Or maybe my artilce on LESS.js? There are other articles around the net where people commented their worries and complaints on why they didn’t need or use it. Well guess what…you might want to rethink that and start learning. Variables, mixins and nesting might be coming to CSS itself. If you didn’t read the article I linked to above, Webkit is thinking about it, and it may be here as soon as the end of this year.

(more…)