[Keeper]

Being introduced to this comparatively new stylesheet language (appeared in 2007) myself recently, I decided I'd tutorialize it and get users acquainted with its functionality. A preliminary knowledge and understanding of HTML/CSS (and especially CSS is required). To begin with, think of SASS as a dynamic implementation of CSS. It falls under two categories: a stylesheet language and a scripting one. By far SASS is nothing more but an extension for CSS3, allowing for a few extra features and element manipulations to be present and performed.

The difference between SASS (Syntactically Awesome Style Sheets) and SCSS is that SASS does not require the usage of semicolons at the end of each line where a style has been applied and does not allow for parenthesis to define the scope of styles chosen. This makes any SCSS (Sassy CSS) syntax a fully valid CSS3 file as it, on the other hand, requires the usage of semicolons and parenthesis. Obvious as it may seem - respectively, SASS uses the .sass extension and SCSS - .scss.



Before we proceed with the syntax and sample usage through examples, let us first setup SASS and prepare our working environment. It can be used through either command line or with the help of a few framework applications. I personally use Koala as it's free and has a nice, light GUI. You can download Koala from here http://koala-app.com/.

For those that prefer the CLI, you need Ruby and could then install SASS as a gem. Refer to this page http://sass-lang.com/install

Once installed, add a folder as the base of the project and store your .sass/.scss files along with the HTML index there.



Using SASS is basically compiling SASS/SCSS code which converts it into a CSS3 syntax format. It supports four data types which are perfectly enough to help boost CSS3's performance and features. Those being:

• Numbers (integers and floats)
  
• Strings
  
• Colors (in the form of strings)
  
• Booleans
  

Now, while a regular CSS3 style sheet would look like this:

Code:

#header { color: orange; padding: 10px; display: block; }

A SASS implementation can look like the following:

Code:

$color: orange $padding: 10px #header color: $color padding: $padding + 15px display: block

Let's carry on with forging a simple web page using SASS.

Code:

<div class='document'> <!-- header --> <div class='header'> <img src=''/> </div> <!-- main content --> <div class='content'> <p>Few paragraphs here</p> <p>Few paragraphs here</p> <p>Few paragraphs here</p> <p>Few paragraphs here</p> </div> <!-- footer --> <div class='bottom'> All rights reserved &copy; 2014 </div> </div>

Four div elements to cover the whole document. A 'global' one for marking the whole body, a header, content, and the footer. Now for the styling with SASS, let's first declare the variables that will be holding some of the values.

Code:

$margin: 1em 3em $overflow: hidden $position: absolute $shadow: 0 0 25px #2E2E2E $percent: 15% $size: 10px $color: #ACACAC $solid: solid $radius: 6px

Before anything else, we have to define a height for the document itself (so that we can adjust the div elements depending on it), hide the scrollbar and define a background.

Code:

body, html height: 100% overflow: $overflow background-color: #2e2e2e

The document class represents the div element that contains the paragraphs and all the content inside it. Declare the width and height in percentage so that the layout becomes responsive and adaptive for all devices and resolutions and specify a few color changes to fit the overall design and structure of the document.

Code:

.document width: 67% height: 67% position: $position top: $percent left: $percent color: lighten($color, $percent) text-shadow: 1px 1px #000 border: $solid 1px #353535 overflow: $overflow overflow-y: auto box-shadow: $shadow background-color: darken($color, 40%)

I believe here is the moment where I should say that SASS/SCSS also provide in-built functions for easier adjustment of colors and elements. For example we've used the functions darken() and lighten(). Their names are more than self-explanatory and so is their functionality. For a thorough reference on all functions refer to http://sass-lang.com/documentation/Sass/...tions.html.

Now we need to style the header, content and footer. Defining a margin to positionate the paragraphs and align them appropriately and a few borders do set aside the content from the miscellaneous.

Code:

.content, .bottom margin: $margin .header border-bottom: $solid 1px #525252 box-shadow: nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) - 15px nth($shadow, 4) text-align: center margin: $margin .bottom border-top: $solid 1px $color

You've probably noticed the box-shadow property and its value. The $shadow variable is simply a list of values. If the blur is always going to be the 3rd item in the list (such as in our example), then what we're looking at is something like this: (shadow blur) - 15 pixels. We subtract 15 pixels from the total value of the blur. In that way we eliminate any duplicate values which is why SASS/SCSS were invented in the first place. However, the above code assumes that the blur value is the 3rd value in the property box-shadow. What if the blue value is positionated in a different place (could be an inset shadow)? Then what we could do is start doing things like checking the length of the list and/or examine the first element to see if it is inset:

Code:

div { @if nth($shadow, 1) == inset { box-shadow: nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 4) - 15px nth($shadow, 5); } @else { box-shadow: nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) - 15px nth($shadow, 4); } }

..or we could simply make a new variable for the blur as shown below

Code:

$blur: 25px - 10; $shadow: 0 0 $blur rgb(46, 46, 46); div { box-shadow: $shadow; }

Nonetheless, I highly recommend the usage of the first example as you may never know the position of a certain value. In other words, dynamic allocation is better than static for a number of reasons.

The final thing we should consider about the project is the scrollbar of the center box. This we style the following way:

Code:

::-webkit-scrollbar width: $size height: $size ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment display: none ::-webkit-scrollbar-track-piece background-color: #3b3b3b -webkit-border-radius: $radius ::-webkit-scrollbar-thumb:vertical -webkit-border-radius: $radius background: #666

This, however, applies only for Chrome hence the usage of the -webkit property. Another thing you should consider with gravity are at-rules. Despite the fact that in most cases their usage is unnecessary, you should be aware of those that apply for HTML/CSS before we proceed with the SASS/SCSS ones. They exist ever since the first version of CSS and define rules by covering an amount of properties and applying them to a certain thing (element, attribute etc). Below I've organized a list with all of them and briefly explained their functionality.

@font-face - defines a font which can be used afterwards

Code:

@font-face { font-family: myFont; (name of the font) src: url(someFont.woff); (the directory of the font) }

Example:

Code:

p { font-family: myFont; (or whatever name you've chosen) }

@import - including additional CSS files

Example:

Code:

@import 'custom.css';

@page - could be used as a partial alternative of the body selector with the exception that you can only use it to define a margin and a few other properties.

Example:

Code:

@page { margin: 2cm; }

@media - used to apply a style to a certain media type (print, screen).

Example:

Code:

@media print { body { font-size: 15pt; } }

@charset - define encoding for the CSS file

Example:

Code:

@charset "UTF-8";

@namespace - used in XML projects

Example:

Code:

@namespace url(http://www.w3.org/1999/xhtml);

@keyframes - used for creation of animations

Example:

Code:

@keyframes animation { from {top:0px;} to {top:10px;} }

@supports - if a certain element is not supported by the browser, @supports provides an alternative which you define yourself.

Example:

Code:

@supports not (border-image: url('image.png') { .foo { border: 3px solid green; background: url('image.png'); } }

@document - restricts the usage of styles for a certain URL address.

Example:

Code:

@document url(http://www.w3.org/)

Now that we've gone through all of these, let's move on to the SASS/SCSS ones. The first thing to be aware of are mixins. They enable us to make a list of styles that apply throughout the site. A typical example would be the following which is forming a custom function with a parameter.

Code:

@mixin transition($default: 3s) -webkit-transition: $default; -moz-transition: $default; transition: $default;

So now we can apply this a certain element, class or identifier. Using the @include rule, we can do this the following way by specifying an argument of 4 seconds for the transition:

Code:

nav @include transition(4s) #content @onclude transition(3s)

If no parameter has been supplied, the function works with the default value which is specified in the declaration of the function itself (in our case $default: 3s). The next feature we're gonna look at is @extend. It allows for an element to inherit styles from another element, class or identifier. As well as that, we can specify extra declaration afterwards. This is made so that properties with the same values are not repeated over and over again throughout the entire cascading style sheets. Here's how we use it:

Code:

div color: white font-family: 12px display: inline-block .footer @extend div background-color: red

This would force the footer class to inherit all styles from div elements that have been specified above. In addition, we could add more styles after it as I've already mentioned above. So now, perhaps something which I should have talked about at first, is nesting. This is one of the main reasons for the acronym of SASS because it adds to the overall code structure layout and makes SASS syntax easier to read and manipulate. The two types of nesting are selector nesting and property nesting. As you may guess from their name, they allow for the indentation to make a valid CSS selection or property declaration.

Example for selector nesting:

Code:

#content #main padding: bottom: 15px right: 10px #center padding: bottom: 15px

This compiled as SASS would result in the following CSS syntax:

Code:

#content #main { padding-bottom: 15px; padding-right: 10px; } #content #center { padding-bottom: 15px; }

I was uncertain whether to include SASS/SCSS operators as well because they are pretty easy to catch up with, especially when once has already reached to this part of the tutorial but nonetheless I'll allocate a bit of space for them too. There are five of them and those being: +, -, *, /, %. Some brief examples can be found below:

Code:

$size: 6px / 2px height: 200px + 20px width: 200px * 2 - 280px border: solid $size yellow right: 55%

That's pretty much all about it. Briefly went through all SASS/SCSS features so that you main gain a general perception of what concept is hidden behind these pre-processors for CSS3.