Techumber

CSS Preprocessors For Beginners(SASS)

Github avatar
Dimpu
November 18, 2013. 10 min read

I love Web Design with CSS. But, The problem with css is it’s just a declarative language. We can’t apply any kind of logic to our css like if headings must be 2 times more than the base font we need to calculate is all by ourselves. Another big issue is maintainability. If our website is have some many style sheets or one big style sheet. By using only Style Sheets it’s bit difficult to maintain  bigger sites. Creating cross browser style sheet is another issue for web developer. Every time they need to cross check their code with different browser(if it is responsive much more difficult.)

Demo

Download

So, how can we solve all this problems? Some smart guys faced all these problem and created a solution that is The CSS Preprocessors. Before we get into the fun, What are these css preprocessors? How they can help us to solve the issue with css. Css Preprocessors are the tools which will compile some code (sass or scss or less) and generate the css for us. It’s just like writing program in c and compile it into machine code. But in css Preprocessors the output will be css which we will use in your website just like normal css. So here we need to learn that code. There are so many css Preprocessors available in the market but most famous are SASS and LESS. These both have almost same features. But, with help of compass framework sass became much more powerful than other css preprocessors. So let’s get our hand on it and see how it works.

Truths about sass.

1)Sass describes itself as a meta language in there site. 2)We can write sass in two formats .sass and .scss. 3)In .sass we use ruby like syntax. 4)In .scss we use css like syntax(most of the time we use this) 5)Sass is very useful if you like DRY(Don’t Repeat Yourself) coding. 6)Compass is a framework with lots of helpful functions and mixions for sass.

Let’s start with installing sass. We need to use CLI(command line interface to install sass) To work with sass first we need to install ruby. Just download the ruby from //rubyinstaller.org/downloads/ and install it. Once you have installed it in your system start “Start Command Prompt with Ruby”. If you are a windows user you will find it in All Programs. Now, we will install sass. Just run this code in ruby command prompt.

gem install compass

This will install all your required compass and sass tools in your system. Now to check your sass version just run

sass -v

Creating sass project

There are so many tools available to work with sass like codekit,prepros.etc. But I will use my Sublime Text and ruby command prompt to work with sass. Create a folder somewhere on your hard drive name it as sass(you can put whatever you want). Now using your command prompt got to that folder. For example I have created it in C:\Aravind\learn\sass. Just run the below code to create sass and compass project.

compass create

This will create some files and folders for you can see all created file in command prompt like this. In these files config.rb(rb is ruby file extension). It is the brain of our sass project. Just open config.rb in your sublime text2 you can see some settings for css,js,img directories. Also we can change some setting to how the css should generate. You can learn more about sass config at //compass-style.org/help/tutorials/configuration-reference/.

Features in Sass 

Variables

Yes variables. If you are from programming background. I don’t need to introduce variables. For who don’t know variables are like storage devices. In variable we can save some value and use it later in our code. You may wonder where will we use variable in css. But trust me this is very cool feature. So, In sass we create variables in following format.

$headingColor:#333;

Nesting

If you like write sudo styles like me, then nesting is the great feature for you.

nav{
float:left;
ul{
li{
float:left;
list-style: none;
a{
color:#000;
}
}
}
}

This code will compiled into.

nav{
float: left;
}
nav ul li{
float:left;
list-style: none;
}
nav ul li a{
color:#000;
}

isn’t it cool.

Mixions/Include

Mixions like functions(not exactly we also have functions in sass). We just need to create them once and we can use them as many times as we want. Another cool thing about mixion is we can pass arguments just like functions do.

@mixin box($bg:#000){
border-radius: 5px;
box-shadow: 1px 1px 5px #000;
min-width: 100px;
min-height: 200px;
background:$bg;
}

This is a simple example for mixion. Here we have created a box model styles. Now we can use this mixion as below.

.content{
@include box;
}

There are lot more features available in sass. But These above features are more than enough to do lot of magic in your css. You can learn remaining all other features at sass official website //sass-lang.com/documentation/file.SASS_REFERENCE.html. So, enough theory let’s just create something with sass. I would like to create simple google like login box and we will use the sass to create our style sheet here. just use command prompt create your sass initial sass projects.

compass create sasslogin

This will create initial sass projects at your command prompt location. Open your project in your favorite IDE or Text Editor(I’m using sublime text). Create a new file “index.html” in root of the project. past the following code in that file.

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Techumber sass login box</title>
<link rel="stylesheet" href="stylesheets/screen.css" />
</head>
<body>
<h1>Have account? Login</h1>
<div class="login-box">
<form action="">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="submit" value="Sign in">
</form>
</div>
</body>
</html>

This is simple html for login box. we added a stylesheet to this file(screen.css) which we going to generate through sass. Now open screen.scss which is under sass directory. Bye default when you create your sass project the screen.scss will add compass reset to it. If you open your screen.scss. You will see

@import "compass/reset";

To know what it will generate you need to compile your sass. In order to do so we will use simple compass watch. Just add compass watch as below in your command prompt(Your command prompt should be pointed to the sass project folder which contains config.rb file).

compass watch

Now if you open your screen.css file you will see your sass have imported reset.css into our project form compass framework. Now let’s write our sass code for login box.

screeen.scss

@import "compass";
@import "compass/reset";
*{
@include box-sizing(border-box);
}
body{
font: 16px/18px 'Open Sans'undefined arial;
-webkit-font-smoothing: antialiased;
}
h1{
color: #555;
font-size: 42px;
font-weight: 300;
margin-top: 150px;
margin-bottom: 110px;
text-align: center;
}
@mixin box($box-width:300px){
//compass mixions
@include border-radius(5px);
@include box-shadow(0px 2px 2px rgba(0undefined 0undefined 0undefined 0.3));
background: #f7f7f7;
width:$box-width;
padding: 40px 40px;
}

.login-box{
@include box(350px);
margin: 0 auto;
input{
//compass mixions
@include border-radius(2px);
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
width: 100%;
display: block;
margin-bottom: 10px;
height: 44px;
padding: 0 8px;
background: #fff;
color: #404040;
outline: 0;
&:hover{
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
@include box-shadow(inset 0 1px 2px rgba(0undefined0undefined0undefined0.1));
}
&[type="submit"]{
////compass mixions
@include background-image(linear-gradient(topundefined#4d90feundefined#4787ed));
border: 1px solid #3079ed;
color: #fff;
font-size: 14px;
font-weight: 700;
height: 36px;
&:hover{
cursor: pointer;
}
}
}
}

This is our complete screen.scss code. If you see the code I have used compass css3 features like border-radius, box-shadow. So that it will create all those vander prefix for us after compilation. So, let’s see how it got compiled(since we have use command compass watch every change will be compiled whenever you saved your sass file)

screen.css

/* line 17undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
htmlundefined bodyundefined divundefined spanundefined appletundefined objectundefined iframeundefined
h1undefined h2undefined h3undefined h4undefined h5undefined h6undefined pundefined blockquoteundefined preundefined
aundefined abbrundefined acronymundefined addressundefined bigundefined citeundefined codeundefined
delundefined dfnundefined emundefined imgundefined insundefined kbdundefined qundefined sundefined sampundefined
smallundefined strikeundefined strongundefined subundefined supundefined ttundefined varundefined
bundefined uundefined iundefined centerundefined
dlundefined dtundefined ddundefined olundefined ulundefined liundefined
fieldsetundefined formundefined labelundefined legendundefined
tableundefined captionundefined tbodyundefined tfootundefined theadundefined trundefined thundefined tdundefined
articleundefined asideundefined canvasundefined detailsundefined embedundefined
figureundefined figcaptionundefined footerundefined headerundefined hgroupundefined
menuundefined navundefined outputundefined rubyundefined sectionundefined summaryundefined
timeundefined markundefined audioundefined video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}

/* line 22undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1;
}

/* line 24undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
olundefined ul {
list-style: none;
}

/* line 26undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* line 28undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
captionundefined thundefined td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}

/* line 30undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
qundefined blockquote {
quotes: none;
}
/* line 103undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:beforeundefined q:afterundefined blockquote:beforeundefined blockquote:after {
content: "";
content: none;
}

/* line 32undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}

/* line 116undefined ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
articleundefined asideundefined detailsundefined figcaptionundefined figureundefined footerundefined headerundefined hgroupundefined menuundefined navundefined sectionundefined summary {
display: block;
}

/* line 3undefined ../sass/screen.scss */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* line 6undefined ../sass/screen.scss */
body {
font: 16px/18px 'Open Sans'undefined arial;
-webkit-font-smoothing: antialiased;
}

/* line 10undefined ../sass/screen.scss */
h1 {
color: #555;
font-size: 42px;
font-weight: 300;
margin-top: 150px;
margin-bottom: 110px;
text-align: center;
}

/* line 27undefined ../sass/screen.scss */
.login-box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 2px 2px rgba(0undefined 0undefined 0undefined 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0undefined 0undefined 0undefined 0.3);
box-shadow: 0px 2px 2px rgba(0undefined 0undefined 0undefined 0.3);
background: #f7f7f7;
width: 350px;
padding: 40px 40px;
margin: 0 auto;
}
/* line 30undefined ../sass/screen.scss */
.login-box input {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
width: 100%;
display: block;
margin-bottom: 10px;
height: 44px;
padding: 0 8px;
background: #fff;
color: #404040;
outline: 0;
}
/* line 43undefined ../sass/screen.scss */
.login-box input:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-webkit-box-shadow: inset 0 1px 2px rgba(0undefined 0undefined 0undefined 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0undefined 0undefined 0undefined 0.1);
box-shadow: inset 0 1px 2px rgba(0undefined 0undefined 0undefined 0.1);
}
/* line 48undefined ../sass/screen.scss */
.login-box input[type="submit"] {
background-image: -webkit-gradient(linearundefined 50% 0%undefined 50% 100%undefined color-stop(0%undefined #4d90fe)undefined color-stop(100%undefined #4787ed));
background-image: -webkit-linear-gradient(topundefined #4d90feundefined #4787ed);
background-image: -moz-linear-gradient(topundefined #4d90feundefined #4787ed);
background-image: -o-linear-gradient(topundefined #4d90feundefined #4787ed);
background-image: linear-gradient(topundefined #4d90feundefined #4787ed);
border: 1px solid #3079ed;
color: #fff;
font-size: 14px;
font-weight: 700;
height: 36px;
}
/* line 56undefined ../sass/screen.scss */
.login-box input[type="submit"]:hover {
cursor: pointer;
}

If you observe the above to files(screen.scss,screen.css). We only write 61 lines of code which generate 146 lines of code. Though we didn’t use much cass features. Since I couldn’t explain all features in one post. I will try to come up will cool examples later. Thank you hope you enjoyed.


...