Posts Tagged ‘sass’

Introduction to Haml For HTML Layouts for Newbs – Part 4: Final thoughts

Wednesday, September 28th, 2011
Introduction to Haml For HTML Layouts for Newbs – Part 4: Final thoughts

Abstraction languages are cool

We need more of them. I only know of a few, but the ones that I do are pretty bad ass. Seems odd that the two I use were created by the same person, but if you have used Haml and Sass then you will see the connection and some of the thinking behind them.

Language abstractions make me think differently about the way I do things. Sass taught me to be a lot tighter in my CSS, and Haml showed me how you can write out an HTML page faster than lighting. In short, because of the these, I have improved as a web developer. For that alone they get my high praise and a check mark in the cool category.
(more…)

Web Development In 2011 Part 2: Are We Getting Dumber?

Thursday, April 28th, 2011
Web Development In 2011 Part 2: Are We Getting Dumber?

Still more no charge awesomeness

Before I start my small discussion on “Are We Getting Dumber”, let me just say that there is yet even more kick ass things that have come out since I wrote the first part of this little series. Sass 3.1.0 came out, and is going by the name of Brainy Betty. It added some neat stuff to its already great ability, like getting the inverse of a color, Sass based functions, keyword arguments, and more. Granted I probably won’t use a lot of it, but it is still cool that it has been updated. You can read about the improvements it received on Sass’ changelog. Just to note as well, Haml and Sass have been separated into two different gems, so you can install them independently now.

Compass received an update as well, going to version 0.11.1. Some things have changed in this new version which might force you to go back and rewrite some things if you update, but I’ll let you know about that when I upgrade this week. I read the change log and a couple of things stand out. First, is that the linear and radial gradient mixins have been deprecated. We’ll use the background-image mixin instead, and pass it a gradient function. Here is an example of the old way (from my site):

#myDiv {
@include linear-gradient(color-stops($orange, darken($orange, 25%)), left); 
}

And what it will look like now:

#myDiv {
@include background-image(linear-gradient(left, $orange, darken($orange, 25%))); }
}

(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…)