Disclaimer: the following blog post is extremely geeky and contains A LOT of code.
Earlier today I decided to try out Sass and Compass because I’ve seen it being mentioned almost daily for quite a while. I didn’t really know what I wanted to code, so I just did some kind of starting point with a couple of font selectors, properties and values using mainly the variable function in Sass, which i a really handy tool I think. You have to excuse me for the lack of highlighting in the code blocks and I hope that it’s still readable. I’ve tried a few plugins that enables automatic highlighting, but I haven’t come across one that I really love. I also had remove nearly all of my comments in the code but I’m sure it’s still understandable. If not, you can check it out on my GitHub.
Like I said earlier, the variable part in Sass is really awesome. I created
a separate file called
variables.scss (Sass’ default file extension) where
I defined them all for better control and easier editing. Adding an underscore
before a file name stops your file from get rendered into a
.css file, which
is useful since you probably don’t want all of your
.scss files to become
I focused on just a few selectors (body, headings and links), but this could be expanded to include a lot more.
screen.scss is where the magic happens, so to speak. That’s where
I imported all of my variables that I defined in
variables.scss and placed
them in selectors with properties.
I think it’s really cool that you can use basic math with variables so that you can create other values by only using one variable as a base point. Just change it and all the calculations will be rendered automatically.
This is the final result after Compass was done with the compiling:
It might look like a lot of work for simplifying such a small part, but the
thing is that both
screen.scss are highly customizable
and reusable too. If I wanted to change a font-family or make the
font-percentage bigger I could do that by just opening up
re-rendering it. I don’t have to change anything else. I think I’ll try out Sass
for a while and see how it goes. There’s a lot more to it than just simple
variables and math, so I’m looking forward to see what I can come up with.