Sass features

gistfile1.scss

// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----

/* 1. reference symbol ( & ) */
/* you are probably familiar with reference symbol which allows you 
   to reference a parent element: */
   
.block { 
  &.red { 
      color: red;
  }
}

/* but you can also put it after some class which can be very usefull while
   facing some IE related issues: */

.block{
  .ie7 &.red{
      color: green;
  }
}

/* 2. partials and @import directive */
/* There is this convention in rails world to add a controller name and controller
   action to a body tag or site #main tag. Which is good of course. However sometimes
   developers tend to reflect html structure inside css in a wrong way: */

/* posts.scss */
.posts{
  &.show{
    div.posts_list{
      div.post{
        background: whitesmoke;
        p.post_title{
          font-size: 16px;
        }
      }
    }
  }
}

/*  which causes clutter and overqualified selectors. 

    Avoiding nesting selectors makes code more modular.
    Personally I believe that we should nest no deeper then to the third level.
    I also like to divide my code into smaller particles and group them like so:
    +-modules
    | +-_post.scss
    +-view
    |   +-views.scss
    |   +-rails_views
    |     +-_posts_controller.scss
    |   +-responsive
    |     +-tablet
    |     +-mobile
    .
*/

/*  _posts_controller.scss */
.posts{
  &.show{
    .post { 
      /* view specific styles */
    }
  }
}

/*  _post.scss */
.post {
  bacgkround: whitesmoke;
}
  .post__title{ 
    font-size: 16px;
  }

/* application.scss */
// @import 'modules/*';
// @import 'rails_views/posts/views';

/* Also in this way we can abstract and keep separeted other code bits like
   mixins, settings (defined variables), etc. */

/* 3. interpolation */
/* We can define an element in a variable and interpolate it inside our sass code.
   It's useful when you keep your modules in separeted files.*/
   
$el : "post";
.#{$el} { 
    background: blue;
    & .#{$el}__title {
        background: red;
    }
}

/*  this is only good if we want to nest elements inside each other.
    Personally I like BEM syntax and prefer to 'nest' selectors using indentation  */
/* _post.scss */
$el : "post";
.#{$el} { 
    background: blue;
}
    .#{$el}__title {
        background: red;
    }

/* 4. @content */
/* Since 3.2.0 we can pass a code block into a mixin */

@mixin you-can-do-it {
    @content;
}

@include you-can-do-it {
  .yes-you-can { color: red }
}

/* This can be very helpfull in situations where 
   content depends on what you are fighting with*/
   
@mixin fight-with($monster) {
  @if $monster == mechagodzilla {
    .post__title{ &:after { @content } }
  }
  @else if $monster == spacegodzilla {
    @content; 
  }
}

.post--mechagodzilla {
  @include fight-with(mechagodzilla) { content: 'fight with lightning' }
}
.post--spacegodzilla {
  @include fight-with(spacegodzilla) { content: 'fight with Armageddon'; .post_title:after{ content: ":)"} }
}

/* This can be very useful when struggling with different devices 
more on that subject can be found here : http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
*/

/* 5. %placeholder */
/* It's useful when you want to write styles that ment to be extended but you don't want 
the base styles to be seen in output css styles (oposite to extending classes). */

%post-skeletor{ 
    font:{ size: 12; weight: 700;}
    box-sizing: border-box;
    padding: 5px;
    margin: 10px;
    border: 1px solid whitesmoke;
}

.post {
    font:{ size: 12; weight: 700;}
    box-sizing: border-box;
    padding: 5px;
    margin: 10px;
    border: 1px solid whitesmoke;
}

.post--first {
    @extend %post-skeletor;
    background: yellow;
}

.post--second{
    @extend .post;
    background: yellow;
}

/* Great example of placeholder usage as Ian Storm Taylor mentioned
is the 'golden child' of OOCSS - media object. You can reed more about it here: 
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ */

/* 6. Functions */
/* Sass has a build in set of functions some of them are related to color,
   some of them are related to strings and some of them are related to numbers */
   
.post--big{
  width: percentage(.5);
  font-size: max(12px, 14px, 16px);
  background: rgba(231, 0.8, 2, .8);
}
  $title: 'This is title';
  .post__title{
      content: quote($title);
  }
.post--small{
 $a: 10;
 content: if($a > 200, 'chuj', 'dupa') ;
}

/* There is also an 'if' function */


/* Full list of available sass functions can be found here: 
https://github.com/nex3/sass/blob/stable/lib/sass/script/functions.rb
if we switch to master branch (https://github.com/nex3/sass/blob/master/lib/sass/script/functions.rb)
we can notice that we have some new functions added for the next sass 3.3 release, i.e. 
to_lowe_case, to_upper_case, str_slice, str_length etc. We also have functions to operate
on lists like join, zip, index or nth */

/* You can also define your own functions like so: */

@function double($variable){
 @return $variable *2;
}

.post{
  font-size: double(2px);
}

/* 7. Lists and @each directive */

/* Lists are an old feature of Sass, alone they can't do much  */

$font-list: Helvetica, Arial, sans-serif;

.post {
    font-family: $font-list;
}

/* However when combined with list functions (join, lenght, nth, append) and @each directive things 
   get more interesting, perfect example for list usage are sprite icons */
   
$icons: smile, poop, godzilla;
@each $icon in $icons {
  .icon-#{$icon} { background-image: url('/icons/#{$icon}.png') }   
}

/* More advanced example is presented by Dale Sande and can be found here : 
http://blackfalcon.roughdraft.io/4653730 . */

SassMeister-output.css

/* 1. reference symbol ( & ) */
/* you are probably familiar with reference symbol which allows you 
   to reference a parent element: */
.block.red {
  color: red;
}

/* but you can also put it after some class which can be very usefull while
   facing some IE related issues: */
.ie7 .block.red {
  color: green;
}

/* 2. partials and @import directive */
/* There is this convention in rails world to add a controller name and controller
   action to a body tag or site #main tag. Which is good of course. However sometimes
   developers tend to reflect html structure inside css in a wrong way: */
/* posts.scss */
.posts.show div.posts_list div.post, .posts.show div.posts_list div.post--second {
  background: whitesmoke;
}
.posts.show div.posts_list div.post p.post_title, .posts.show div.posts_list div.post--second p.post_title {
  font-size: 16px;
}

/*  which causes clutter and overqualified selectors. 

    Avoiding nesting selectors makes code more modular.
    Personally I believe that we should nest no deeper then to the third level.
    I also like to divide my code into smaller particles and group them like so:
    +-modules
    | +-_post.scss
    +-view
    |   +-views.scss
    |   +-rails_views
    |     +-_posts_controller.scss
    |   +-responsive
    |     +-tablet
    |     +-mobile
    .
*/
/*  _posts_controller.scss */
.posts.show .post, .posts.show .post--second {
  /* view specific styles */
}

/*  _post.scss */
.post, .post--second {
  bacgkround: whitesmoke;
}

.post__title {
  font-size: 16px;
}

/* application.scss */
/* Also in this way we can abstract and keep separeted other code bits like
   mixins, settings (defined variables), etc. */
/* 3. interpolation */
/* We can define an element in a variable and interpolate it inside our sass code.
   It's useful when you keep your modules in separeted files.*/
.post, .post--second {
  background: blue;
}
.post .post__title, .post--second .post__title {
  background: red;
}

/*  this is only good if we want to nest elements inside each other.
    Personally I like BEM syntax and prefer to 'nest' selectors using indentation  */
/* _post.scss */
.post, .post--second {
  background: blue;
}

.post__title {
  background: red;
}

/* 4. @content */
/* Since 3.2.0 we can pass a code block into a mixin */
.yes-you-can {
  color: red;
}

/* This can be very helpfull in situations where 
   content depends on what you are fighting with*/
.post--mechagodzilla .post__title:after {
  content: "fight with lightning";
}

.post--spacegodzilla {
  content: 'fight with Armageddon';
}
.post--spacegodzilla .post_title:after {
  content: ":)";
}

/* This can be very useful when struggling with different devices 
more on that subject can be found here : http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
*/
/* 5. %placeholder */
/* It's useful when you want to write styles that ment to be extended but you don't want 
the base styles to be seen in output css styles (oposite to extending classes). */
.post--first {
  font-size: 12;
  font-weight: 700;
  box-sizing: border-box;
  padding: 5px;
  margin: 10px;
  border: 1px solid whitesmoke;
}

.post, .post--second {
  font-size: 12;
  font-weight: 700;
  box-sizing: border-box;
  padding: 5px;
  margin: 10px;
  border: 1px solid whitesmoke;
}

.post--first {
  background: yellow;
}

.post--second {
  background: yellow;
}

/* Great example of placeholder usage as Ian Storm Taylor mentioned
is the 'golden child' of OOCSS - media object. You can reed more about it here: 
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ */
/* 6. Functions */
/* Sass has a build in set of functions some of them are related to color,
   some of them are related to strings and some of them are related to numbers */
.post--big {
  width: 50%;
  font-size: 16px;
  background: rgba(231, 0, 2, 0.8);
}

.post__title {
  content: "This is title";
}

.post--small {
  content: "dupa";
}

/* There is also an 'if' function */
/* Full list of available sass functions can be found here: 
https://github.com/nex3/sass/blob/stable/lib/sass/script/functions.rb
if we switch to master branch (https://github.com/nex3/sass/blob/master/lib/sass/script/functions.rb)
we can notice that we have some new functions added for the next sass 3.3 release, i.e. 
to_lowe_case, to_upper_case, str_slice, str_length etc. We also have functions to operate
on lists like join, zip, index or nth */
/* You can also define your own functions like so: */
.post, .post--second {
  font-size: 4px;
}

/* 7. Lists and @each directive */
/* Lists are an old feature of Sass, alone they can't do much  */
.post, .post--second {
  font-family: Helvetica, Arial, sans-serif;
}

/* However when combined with list functions (join, lenght, nth, append) and @each directive things 
   get more interesting, perfect example for list usage are sprite icons */
.icon-smile {
  background-image: url("/icons/smile.png");
}

.icon-poop {
  background-image: url("/icons/poop.png");
}

.icon-godzilla {
  background-image: url("/icons/godzilla.png");
}

/* More advanced example is presented by Dale Sande and can be found here : 
http://blackfalcon.roughdraft.io/4653730 . */