SASS / SCSS goodness!!!

Examples of SCSS:


// Importing the "partials"
@import "_variables";
@import "_mixins";

body {
    font-size: $my-font-size;
    font: $font-stack;
}

// using the mixin
.box {
    @include border-radius(10px);
}

// Extending the functionality by @extend
.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

// Operators
h1 {
    font-size: $my-font-size + 10px;
}

// if conditions
p {
    @if 1 + 1 == 2 { border: 1px solid;  }
    @if 5 < 3      { border: 2px dotted; }
    @if null       { border: 3px double; }
}

$type: 1;
p {
    @if $type == 1 {
        color: blue;
    } @else if $type == 2 {
        color: red;
    } @else if $type == 3 {
        color: green;
    } @else {
        color: black;
    }
}

// For loop
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}


// For each
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}


// ---> For each with multiple assignment
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}


// While loop
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

/*
STRING REPLACEMENT FUNCTIONS
===============================
str-length: like length but for strings
str-slice: slicing a string from index A to index B
str-insert: insert a string in a string at index A`
str-index: finds first occurence of string in string
to_lower_case: move a whole string to lower case
*/

@each $person in rahman, maria, hosha, roya {
    ##{$person} {
        @if str-index($person, "r") == 1 { // IF STARTS WITH R
            background-color: red;
        }
    }
}


Complied to:

/* line 10, D:/rahman/Tpg_Design/_mixins.scss */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

/* line 16, D:/rahman/Tpg_Design/_mixins.scss */
.success {
  border-color: green; }

/* line 21, D:/rahman/Tpg_Design/_mixins.scss */
.error {
  border-color: red; }

/* line 26, D:/rahman/Tpg_Design/_mixins.scss */
.warning {
  border-color: yellow; }

/* line 5, D:/rahman/Tpg_Design/mysass.scss */
body {
  font-size: 15px;
  font: Helvetica, sans-serif; }

/* line 11, D:/rahman/Tpg_Design/mysass.scss */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

/* line 16, D:/rahman/Tpg_Design/mysass.scss */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

/* line 22, D:/rahman/Tpg_Design/mysass.scss */
.success {
  border-color: green; }

/* line 27, D:/rahman/Tpg_Design/mysass.scss */
.error {
  border-color: red; }

/* line 32, D:/rahman/Tpg_Design/mysass.scss */
.warning {
  border-color: yellow; }

/* line 38, D:/rahman/Tpg_Design/mysass.scss */
h1 {
  font-size: 25px; }

/* line 43, D:/rahman/Tpg_Design/mysass.scss */
p {
  border: 1px solid; }

/* line 50, D:/rahman/Tpg_Design/mysass.scss */
p {
  color: blue; }

/* line 63, D:/rahman/Tpg_Design/mysass.scss */
.item-1 {
  width: 2em; }

/* line 63, D:/rahman/Tpg_Design/mysass.scss */
.item-2 {
  width: 4em; }

/* line 63, D:/rahman/Tpg_Design/mysass.scss */
.item-3 {
  width: 6em; }

/* line 69, D:/rahman/Tpg_Design/mysass.scss */
.puma-icon {
  background-image: url("/images/puma.png"); }

/* line 69, D:/rahman/Tpg_Design/mysass.scss */
.sea-slug-icon {
  background-image: url("/images/sea-slug.png"); }

/* line 69, D:/rahman/Tpg_Design/mysass.scss */
.egret-icon {
  background-image: url("/images/egret.png"); }

/* line 69, D:/rahman/Tpg_Design/mysass.scss */
.salamander-icon {
  background-image: url("/images/salamander.png"); }

/* line 79, D:/rahman/Tpg_Design/mysass.scss */
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default; }

/* line 79, D:/rahman/Tpg_Design/mysass.scss */
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer; }

/* line 79, D:/rahman/Tpg_Design/mysass.scss */
.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; }

/* line 90, D:/rahman/Tpg_Design/mysass.scss */
.item-6 {
  width: 12em; }

/* line 90, D:/rahman/Tpg_Design/mysass.scss */
.item-4 {
  width: 8em; }

/* line 90, D:/rahman/Tpg_Design/mysass.scss */
.item-2 {
  width: 4em; }

/*
STRING REPLACEMENT FUNCTIONS
===============================
str-length: like length but for strings
str-slice: slicing a string from index A to index B
str-insert: insert a string in a string at index A`
str-index: finds first occurence of string in string
to_lower_case: move a whole string to lower case
*/
/* line 105, D:/rahman/Tpg_Design/mysass.scss */
#rahman {
  background-color: red; }

/* line 105, D:/rahman/Tpg_Design/mysass.scss */
#roya {
  background-color: red; }

/* Testings */
background-color: aquamarine;
/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item1 {
  font-size: 1px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item2 {
  font-size: 2px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item3 {
  font-size: 3px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item4 {
  font-size: 4px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item5 {
  font-size: 5px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item6 {
  font-size: 6px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item7 {
  font-size: 7px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item8 {
  font-size: 8px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item9 {
  font-size: 9px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item10 {
  font-size: 10px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item11 {
  font-size: 11px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item12 {
  font-size: 12px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item13 {
  font-size: 13px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item14 {
  font-size: 14px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item15 {
  font-size: 15px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item16 {
  font-size: 16px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item17 {
  font-size: 17px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item18 {
  font-size: 18px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item19 {
  font-size: 19px; }

/* line 121, D:/rahman/Tpg_Design/mysass.scss */
.item20 {
  font-size: 20px; }

/* line 127, D:/rahman/Tpg_Design/mysass.scss */
#rahman {
  background-color: red; }

/* line 127, D:/rahman/Tpg_Design/mysass.scss */
#roya {
  background-color: red; }

/*# sourceMappingURL=mysass.css.map */