Front-end developer
Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world.
May I guess, you are developer and you are using CSS? That is nice, but how fast are you? What if I told you that you can type CSS at least 30 percent faster?
Yes, it could be true if you are using some of CSS preprocessors. My recommendation is definitely Sass (Syntactically Awesome Style Sheets).
Why Sass?
1. Because it is easy to learn and simple to use.
Sass/scss is almost the same as CSS. Even if you type pure CSS into SASS code, compliler will generate the same typed CSS. But if you type SASS, you can get much more. Once you learn the power of SASS over CSS you will not only never look back, but you’ll wonder how you ever lived without it.
2. Sass has the largest community of all others CSS extension languages
Over this link you can find most answers about SASS (http://sass-lang.com/community).
3. Nesting
Sass allows nested selectors and properties within each other. Used correctly they can avoid large amounts of repetition. Used incorrectly, they can introduce performance issues.
/*** SCSS ***/
#logo {
background: {
color: blue;
image: url("some-url");
repeat: repeat-x;
}
a {
text-decoration: none;
color: black;
}
}
/*** GENERATED CSS ***/
#logo {
background-color: blue;
background-image: url("some-url");
background-repeat: repeat-x;
}
#logo a {
text-decoration: none;
color: black;
}
There Is one thing about nesting you need to remember. If you are nesting more than 3 levels deep, you could have a problem later with selecting elements. Because of that, you should considered creating more classes for ease selecting.
4. Using partials - keeps your project more organized
One of the first Sass command you’ll need to learn is the @import directive. This command lets you import another Sass file into the current file:
/*** SCSS ***/
@import "_type.scss"
CSS pre-processors “compile” all imported multiple SASS files into a single .css file. Here’s some example:
-
Make separated Sass files for each collection of styles.
You might have file for CSS reset rules, grid system, typography, layout, .... Sass files end in .scss, and you should pre-pend the file names with an underscore. You might have files like this:
/*** SCSS ***/ _CSS-reset.scss; _typography.scss; _grids.scss; _layout.scss; _navigation.scss; -
Create a main Sass file and place it in the same directory you placed the other .scss files.
This file can be named anything you like (styles.scss).
-
In the main Sass file (styles.scss, for example) add @import for each file you wish to include:
/*** SCSS ***/ @import "CSS-reset"; @import "typography"; @import "grids"; @import "layout"; @import "navigation"; -
Compile the main Sass file.
You can do that on several ways. In it’s most basic form you use command line tools to install and use SASS. Fortunately, there are GUI tools you can use: CodeKit for the Mac. LiveReload is another tool which works on Macs (and has an early Windows beta version out as well.). Also, you can use Gulp for compile. When you compile the main Sass file, Sass combines all of the individual .scss files into one .css file. Even better, you can instruct Sass to output a “compressed” version of the CSS, or “minified” version — comments are stripped out, extra spaces removed, and colors are reduce to their shortest representation (for example, #ffffff is turned into #fff). This feature is fantastic: it lets you load up your individual .scss files with all the comments you want, providing detailed instructions for every rule if you’re so inclined, but then output a small, comment-free CSS file for production.
5. Using variables, mixins, and functions
-
Variables
You may already be using variables in another language like JavaScript or PHP, or really any programming language and found yourself wondering why you can’t have such a simple and powerful tool in CSS as well. Variables can be used to store any value in sass/scss.
/*** SCSS ***/ $color-gray: #ccc; $color-light-gray: $color-gray + #111; $font-family: “Roboto”, sans-serif; $font-size: 16px;After defining of variables, you can call them in any part of SASS. If someone wants to change for example color, then no problem. You should only changing color into variables, and let compiler to do the rest of job. Compiler will replace color in every style which use $color variable. Perfect! :)
-
Mixins
Mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions. They are defined using the @mixin rule which takes a block of styles that can then be included in another selector using the @include rule.
/*** SCSS ***/ @mixin clearfix { &:before, &:after { content: " "; display: table; } &:after { clear: both } // For IE 6/7 *zoom: 1; } #logo { @include clearfix; padding: 10px; margin: 10px; } /*** GENERATED CSS ***/ #logo { padding: 10px; margin: 10px; } #logo:before, #logo:after { content: " "; display: table; } #logo:after { clear: both; } #logo { *zoom: 1; } -
Functions
Sass alowes you to use functions for easy generating some styles. For example we will create some ease function for demonstration. If you want to create 5 li selectors with increasing z-index. Every next "li" element should have z-index greater than previous element have.
/*** SCSS ***/ @function myFunction() { @for $i from 1 through 5 { li:nth-child(#{$i}) { z-index: $i; /*more styles*/ } } } ul { myFunction(); } /*** GENERATED CSS ***/ ul li:nth-child(1) { z-index: 1; /*more styles*/ } ul li:nth-child(2) { z-index: 2; /*more styles*/ } ul li:nth-child(3) { z-index: 3; /*more styles*/ } ul li:nth-child(4) { z-index: 4; /*more styles*/ } ul li:nth-child(5) { z-index: 5; /*more styles*/ }This is example with only 5 li:nth-child elements. Real power of SASS comes when you have much more element to select.
This would be all for now. You will find more posts about technologies that our team use very soon. If you have any question, please contact us.
comments powered by Disqus