Techumber
Home Blog Work

CSS Preprocessors For Beginners(SASS)

Published on November 18, 2013

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', 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(0, 0, 0, 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(0, 0, 0, 0.1));
    }
    &[type='submit'] {
      ////compass mixions
      @include background-image(linear-gradient(top, #4d90fe, #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 17, ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

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

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

/* line 26, ../../../../../../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 28, ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q,
blockquote {
  quotes: none;
}
/* line 103, ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: '';
  content: none;
}

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

/* line 116, ../../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

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

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

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

/* line 27, ../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(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  background: #f7f7f7;
  width: 350px;
  padding: 40px 40px;
  margin: 0 auto;
}
/* line 30, ../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 43, ../sass/screen.scss */
.login-box input:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* line 48, ../sass/screen.scss */
.login-box input[type='submit'] {
  background-image: -webkit-gradient(
    linear,
    50% 0%,
    50% 100%,
    color-stop(0%, #4d90fe),
    color-stop(100%, #4787ed)
  );
  background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
  background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
  background-image: -o-linear-gradient(top, #4d90fe, #4787ed);
  background-image: linear-gradient(top, #4d90fe, #4787ed);
  border: 1px solid #3079ed;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 36px;
}
/* line 56, ../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.