Script Tutorials

Getting Started with Sass

—

by

admin
in

New SASS tutorial tells about many aspects of using SASS: installation, known facts, variables, mixins, nested rules, inline imports, and more. It certainly will be useful for beginners programmers and advanced guru.

SASS

Sass is a CSS pre-processor: a good implement that any web builder needs in a finesse style design of a work.

BEFORE USING SASS

To use sass on your computer you must firstly install a ruby.
There are several ways to install Ruby based on the operating system you are using on your computer.

INSTALLING RUBY

Hint: Click on the any type of operating systems (OS) listed below to install ruby depending on the type of OS your computer is using.
LINUX
WINDOWS
MAC

WHAT YOU MUST KNOW ABOUT SASS

Sass does not alter your protocols in the way you work before rather it makes your life easier in web designing. So I write to convince you not to confuse you that sass can help you in your projects more optimized than css.

WHAT YOU DON’T HAVE TO CHANGE JUST BECAUSE YOU ARE USING SASS

  1. Basically to learn and use SASS you don’t need to be a command-line expert
    (The commands for running Sass are few and uncomplicated.)
  2. You have to change the way you writes css
    (Your way of writing CSS will be an applied to use in SASS.)
  3. You don’t have change the way you design

All you need is to learn sass, start sassing, and add to the knowledge you already have making your projects more professional when you combine your new learned sass with way you design and write css before.

NEEDS TO LEARNING AND USE SASS

Ever needed to change, say, a color in your stylesheet, and found that you had to find and replace the value multiple times? Don’t you wish CSS allowed you to do this?

Input (SASS)

1 $pink: #ea4c89
2 $font-size: 12px
3 p
4 font-size: $font-size
5 color: $pink
6 p strong
7 text-transform: uppercase

Output Result (CSS)

1 p {
2 font-size: 12px;
3 color: #ea4c89;
4 }
5 p strong {
6 text-transform: uppercase
7 }

Input (SASS)

01 @mixin colors($text, $background, $border)
02 color: $text
03 background-color: $background
04 border-color: $border
05 $values: #ff0000, #00ff00, #0000ff
06 .primary
07 @include colors($values...)
08 $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
09 .secondary {
10 @include colors($value-map...)
11 } 

Output Result (CSS)

01 .primary {
02 color: #ff0000;
03 background-color: #00ff00;
04 border-color: #0000ff;
05 }
06 .secondary {
07 color: #00ff00;
08 background-color: #0000ff;
09 border-color: #ff0000;
10 }

What if you could change that value in one place and the entire stylesheet reflected that change? You can with Sass!
Or how about repeated blocks of styles that are used in various locations throughout the stylesheet?

Wouldn’t it be fantastic to roll those shared rules into a reusable block? Again, defined only once but included wherever you needed them.

Input (SASS)

01 @mixin large-text
02 font:
03 family: Arial
04 size: 20px
05 weight: bold
06 color: #ff0000
07 .page-title
08 @include large-text
09 padding: 4px
10 margin-top: 10px

Output Result (CSS)

1 .page-title {
2 font-family: Arial;
3 font-size: 20px;
4 font-weight: bold;
5 color: #ff0000;
6 padding: 4px;
7 margin-top: 10px;
8 }

That’s also Sass! And those two extremely simple examples barely scratch the surface as to how Sass implement writing stylesheets faster, easier, and more flexible observing a professional protocol “Don’t repeat yourself” (DRY) principle of programming Coined and defined by Andy Hunt and Dave Thomas in their book, The Pragmatic Programmer. It’s a welcome helper in the world of web design, because anyone that’s created a website knows.
DRY declares:

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

WHAT IS SASS

Sass (short for Syntactically Awesome Stylesheets) is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of sass compilers.

INSTALLING SASS ON WINDOWS

Unlike Mac OS X, Windows doesn’t come with Ruby pre-installed. The official Sass website recommends RubyInstaller for Windows to get things running on your PC.
Once Ruby is installed, you’ll be able to follow the rest of the commands discussed in this tutorial.

INSTALLING SASS ON A MAC

Mac OS X comes preinstalled with Ruby, and Sass is packaged as a Ruby “gem”, which is a clever programmer term for a Ruby application.
Simply fire up Terminal.app (don’t panic!), and at the prompt type the following and hit enter:

1 $ gem install sass

That wasn’t so bad, right? After you hit enter, you’ll see the following results stream by in Terminal:

1 Fetching: sass-3.2.10.gem (100%)
2 Successfully installed sass-3.2.10
3 1 gem installed
4 Installing ri documentation for sass-3.2.10...
5 Installing RDoc documentation for sass-3.2.10...

Congratulations! You’ve just installed Sass.

TO GET THE LATEST AND GREATEST, TYPE THIS IN THE TERMINAL PROMPT AND HIT ENTER:

1 $ gem install sass --pre

You’ll see the results stream by once again, this time confirming the 3.3.0 alpha has been installed.

1 Fetching: sass-
2 3.3.0.alpha.3
3 .gem (100%)
4 Successfully installed sass-3.3.0.alpha.3
5 1 gem installed
6 Installing ri documentation for sass-3.3.0.alpha.3...
7 Installing RDoc documentation for sass-3.3.0.alpha.3...

TO SETUP SASS WORKFLOW

TELLING SASS WHICH FILES TO WATCH
Okay. We’ve installed Sass, so now what? We need to tell Sass which files to “watch”. Meaning, while we’re editing a stylesheet, we want Sass to monitor that file and convert the .sass file with all our nifty Sass syntax to the browser-ready .css file every time we make changes.
There are a few ways to do this:
• A simple command via the command line.
• A desktop app (there are several) that will help you manage your Sass files and their output.

USING COMMAND-LINE TO SASS WHICH FILE TO WATCH
Essentially the command tells Sass to watch a specified .sass file, and convert it to a target .css file.
For example:
$ sass --watch screen.scss:screen.css
After you run the above command, Sass will start monitoring any changes made to screen.scss.
You’ll see this message in the terminal after hitting return:
>>> Sass is watching for changes. Press Ctrl-C to stop.

If the file is updated, Sass will convert and overwrite screen.css automatically. In other words, every time you save changes in your Sass document, the CSS file will update instantaneously.

The file names don’t have to match. For instance, this would work just as well (though it might be confusing):
$ sass --watch crookcodes.scss:brooklyn.css

Furthermore, the files don’t have to be in the same directory.
In fact, I find it useful to separate my .sass files from my .css files. This isn’t a requirement, but it helps keep things organized.

Sass File Organization Shows a typical setup, with a main stylesheets directory, which contains the Sass-generated .css files and a sass directory that contains all the .sass that I’m working with.

You can also tell Sass to watch an entire directory, rather than just a single stylesheet. So using the above file structure, I could use the following watch command to monitor changes on any of the .sass files in my project (provided I’m currently in the -/ directory that holds my stylesheets and images in the terminal):

$ sass --watch stylesheets/sass:stylesheets

USING APPS INSTEAD OF THE COMMAND LINE

The commands we’ve gone over so far are extremely simple, and I have faith that you, astute front-end crafter that you are, wouldn’t find it difficult to add those bits of typing to your workflow. That said, there are desktop applications that make it even easier to manage the monitoring and output of Sass files.
They’re worth a look regardless of your comfort level with the command line.

Scout
Scout is a free desktop app for both Mac and Windows that provides “a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks.” In other words, Scout gives you a nice, visual interface to set up your watched directories and files rather than using the command line.


Fig 2.3: Scout’s dead simple setup-configuration screen.


Fig 2.4: as Scout watches your Sass files, the “log” keeps you updated with its compiling status.

Once you’ve chosen input and output folders, simply click the play button for your project and Scout will start monitoring files.

CodeKit

Like Scout, CodeKit (for Mac OS only) compiles your Sass files with a simple GUI. But it also compiles LESS, Stylus, Haml, CoffeeScript, JavaScript, and others.
Additionally, CodeKit has other bells and whistles that optimize files and images and automatically reload your browser as you develop (Fig 2.5).

LiveReload

LiveReload monitors any file changes, including Sass compiling, as you work and automatically reloads the browser. It’s available for both Mac and Windows (Fig 2.6).

Koala

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

CHOOSING AN SASS OUTPUT STYLE

SassScript provides the following mechanisms of compiling script in css. The output styles are as follow.

1. Nested

Nested (the default). The default style that Sass outputs is nested, which indents each rule to reflect the structure of the HTML it’s styling. Here’s an example of the nested style:

Nested Input (sass script)

01 $border: 1px solid #EFC6F3
02 .post
03 border-radius: 3px
04 background: #FFF8FF
05 border: $border
06 padding: 15px
07 color: #333333
08 .title
09 color: #000000
10 font-size: 20px
11 .alt-title
12 @extend .title
13 border-bottom: $border

Output result

01 .post {
02 border-radius: 3px;
03 background: #FFF8FF;
04 border: 1px solid #EFC6F3;
05 padding: 15px;
06 color: #333333;
07 }
08 .title {
09 color: #000000;
10 font-size: 20px;
11 }
12 .alt-title {
13 border: 1px solid #EFC6F3;
14 }

Below Command line outputs sass in nested style
[sass –watch scss:css –style nested]

2. Expanded

The expanded style is a more typical format similar to stylesheets that are crafted by hand.

Expanded Input (sass script)

01 $script-tutorial-font-size: 3em
02 $script-tutorials: 1px #f00
03 $script-tutorials-color2: #fdd
04 $script-tutorials-color1: #ff0
05 $script-tutorials-border: 3px
06 .error
07 border: $script-tutorials
08 background-color: $script-tutorials-color2
09 .attention
10 font-size: $script-tutorial-font-size
11 background-color: $script-tutorials-color1
12 .seriousError
13 @extend .error
14 @extend .attention
15 border-width: $script-tutorials-border

Output result (CSS)

01 .error {
02 border: 1px #f00;
03 background-color: #fdd;
04 }
05 .attention {
06 font-size: 3em;
07 background-color: #ff0;
08 }
09 .seriousError {
10 @extend .error
11 @extend .attention
12 border-width: 3px;
13 }

Below Command line outputs sass in nested style
[sass –watch scss:css –style expanded]
$sass –watch –style expanded screen.scss:screen.css

3. Compact

The compact style puts each declaration on one line, emphasizing the selectors. The idea is you can easily scan the left side to find visually grouped rules, with line breaks between.

Input (sass script)

01 @mixin firefox-message($selector)
02 body.firefox #{$selector}:before
03 content: "Hi, Firefox users!"
04 @include firefox-message(".header")
05 p
06 font: 10px/8px                    // Plain CSS, no division
07 $width: 1000px
08 width: $width/2                   // Uses a variable, does division
09 width: round(1.5)/2               // Uses a function, does division
10 height: (500px/2)                 // Uses parentheses, does division
11 margin-left: 5px + 8px/2px        // Uses +, does division
12 font: (italic bold 10px/8px)      // In a list, parentheses don't count
13 $gbl-script-tutorials: 5em !global
14 #main
15 width: $gbl-script-tutorials
16 #sidebar
17 $height-script-tutor: 5em
18 height: $height-script-tutor

Output result (CSS)

01 body.firefox .header:before {
02 content: "Hi, Firefox users!"
03 }
04 p {
05 font: 10px/8px
06 width: 500px;
07 width: 1;
08 height: 250px;
09 margin-left: 9px;
10 font: italic bold 1.25;
11 }

Below Command line outputs sass in nested style
[sass –watch scss:css –style compact]
$sass –watch –style compact screen.scss:screen.css

4. Compress

Compress Minifies our CSS output by stripping out comments and unnecessary spaces. It compresses CSS to one line. The most optimized output style – use before uploading your CSS to the server.
The fourth and final style is compressed, which removes all spaces and line breaks to reduce the stylesheet’s file size.

Input (sass script)

01 $type: monster
02 p
03 @if $type == ocean
04 color: blue
05 @else if $type == matador
06 color: red
07 @else if $type == monster
08 color: green
09 @else
10 color: black
11 $primary-color: #3bbfce
12 $margin: 16px
13 .content-navigation
14 border-color: $primary-color
15 color: darken($primary-color, 10%)
16 .border
17 padding: $margin/2
18 margin:  $margin/2
19 border-color: $primary-color
20 .widget-social
21 text-align: right
22 .widget-social a,  .widget-social a:visited
23 padding: 0 3px
24 color: #222222
25 color: rgba(34, 34, 34, 0.77)
26 .widget-social a:hover
27 color: #B00909

Output result (CSS)

01 p {
02 color: green;
03 }
04 .content-navigation {
05 border-color: #3bbfce;
06 color: #2b9eab;
07 }
08 .border {
09 padding: 8px;
10 border-color: #3bbfce;
11 }
12 .widget-social  {
13 text-align: right;
14 }
15 .widget-social a,  .widget-social a:visited {
16 padding: 0 3px;
17 color: #222222;
18 color: rgba(34, 34, 34, 0.77);
19 }
20 .widget-social a:hover {
21 color: #B00909;
22 }

Below Command line outputs sass in nested style
[sass –watch scss:css –style compressed]
$ sass –watch –style compressed screen.scss:screen.css

WHAT YOU MUST NOT DO WHILE USING SASS
Do not alter the output css script the reason being, any changes you make to the .css file will eventually get overridden as soon as you update the .sass file the sass compiler compiles the output. So stick to the .sass and blissfully ignore its output.
When you’re using Sass, you’ll no longer be editing any .css files.

WORKING WITH SASS

FEATURES OF SASS WITH EXAMPLES

NESTING

Nesting in Sass means less typing, using indentation to reflect the selector (and property) formation. With Sass, you can nest CSS rules inside each other instead of repeating selectors in separate declarations. The nesting also reflects the markup structure.

SASS SCRIPT (INPUT)

01 script-tutorials[play="slide"]
02 margin: 20px 0 30px 0
03 border-bottom: 4px solid #333
04 #company-icon
05 float: left
06 margin: 0 20px 0 0
07 img
08 display: block
09 opacity: .95
10 h2
11 padding: 15px 0
12 font-size: 54px
13 line-height: 1
14 font-family: Jubilat, Georgia, serif
15 font-weight: bold

CSS SCRIPT OUTPUT (result)

01 script-tutorials[play="slide"] {
02 margin: 20px 0 30px 0;
03 border-bottom: 4px solid #333;
04 }
05 script-tutorials[play="slide"] #company-icon {
06 float: left;
07 margin: 0 20px 0 0;
08 }
09 script-tutorials[play="slide"] #company-icon img {
10 display: block;
11 opacity: 0.95;
12 }
13 script-tutorials[play="slide"] h2 {
14 padding: 15px 0;
15 font-size: 54px;
16 line-height: 1;
17 font-family: Jubilat, Georgia, serif;
18 font-weight: bold;
19 }

Nesting namespaced properties
In addition to nesting rules, you can nest properties such as text properties, font properties and background properties that share a namespace in Sass.

SASS SCRIPT (INPUT)

01 script-tutorials[play="slide"] h2
02 padding: 15px 0
03 font:
04 size: 54px
05 family: Jubilat, Georgia, serif
06 weight: bold
07 line-height: 1
08 text:
09 transform: uppercase
10 decoration: underline
11 align: center
12 background:
13 color: #ea4c89
14 size: 16px 16px
15 image: url(script_tutorial.png)
16 repeat: no-repeat
17 position: top left

CSS SCRIPT COMPILED (result)

01 script-tutorials[play="slide"] h2 {
02 padding: 15px 0;
03 font-size: 54px;
04 font-family: Jubilat, Georgia, serif;
05 font-weight: bold;
06 line-height: 1;
07 text-transform: uppercase;
08 text-decoration: underline;
09 text-align: center;
10 background-color: #ea4c89;
11 background-size: 16px 16px;
12 background-image: url(script_tutorial.png);
13 background-repeat: no-repeat;
14 background-position: top left;
15 }

Referencing Parent Selectors With &
Sass adds the ability to reference the current parent selector using the ampersand as a special placeholder.

SASS SCRIPT (INPUT)

01 a
02 font-weight: bold
03 text-decoration: none
04 &:link
05 color: #0093dd
06 &:visited
07 color: #45a5d6
08 &:hover, &:active, &:focus
09 color: #02608f
10 text-decoration: underline
11 nav.sub p
12 margin: 0 0 20px 0
13 font-size: 18px
14 line-height: 1.5
15 body.catalogue &
16 font-size: 16px
17 line-height: 1.4

CSS SCRIPT COMPILED (result)

01 a {
02 font-weight: bold;
03 text-decoration: none;
04 }
05 a:link {
06 color: #0093dd;
07 }
08 a:visited {
09 color: #45a5d6;
10 }
11 a:hover, a:active, a:focus {
12 color: #02608f;
13 text-decoration: underline;
14 }
15 nav.sub p {
16 margin: 0 0 20px 0;
17 font-size: 18px;
18 line-height: 1.5;
19 }
20 body.catalogue nav.sub p {
21 font-size: 16px;
22 line-height: 1.4;
23 }

HOW TO COMMENT IN SASS

To comment in css using sass we have two kinds of comments in stylesheet multi-line comments and single-line comments.
MULTI-LINE COMMENTS
for multi-line comments in .sass that will appear in .css

SASS COMMENT SCRIPT (INPUT)

1 /* This is a multi-line comment that will appear in the output file.css */

CSS COMMENT (OUTPUT) RESULT

1 /* This is a multi-line comment that will appear in the output file.css */

You can ensure important comments (copyright info, attribution, notes on hacks, etc.) appear in the compressed style output by inserting an ! as the first character of the comment:
/*! This is a multi-line comment that will appear in the final .css file. Even in compressed style.*/

SINGLE-LINE COMMENTS
for single-line comments in .sass that will not appear in .css use //
this comments aren’t included in the final output .css file, so you can safely implement them for private comments in .sass file:

1 // This is a single-line comment.
2 // Single-line comments are removed from the .css file.
3 // So you can say whatever you'd like here.
4 // Confession: I genuinely enjoy developing and design with sass.
5 // And Less.

VARIABLES

Variables in Sass are defined regularly using the $.

SASS SCRIPT

01 //  VARIABLES IN SASS
02 $paint-main: #333
03 $paint-light: #999
04 $paint-accent: #ea4c89
05 $font-sans: "Proxima Nova", "Helvetica Neue", » Helvetica, Arial, sans-serif
06 $font-serif: Jubilat, Georgia, serif
07 body
08 padding: 0 8%
09 font-family: $font-sans
10 font-size: 100%
11 paint: $paint-main
12 background: #fff url(../img/bg.jpg) repeat-x -80% 0

COMPILED .css SCRIPT

1 @charset "UTF-8";
2 body {
3 padding: 0 8%;
4 font-family: "Proxima Nova", "Helvetica Neue", T¬ Helvetica, Arial, sans-serif;
5 font-size: 100%;
6 paint: #333;
7 background: #fff url(../img/bg.jpg) repeat-x -80% 0;
8 }

MIXINS

Mixin is another feature of sass which make craft styling in web design sweet and professional it is usually defined @mixin directive at the top of the .sass file and summon up in the same .sass file using @include .

SIMPLE MIXINS SASS SCRIPT

01 $font-serif: san serif
02 @mixin article-titles
03 margin: 0 0 20px 0
04 font-family: $font-serif
05 font-size: 20px
06 font-weight: bold
07 text-transform: uppercase
08 div.main h2
09 @include article-titles
10 color: #999

COMPILED .css SCRIPT

1 div.main h2 {
2 margin: 0 0 20px 0;
3 font-family: san serif;
4 font-size: 20px;
5 font-weight: bold;
6 text-transform: uppercase;
7 color: #999;
8 }

MIXIN ARGUMENTS

SINGLE ARGUMENT SASS SCRIPT

01 @mixin wrap-ping($paint-wrapper)
02 width: 100%
03 min-width: 740px
04 max-width: 1000px
05 margin:
06 left: auto
07 right: auto
08 background-color: $paint-wrapper
09 #wrapper
10 @include wrap-ping(#FFFFFF)

COMPILED .css SCRIPT

1 #wrapper {
2 width: 100%;
3 min-width: 740px;
4 max-width: 1000px;
5 margin-left: auto;
6 margin-right: auto;
7 background-color: #FFFFFF;
8 }

MULTIPLE ARGUMENT SASS SCRIPT

01 @mixin article-heads($color, $background)
02 margin: 0 0 20px 0
03 font-family: Helvetica, san serif
04 font-size: 20px
05 font-weight: bold
06 text-transform: uppercase
07 color: $color
08 background: $background
09 div.emph h2
10 @include article-heads(#f00, #000)

COMPILED .css SCRIPT

1 div.emph h2 {
2 margin: 0 0 20px 0;
3 font-family: Helvetica, san serif;
4 font-size: 20px;
5 font-weight: bold;
6 text-transform: uppercase;
7 color: #f00;
8 background: #000;
9 }

SASS USER DEFINED MIXINS DEFAULT ARGUMENTS

SASS SCRIPT

01 @mixin article-heads($paint, $back-color: #FF0)
02 margin: 0 0 20px 0
03 font-family: Helvetica, san serif
04 font-size: 20px
05 font-weight: bold
06 text-transform: uppercase
07 color: $paint
08 background: $back-color
09 div.emph h2
10 @include article-heads(#24A)
11 div.readmore p 
12 @include article-heads(#f201b1,#01c2f2)

COMPILED .css SCRIPT

01 div.emph h2 {
02 margin: 0 0 20px 0;
03 font-family: Helvetica, san serif;
04 font-size: 20px;
05 font-weight: bold;
06 text-transform: uppercase;
07 color: #24A;
08 background: #FF0;
09 }
10 div.readmore p {
11 margin: 0 0 20px 0;
12 font-family: Helvetica, san serif;
13 font-size: 20px;
14 font-weight: bold;
15 text-transform: uppercase;
16 color: #f201b1;
17 background: #01c2f2;
18 }

MIXIN LIBRARY

@import
Import is defined in sass using @

SASS SCRIPT IN RESET.SASS

01 @mixin linear-gradient($from, $to)
02 /* Fallback for sad browsers */
03 background-color: $to
04 /* Mozilla Firefox */
05 background-image:    -moz-linear-gradient($from, $to)
06 /* Opera */
07 background-image:      -o-linear-gradient($from, $to)
08 /* WebKit (Safari 4+, Chrome 1+) */
09 background-image:        -webkit-gradient(linear, »left top, left bottom, color-stop(0, $from), »color-stop(1, $to))
10 /* WebKit (Chrome 11+) */
11 background-image: -webkit-linear-gradient($from, $to)
12 /* IE10 */
13 background-image:     -ms-linear-gradient($from, $to)
14 /* W3C */
15 background-image:         linear-gradient($from, $to)

SASS SCRIPT IN MIXINS.SASS

01 @mixin rounded($radius)
02 -webkit-border-radius: $radius
03 -moz-border-radius: $radius
04 border-radius: $radius
05 @mixin shadow($x, $y, $blur, $color)
06 -webkit-box-shadow: $x $y $blur $color
07 -moz-box-shadow: $x $y $blur $color
08 box-shadow: $x $y $blur $color
09 @mixin shadow-inset($x, $y, $blur, $color)
10 -webkit-box-shadow: inset $x $y $blur $color
11 -moz-box-shadow: inset $x $y $blur $color
12 box-shadow: inset $x $y $blur $color
13 @mixin transition($property)
14 -webkit-transition: $property .2s ease
15 -moz-transition: $property .2s ease
16 -o-transition: $property .2s ease
17 transition: $property .2s ease
18 @mixin box-sizing
19 -webkit-box-sizing: border-box
20 -moz-box-sizing: border-box
21 box-sizing: border-box

SASS SCRIPT IN VARIABLES.SASS

1 $color-accent: #FF0

To import the variable and mixins in reset, mixins and variables sass file into main.sass we define import using @.

SASS SCRIPT IN MAIN.SASS

SASS SCRIPT

01 // Import other files
02 @import "mixins.sass"
03 @import "reset.sass"
04 @import "variables.sass"
05 // Site-specific styles
06 .alert
07 padding: 15px
08 font-size: 1.2em
09 font-weight: normal
10 text-transform: uppercase
11 line-height: 1
12 letter-spacing: 3px
13 text-align: center
14 color: #fff
15 @include shadow(0, 1px, 2px, rgba(0,0,0,.5))
16 @include rounded(10px)
17 .alert-positive
18 background: #9c3

COMPILED .css SCRIPT

01 .alert {
02 padding: 15px;
03 font-size: 1.2em;
04 font-weight: normal;
05 text-transform: uppercase;
06 line-height: 1;
07 letter-spacing: 3px;
08 text-align: center;
09 color: #fff;
10 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
11 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
12 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
13 -webkit-border-radius: 10px;
14 -moz-border-radius: 10px;
15 border-radius: 10px;
16 }
17 .alert-positive {
18 background: #9c3;
19 }

@EXTEND

Using @extend function in sass Instead of littering the markup with extra classes to handle those small exceptions, to “chain together” styles that are shared amongst multiple selectors.

SASS SCRIPT

01 // Import other files
02 @import "mixins.sass"
03 @import "reset.sass"
04 @import "variables.sass"
05 // Site-specific styles
06 .alert
07 padding: 15px
08 font-size: 1.2em
09 font-weight: normal
10 text-transform: uppercase
11 line-height: 1
12 letter-spacing: 3px
13 text-align: center
14 color: #fff
15 @include shadow(0, 1px, 2px, rgba(0,0,0,.5))
16 @include rounded(10px)
17 .alert-positive
18 @extend .alert
19 background: #9c3

COMPILED .css SCRIPT

01 .alert, .alert-positive {
02 padding: 15px;
03 font-size: 1.2em;
04 font-weight: normal;
05 text-transform: uppercase;
06 line-height: 1;
07 letter-spacing: 3px;
08 text-align: center;
09 color: #fff;
10 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
11 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
12 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
13 -webkit-border-radius: 10px;
14 -moz-border-radius: 10px;
15 border-radius: 10px;
16 }
17 .alert-positive {
18 background: #9c3;
19 }

Multiple @extends

SASS SCRIPT

01 // Import other files
02 @import "mixins.sass"
03 @import "reset.sass"
04 @import "variables.sass"
05 // Site-specific styles
06 .alert
07 padding: 15px
08 font-size: 1.2em
09 text-align: center
10 background: $color-accent
11 .important
12 font-size: 4em
13 .alert-positive
14 @extend .alert
15 @extend .important
16 background: #9c3

COMPILED .css SCRIPT

01 .alert, .alert-positive {
02 padding: 15px;
03 font-size: 1.2em;
04 text-align: center;
05 background: #FF0;
06 }
07 .important, .alert-positive {
08 font-size: 4em;
09 }
10 .alert-positive {
11 background: #9c3;
12 }

Using placeholder selectors with @extend
Placeholder is define using %

SASS SCRIPT

01 // Import other files
02 @import "mixins.sass"
03 @import "reset.sass"
04 @import "variables.sass"
05 // Site-specific styles
06 // Using placeholder selectors defINED USING % with @extend
07 %button
08 padding: 10px
09 font-weight: bold
10 background: blue
11 border-radius: 6px
12 .buy
13 @extend %button
14 .submit
15 @extend %button
16 background: green

COMPILED .css SCRIPT

1 .buy, .submit {
2 padding: 10px;
3 font-weight: bold;
4 background: blue;
5 border-radius: 6px;
6 }
7 .submit {
8 background: green;
9 }

Thanks for reading see you in the next tutorials

Live Demo