Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

/* 1. & - Reference symbol */

.block { 
  background: white;
  & .red { 
    color: red;
  }
}

.block2 {
  background: black;
  .ie8 & .red { 
    color: blue;
  }
}

/* 2. zmienne i listy */

$basic-padding: '10px 5px 2px 1px';
$sprite-icons: 'boy', 'girl', 'dog';
$sprite-icons2: 'boy' 'girl' 'dog';
$font: Helvetica, Arial, sans-serif;


/* 3. @extend 
   3.a extending classes (the bad way) */

.button { 
  border: 1px solid ;
  padding: 10px;
}
.button--big { 
  @extend .button;
  padding: 20px;
}


/* 3.b extending placeholders (the good way) */
%icon {
  background: image-url('http://www.web2generators.com/application/img/sprite-sample.png') no-repeat 0 0;
  width: 40px;
  height: 40px;
  display: inline-block;
}

.icon--fire {
  @extend %icon;
}
.icon--rain {
  @extend %icon;
  background-position: 0 10px;
}


/* 4. mixins - warto używać, jeśli */
// masz powtarzalny kod, który nie uważasz za 'obiekt' jako osobny


@mixin clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container { 
  @include clearfix;  
}


// oraz vendor-prefixes
@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
  -moz-box-sizing: $box-model; // Firefox <= 19
  box-sizing: $box-model;
}

.article {
  @include box-sizing(border-box);
}


// albo jeśli nie chce nam się dużo pisać :)
@mixin letterpress($opacity){
    text-shadow:white($opacity) 0 1px 0;
}

.nav__title { 
  @include letterpress(0.2);
}

// więcej przydatnych usecasów http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

/* 5. functions */
.post--big{
  width: percentage(.5);
  font-size: max(12px, 14px, 16px);
  background: rgba(231, 0.8, 2, .8);
}

@function fibonacci($n) {
  $fib: 0 1;
  @for $i from 1 through $n {
    $new: nth($fib, length($fib)) + nth($fib, length($fib) - 1);
    $fib: append($fib, $new);
  }
  @return $fib;
}

$fib: fibonacci(10);
// -> 0 1 1 2 3 5 8 13 21 34 55 89

@function prepend($list, $value) {
  @return join($value, $list);
}

$list: b, c, d, e, f;
$new-list: prepend($list, a); 
$abother-list: reject($list, f);

// http://sass-lang.com/documentation/Sass/Script/Functions.html
// http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
// http://hugogiraudel.com/ <- swir, robi cuda z sassem


/* 6. interpolacja */
// w sassie możemy interpolować zmienne

$zmienna: 'dupa';
.button--#{$zmienna} {
  background: khaki;
}

/* 7. control directives */
// http://flippinawesome.org/2014/03/03/getting-into-sass-control-directives
// mamy do dyspozycji @if, @for, @each, @while...

$heading-base-font-size: 36px;

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $heading-base-font-size - 4 * $i;
  }
}

$sides: bottom left right top;
$border-color: #f00;
@each $first_side in $sides {
  .border-#{$first_side} {
    border-#{$first_side}: 1px solid $border-color;
  }
  @each $second_side in $sides {
    @if $first_side != $second_side {
      .border-#{$first_side}-#{$second_side} {
        border-#{$first_side}: 1px solid $border-color;
        border-#{$second_side}: 1px solid $border-color;
      }
    }
  }
}



/* 8. content directive ! */

@mixin apply-to-ie7-only {
  &.ie7{  @content; }
}

.body {
  @include apply-to-ie7-only {
    #logo {
      background-image: url(/logo.gif);
    }
  }
}

/* 9. podstawy, bad and good practices - dyskusja ;) */

/*  - zastanowić się nad designem przed rozpoczęciem projektu
    - czy czasami projekt nie wymaga podejścia mobile first?
    - jasno określić breakpointy, żeby designerzy nie robili sobie jaj
    - również w Twoim interesie jest, żeby designerzy trzymali się ustalonych zasad, 
      jak widzisz na 3 designie inny font-size dla h2 - zgłoś to
    - przejrzeć designy, wyłapać powtarzające się moduły, zbudować z nich styleguide
     bibliotekę modułów 
    - p.selector - overqualified selectors - zbyt specyficzne selektory
    - nie zagnieżdżać głębiej niż 3 (inception rule) */
    
.dupa { 
  .zbita {
    .jesli {
      .widzisz {
        .cos{
          .takiego {
            background: gnoj;
          }
        }
      }
    }
  }
}
/*  - zamiast zagnieżdżać w sobie, lepiej odzwierciedlić strukturę htmla
.post {}
  .post__title {}
  .post__body {}
  .post__details {}
    .post__timestamp {}
    
/* - nie stylować po idkach, no moze w wyjątkowych sytuacjach */

/* siła selektorów */
/* a b c d 
a - !important, inline style
b - id selector
c - class selectors, attributes selectors, and pseudo-classes in the selector
d - type selectors and pseudo-elements in the selector
*/
// 0 0 2 0
.dupa .blada{
  background: pink;  
};

// 0 1 2 0 
#container .dupa .blada {
  background: khaki;
}

// http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
/* - używać miksinów do powtarzających się cząstek kodu */

/* - nie mieszać kodu klas styli z klasami js */
.button.js-clickable {};

/* 10. @import and partials */
// zamiast Sprockets Directives
/* webs.scss */
/* @import 'modules/post'; */

/* modules/_post.scss */

// tutaj więcej dlaczego warto korzystać z @import 
// http://pivotallabs.com/structure-your-sass-files-with-import/
// w skrócie
// * sass import tworzy globalny namespace w którym przechowuje zmienne itd.
// * dzieki czemu nie musimy importować zmiennych w każdym pliku - szybsze
// * _partiale.scss nie są kompilowane do cssa, są ładowane i potem kompilowane, magia 

/* 11. BEM */

.block {};
  .block__element {};
  .block__element--modifier {};

// since sass 3.3

.block {
  &__element {}
  &--modifier {}
}

/* 12. struktura plików / modularyzacja */
// tutaj jest wiele podejść i każde, które będzie wprowadzało jakąś sensowną granularyzacje się sprawdzi prawdopodobnie
// ja lubię mieć mniej więcej coś takiego: ...

/* - settings <- zmienne, ustawienia fontów, itp.
   - utilities <- mixiny / funkcje / generalnie narzędzie
   - modules/components <- małe bloki, które można wykorzystać kilka razy w apce
   - views <- cssy które są specyficzne dla danego widoku/layoutu
   - shame.scss <- jeżeli wiesz, że robisz coś słabo, nie wrzucaj w style, wrzuć do shame, będziesz wiedział, że coś jest do poprawy i bedziesz widział ile tego jest


/* 13. propozycja użycia tego w SPA */

// mobile/activities.coffee
// mobile/activity.hbs
// mobile/activity.scss

SassMeister-output.css

@charset "UTF-8";
/* 1. & - Reference symbol */
.block {
  background: white;
}
.block .red {
  color: red;
}

.block2 {
  background: black;
}
.ie8 .block2 .red {
  color: blue;
}

/* 2. zmienne i listy */
/* 3. @extend 
   3.a extending classes (the bad way) */
.button, .button--big {
  border: 1px solid;
  padding: 10px;
}

.button--big {
  padding: 20px;
}

/* 3.b extending placeholders (the good way) */
.icon--fire, .icon--rain {
  background: url(http://www.web2generators.com/application/img/sprite-sample.png) no-repeat 0 0;
  width: 40px;
  height: 40px;
  display: inline-block;
}

.icon--rain {
  background-position: 0 10px;
}

/* 4. mixins - warto używać, jeśli */
.container:before, .container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}

.article {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav__title {
  text-shadow: white(0.2) 0 1px 0;
}

/* 5. functions */
.post--big {
  width: 50%;
  font-size: 16px;
  background: rgba(231, 0, 2, 0.8);
}

/* 6. interpolacja */
.button--dupa {
  background: khaki;
}

/* 7. control directives */
h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 12px;
}

.border-bottom {
  border-bottom: 1px solid red;
}

.border-bottom-left {
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}

.border-bottom-right {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
}

.border-bottom-top {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

.border-left {
  border-left: 1px solid red;
}

.border-left-bottom {
  border-left: 1px solid red;
  border-bottom: 1px solid red;
}

.border-left-right {
  border-left: 1px solid red;
  border-right: 1px solid red;
}

.border-left-top {
  border-left: 1px solid red;
  border-top: 1px solid red;
}

.border-right {
  border-right: 1px solid red;
}

.border-right-bottom {
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}

.border-right-left {
  border-right: 1px solid red;
  border-left: 1px solid red;
}

.border-right-top {
  border-right: 1px solid red;
  border-top: 1px solid red;
}

.border-top {
  border-top: 1px solid red;
}

.border-top-bottom {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.border-top-left {
  border-top: 1px solid red;
  border-left: 1px solid red;
}

.border-top-right {
  border-top: 1px solid red;
  border-right: 1px solid red;
}

/* 8. content directive ! */
.body.ie7 #logo {
  background-image: url(/logo.gif);
}

/* 9. podstawy, bad and good practices - dyskusja ;) */
/*  - zastanowić się nad designem przed rozpoczęciem projektu
    - czy czasami projekt nie wymaga podejścia mobile first?
    - jasno określić breakpointy, żeby designerzy nie robili sobie jaj
    - również w Twoim interesie jest, żeby designerzy trzymali się ustalonych zasad, 
      jak widzisz na 3 designie inny font-size dla h2 - zgłoś to
    - przejrzeć designy, wyłapać powtarzające się moduły, zbudować z nich styleguide
     bibliotekę modułów 
    - p.selector - overqualified selectors - zbyt specyficzne selektory
    - nie zagnieżdżać głębiej niż 3 (inception rule) */
.dupa .zbita .jesli .widzisz .cos .takiego {
  background: gnoj;
}

/*  - zamiast zagnieżdżać w sobie, lepiej odzwierciedlić strukturę htmla
.post {}
  .post__title {}
  .post__body {}
  .post__details {}
    .post__timestamp {}
    
/* - nie stylować po idkach, no moze w wyjątkowych sytuacjach */
/* siła selektorów */
/* a b c d 
a - !important, inline style
b - id selector
c - class selectors, attributes selectors, and pseudo-classes in the selector
d - type selectors and pseudo-elements in the selector
*/
.dupa .blada {
  background: pink;
}

#container .dupa .blada {
  background: khaki;
}

/* - używać miksinów do powtarzających się cząstek kodu */
/* - nie mieszać kodu klas styli z klasami js */
/* 10. @import and partials */
/* webs.scss */
/* @import 'modules/post'; */
/* modules/_post.scss */
/* 11. BEM */
/* 12. struktura plików / modularyzacja */
/* - settings <- zmienne, ustawienia fontów, itp.
   - utilities <- mixiny / funkcje / generalnie narzędzie
   - modules/components <- małe bloki, które można wykorzystać kilka razy w apce
   - views <- cssy które są specyficzne dla danego widoku/layoutu
   - shame.scss <- jeżeli wiesz, że robisz coś słabo, nie wrzucaj w style, wrzuć do shame, będziesz wiedział, że coś jest do poprawy i bedziesz widział ile tego jest


/* 13. propozycja użycia tego w SPA */