Using Sass(SCSS) On My Website Redesign

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

Speaking of CSS3 styles in SCSS

If you read my other articles, you will know that SCSS is the new syntax for Sass, and reads/writes pretty close to how you would write your normal CSS. Except for the fact that it has all the extra goodies. Anyway, I using Compass (which includes the blueprint framework – which I ditched) to compile the Sass into CSS, and while looking through its support and reference I read about CSS3 mixins. If you wanted to do a border-radius on something, you would write this in Sass:

.myClass {
@include border-radius(5px);
}

And the output into CSS would look like this:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

Even if you only write 3 or 4 of those lines of CSS normally, you did it in 1 line of Sass. This is where I think the brilliance and power of Sass comes into play. Now, you can’t just get that to work by itself, the solution to actually get it to do that is by including this at the top of your .scss file and you are good to go:

@import 'compass/css3';

Nested styles

There is so much I still don’t know about the syntax and what it can do, what I do know is enough for me to want to use the hell out of it. Nested styles is one of those. Personally, I hate having to write styles for stuff like unordered lists, because you have to write out several styles (ie – nav ul, nav li, nav a, nav a:hover). In Sass, you can do it with one. Here is an example of what I have done with my redesign:

nav li {
	float: left;
	border-right: 1px $orange dotted;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	line-height: 18px;
	a {
	color: $orange;
	text-decoration: none;
	display: block;
	float: left;
	@include font(18px);
	.byline {
		@include font(14px);
		font-weight: normal;
	}
	}
	a:hover {
	color: $wht;
}
}

Here is the output in CSS:

nav { position: absolute; top: 225px; left: 35px; }
nav li { float: left; border-right: 1px #f15c22 dotted; margin: 0 12px 0 0; padding: 0 12px 0 0; line-height: 18px; }
nav li a { color: #f15c22; text-decoration: none; display: block; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; }
nav li a .byline { font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold; font-weight: normal; }
nav li a:hover { color: white; }

If you don’t know Sass at all, the above is going to be somewhat confusing, but I actually had to write less for the Sass styles AND some of what I did write (because it includes a mixin) is reusable for other styles. Nesting lets you put element styles within the parent elements. To quote the Sass site, “avoids repetition by nesting selectors within one another.

Mixins are awesome

So far, I am only using one mixin, and that is for declaring the font style. Here is what that looks like:

@mixin font ($size){
  font: {
    family: Arial,Helvetica,sans-serif;
    size: $size;
    weight: bold;
  }
}

If any of you reading this knows Sass, I have a question for YOU. While this is working for me at the moment, I would like to pass the family into the mixin as a variable, so when I call it later I can do something like this, but where I can change the family in the call:

@include font(18px Arial,Helvetica,sans-serif;);

When I tried doing it, it was not putting a comma between each, and therefore not recognizing it at all. If you know how to do this, PLEASE LEAVE A COMMENT!

Final Thoughts

I am really falling in love with Sass, which sounds weird to me because at the moment it is actually slowing me down. I can see though that once I master it, my development time will greatly improve. A few things on my wish list if anyone out there knows the answers to these questions:

  • How do I toggle the line comments on and off in the compiled CSS?
  • Can you change the format of the compiled CSS? Meaning from single line to block?
  • I’m using Compass for the compiling, but developing in PHP. The config file doesn’t seem to be doing a damn thing. Why? Its in my root directory, but even if I change the lines about the locations, nothing breaks like I thought it would.

Here is the Sass file I have so far, in case you are interested (please leave pointers if you have any!)

@import "compass/css3.scss";
 
/*Variables*/
$dkgray: #2d2d2d;
$orange: #f15c22;
$wht: #ffffff;
$w: 1020px;
$r: right;
$l: left;
 
@mixin font ($size){
  font: {
    family: Arial,Helvetica,sans-serif;
    size: $size;
    weight: bold;
  }
}
 
 
body {
	background: url(../images/background.jpg) repeat-x left top $dkgray;
	color: $wht;
}
 
a {
	color: $orange;
	zoom: 1;
	outline: none;
}
 
a:hover {
	color: $wht;
}
 
h1 {
font: bold 24px Arial,Helvetica,sans-serif;
text-shadow: 2px 2px  5px $orange;
}
 
#container {
	width: $w;
	margin: 0 auto;
	overflow: hidden;
}
 
header {
	width: $w;
	height:  337px;
	position: relative;
	background: url(../images/jcIndex_01.png) no-repeat left top;
}
 
#contentRepeat {
	width: $w;
	background: url(../images/jcIndex_03.jpg) repeat-y left top;
}
 
#contentTop {
	width: $w;
	background: url(../images/jcIndex_02.jpg) no-repeat left top;
	min-height: 500px;
	height: auto !important;
	height: 500px;
	overflow: hidden;
	padding: 80px 0 0;
}
 
.ie6 #contentTop {overflow: visible;}
 
#contentLeft {
	width: 580px;
	float: $l;
	margin: 0 0 0 60px;
	padding: 10px;
}
 
#contentRight {
	width: 260px;
	float: $r;
	margin: 0 60px 0 0;
}
 
footer {
	width: $w;
	background: url(../images/jcIndex_03.jpg) repeat-y left top;
}
 
#footerContent {
	width: $w;
	min-height: 222px;
	height: auto !important;
	height: 222px;
	overflow: hidden;
	background: url(../images/jcIndex_05.jpg) no-repeat left bottom;
}
 
.ie6 #footerContent  { overflow: visible;}
 
/*************** Navigation Styles *****************/
 
nav {
	position: absolute;
	top: 225px;
	left: 35px;
}
 
nav li {
	float: left;
	border-right: 1px $orange dotted;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	line-height: 18px;
	a {
	color: $orange;
	text-decoration: none;
	display: block;
	float: left;
	@include font(18px);
	.byline {
		@include font(14px);
		font-weight: normal;
	}
	}
	a:hover {
	color: $wht;
}
}

Coupon Code: webmachine

Tags: , ,

Leave a Reply