Posts Tagged ‘sass’

Sass Rocks! Over Complicating Your CSS Doesn’t

Tuesday, October 19th, 2010
Sass Rocks! Over Complicating Your CSS Doesn’t

Unless you are careful of course

So I’m in the middle of redesigning/rebuilding my main site, as you would know if you are keeping up with me here, and I am using Sass (SCSS syntax). I love it so far. There is a lot you can do to save you time during the build. There is also the “This new crap I’m using is awesome! I’m going to do this and this and this…”, which can get you in trouble. What kind of trouble you ask? The kind that over complicates your CSS of course. Stop talking and read please! Jeez, I’ll tell you how you can easily do that.

Think before you leap

A day after starting my build using this awesome technology, and no it isn’t new, but it is still fairly new to me. Syntactically Awesome Stylesheets has some cool features that you immediately want to dive into. Variables are the easiest, and it is kind of hard to abuse those. Mixins though, that is where I got into trouble. A good example, which you might have seen in my last post is a mixin I was using for ‘font’. Seemed like a great idea at the time! Let’s shorten that CSS so that I only have to type in the properties that will feed the mixin. What could be wrong with that? Well, technically nothing, but it also wasn’t helping me and I was just adding to the confusion with a completely stupid mixin (at least in this case). Here is what I am talking about:

(more…)

Using Sass(SCSS) On My Website Redesign

Thursday, October 14th, 2010
Using Sass(SCSS) On My Website Redesign

Out with 960gs, in with Sass

Note: I have included at the bottom of this article, the actual Sass/CSS I have written for my redesign. When I am completely finished with the build, I will post the whole thing for you to view. If you see anything I am doing wrong, poorly, or stupid, PLEASE inform me. I am learning too!
If you read my post yesterday, you will know that I will not be using the 960gs on my main site redesign. Not because it is bad, but because it isn’t going to fit with the project. What I WILL be using though, is Sass. I’ve done a couple of articles already on it, which you can read below if you wish:

My goal in using Sass for my redesign is to 1) get more familiar with it and learn the syntax better, and 2) well, to say that I did. Always good to learn, and if anyone happened to care, I can always stick it in the resume. One thing I have noticed is that there is no really good reference to using it. An e-book would be great, as it doesn’t need to be very long. Hell I would even settle for an article that posts the Sass styles for a complete site that uses all the CSS3 styles.

Take a look at what I have built so far:

View Demo

(more…)

WordPress Custom Fields, plus Compass/Sass tip: CSS inline images

Thursday, July 22nd, 2010
WordPress Custom Fields, plus Compass/Sass tip: CSS inline images

Set out to learn something…and I did. Now its your turn

I wanted to create images that I could use for each post showing that it belonged to a certain type of category. You look at the image, and without reading the title, you would say “Oh, this post relates to WordPress.” Same with jQuery, Blogging in general, or whatever category I come up with. Something my readers would come to recognize over time. I also wanted to be able to do it without having to stick it in manually in the post like I do with the other images I stick in articles. If you are on the home page you will already see this. That is the one I came up with for articles relating to WordPress.

Now, I can’t take credit for what I am about to show you. I learned how to do this fromJustin Tadlock’s blog, but I wanted to spread the love. This was the best tutorial I found on the subject.

Just 10 Easy Steps!

Here is my quick and dirty paraphrasing of it. Meaning, do EXACTLY AS IT SAYS BELOW.

(more…)

Taking LESS.js for a spin, and how does it compare to Sass 3

Wednesday, July 7th, 2010

What the hell is LESS?

LESS logoIf you have kept up with me, then hopefully you read my post on Sass 3. If not, well hopefully you are not out of the loop and have at least heard of it. This post is about LESS and LESS.js (which you can read about here). LESS used to be a Ruby Gem install, not sure what that means exactly other than it is a pain the ass to install if you are not familiar with the command line.

There is a brilliant new way to actually use LESS, and that is to simply use javascript. Nothing to install, just include this line:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

You will also need a link to a LESS file, which will look something like this:

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

A simple text file with a .less extension.

So what exactly is LESS? I would define it as a simplified and easier to use version of Sass. It incorporates the cool parts of Sass, such as variables, mixins and nested rules. Operations are also included, but I haven’t delved too deep into it yet. But a small test was all it took to see what I liked and disliked. First, lets take a look at the VERY basic page I did.

Click here to see the demo.

(more…)

Test driving Sass 3…a second look at Sass

Wednesday, June 2nd, 2010

Sass logoSoooo…I have decided to try my hand at updating my install of Sass to version 3. I’m just a simple cave man…but I do know one thing. THAT was a bitch. I am stupid when it comes to command-line stuff. I literally have to do a google search on everything that I try to do. I have 10 windows open at the moment and each one is something dumb. Like how to change directories, how to update a damn gem, how do I update compass, how do I recompile with compass….COME ON!

Whew! Its done. And it works. Thank GOD! Now first I am going to give you a link to the test page I am building (using the html from my “Creating your own tool kit – Part I: CSS” post).

Click here for the demo.

Let’s take a look at the Sass first. Keep in mind, this is basic Sass stuff, but I want you to see the cool factor. Sass 3′s main syntax is SCSS (Sassy CSS). It is more closely related to CSS than Sass 2 was.

NOTE: I wrote an article a while back about Sass, but that was using version two’s syntax, so I am basically starting over.

(more…)