SASSmeister.com

/* zmienne */
$pierwszy: green;
$drugi: #eee;

body {backgroud-color:green;color:#eee;}
header{color:$drugi;background-color:$drugi;}

#mainHeader {
  width: 940px;
  color: #fff;
  h1 {
    font-size:12px;
    }
    span {
      font-size:14px;
    }
    a {
      &:hover{
        color:red;
      }
    }
}
/* mixin */
@mixin kwadrat($rozmiar, $kolor) {
  width: $rozmiar;
  height: $rozmiar;
  background-color:$kolor;
}

.maly-niebieski-kwadrat {
  @include kwadrat(20px,blue)
}

.duzy-czerwony-kwadrat {
  @include kwadrat(400px,red)
}

@mixin pochylenie(){
  $pochylenie: 15deg;
  tranform: $pochylenie;
  -webkit-transform: $pochylenie;

}

:frame:hover {
  @include pochylenie;
}

.dialog-button {
  box-sizing: border-box;
  color: $pierwszy;
  padding: 12px 40px;
}

.confirm {
  @extend .dialog-button;
  float: left;
  background-color: #123290;
}

.cancel {
  @extend .dialog-button;
  float: right;
  background-color: light-red;
}

ul, ol {
  list-style-type:none;
  li {
    padding:15px;
    a {text-decoration: none;}
  }
}