Syntactically Awesome Style Sheets

Problemy CSS

  • W3C nie podaje zadnych dobrych praktyk
  • specjalizacja, zagniezdzone selektory, "kolizje atrybutow"
  • kod spaghetti
  • wysoka podatnosc na bledy i powtarzalnosc kodu
  • istne pole do popisu dla "hackmasterow"
  • roznice miedzy przegladarkami (prefixy!)

Jak sobie z tym poradzic?

  • BEM - block, element, modifier
  • OOCSS - Object Oriented CSS
  • Zmienne w "CSS 4" - nadzieja, ze ustalibizuje sie w ciagu kilku lat
  • ...
  • preprocesory CSS

Sass w kilku slowach

  • preprocesor CSS (wymaga kompilacji)
  • pliki z rozszerzeniami *.scss
  • wprowadza do CSS logike jezykow programowania
  • pozwala uporzadkowac kod
  • ulatwia tym samym jego utrzymanie

Instalacja i uzycie:

(wymagany Ruby)
> gem install sass
> sass --watch main.scss

ewentualnie mozna skorzystac z narzedzi graficznych (CodeKit, LiveReload) lub task managera (Grunt)




Podstawowa skladnia

Nesting


nav {
margin: 0 auto;

ul {
list-style: none;

li {
display: inline-block;

&:hover {
border: 1px solid #000;
}
}
}
}

Parent selector

&


.name {
.surname:hover & {
color: red;
}
}


variables

 $link-color: blue;
$link-hover: red;


.nav {
a {
color: $link-color;

&:hover {
color: $link-hover;
}
}
}


@extend

 .button {
border: { // czytelniejszy zapis skroconych regul -> 1px solid #000
width: 1px;
color: #000;
style: solid;
};
border-radius: 5px;
}

.button--small {
@extend .button;

width: 20px;
height: 20px;
}


%placeholder

 %button {
border-radius: 5px;
}

.button--small {
@extend %button;
}


MIXINS

@mixin respond($media) {
@if $media == handhelds {
@media only screen and (max-width: 479px) { @content; }
}@else if $media == wide-handhelds {
@media only screen and (min-width: 480px)
and (max-width: 767px) {
 @content;
}
} @else if $media == tablets {
@media only screen and (min-width: 768px)
and (max-width: 959px) {
@content;
}
}
}



mixins

 .sidebar {
padding: .8em;

@include respond(handhelds) {
padding: .5em;
}
}


@mixin transition($args...) { // lista
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}

@import


app.scss:
@import "partials/normalize";
@import "partials/variables";
@import "partials/animation";

...

output -> 1 plik app.css


COLOR FUNCTIONS

 $blue: rgb(0, 0, 255);

$light-blue: lighten($blue, 20%)
$dark-blue: darken($blue, 20%);

$crimson: mix($blue, $red, 30%);

$blue-transparent: rgba($blue, .5);

...

Po co to wszystko?

Aby zachować konsekwenta palete kolorow na stronie bez koniecznosci siegania do Photoshopa po kazdej zmianie pojedynczego koloru.

math

 $base-font-size: 16px;

h2 {
font-size: $base-font-size * 2;
}


 $container: 960px;
$main: 700px;

.sidebar {
width: $container - $main;
}


 .main {
width: percentage(1/3);
}


@for


 @for $level from 0 to 5 {
.tag-#{$level + 1} {
font-size: .7em + ($level * .5em);
}
}

output:
.tag-1 {
font-size: .7em;
}
.tag-2 {
font-size: 1.2em;
}
...

@each

 $icons: home, about, contact;

@each $icon in $icons {
.#{$icon}-icon {
background: url('/images/#{$icon}.png');
}
}


Czego nie omowilem:

  • operatory logiczne - dosc oczywiste
  • @while
  • definiowanie wlasnych funkcji
  • wartosci domyslne i opcjonalne
  • rodzaje kompilacji
  • debugowanie




Na koniec:

http://codepen.io/thebabydino/

Sass

By Przemek Murawski

Sass

  • 217
Loading comments...

More from Przemek Murawski