I recently got more involved in the design side of a website. Traditionally, my main focus has been on server-side technologies and that has always been my strong point, but it's good to refresh your skills in areas that you don't have interaction on a daily basis.
As you probably know, CSS (cascade style sheets) is a stylesheet language that dedicates how a HTML or XML file will look. But there are many tools that you can use to compile your CSS code to make it easier to maintain. The two I've come across are SASS and LESS.
Talking to one of my fellow colleagues who is a front-end designer, SASS is a lot easier to use than LESS, so on that basis alone, I decided to use SASS.
SASS stands for Syntactically Awesome Style Sheets and what I like about SASS is that it brings some of the traditional programming functions into CSS. Things like functions, if statements, foreach loops and variables. Things that help you to reuse the same bit of code multiple times and the dreaded avoid code bloat.
How I lay out my SASS file
I have a file called style.scss and that pretty much includes all my SASS files. It's my goal to compile style.scss into a CSS file (style.css would make sense).
/* style.scss */
@import "variables";
@import "mixins-layout";
@import "defaults";
@import "layout";
@import "content";
Variables
My first file is where I store my variables. The way SASS imports files is the position when they are imported. That means that the file nearest the top gets imported first, and the one nearest the bottom gets imported last. By importing the variables first, it means that the variables are accessible in any of my other SASS files.
I use my variables file to store things for different elements such as the font size, background colour, the colour of the border etc.
/* variables.scss */
// Font and Size
$font-size-base: 1rem !default;
// Colour Scheme
$colour-scheme-inner-blue: #4c6d79;
$colour-scheme-yellow: #c6c6b7;
// Header
$header-background-colour: $colour-scheme-inner-blue;
$header-font-colour: $colour-scheme-yellow;
$header-navigation-font-size: $font-size-base*1.5;
$header-navigation-margin: 10px;
What is this "Mixin"?
You could confuse mixins with something David Guetta does, but it's nothing to do that.
Mixins are very similar to functions. You pass in some parameters and a result is returned. The only major change is what is returned from a mixin. Traditionally, a function will return a single value such as an integer or a string, but a mixin allows you to return actual SASS code that can be compiled to CSS.
I would import the mixin file after the variables file, but before any of the SASS files that control the styling. That means that the files that control the styling have access to the mixins.
/* mixins-layout.scss */
@mixin make-container() {
width: 100%;
padding-right: $container-padding;
padding-left: $container-padding;
margin-right: auto;
margin-left: auto;
}
The files that control the styling
I separated the files that control the styling into three separate SASS files. The defaults file sets the default attributes for the HTML tags such as <p>, <a> and <body>. The layouts file sets out the styles for the template. And finally, the content file sets out the styles that delivers the content. As we import these three files last, that means we can take advantage of using the variables and the mixins within them.
Of course, how you separate them is down to the task you've got in hand. If you got a big eCommerce website, you would probably want to separate it down further into more individual areas.
Conclusion
I would certainly recommend using SASS. Currently, CSS does not have the capabilities of some of the tools that SASS has combined, like the ability to include variables.
You will need something to compile your SASS into CSS and I have used Gulp which I've installed from NPM. Gulp allows you to do many things. Not just compiling SASS into CSS, but also minifying your CSS file, or copying files to a different location.
