SASS - Dobre praktyki, ogólne zasady

Question

Witajcie, od dzisiaj przechodzę na SASS, więc już mam pytania ;)
1.
Znacie jakieś zrozumiałe tutki jak powinno się wykorzystywać SASS?
2.
w jaki sposób w "drzewie"(moja nazwa) selektorów wykonać selektor dziecka? w poniższym kodzie wyszukuje po kolejnych elementach a chciałbym czasami dostać kod ul > li <-taki przykład
3.
czy kod poniżej jest dobrym kodem? ;) 
 

.bg-dark-base
  background-image: url("../img/bg.png")
  background-attachment: fixed
.bg-dark-second
  background-image: url("../img/bg1.png")
  background-attachment: fixed
=border-radius($top-left, $top-right, $bottom-right, $bottom-left)
  -webkit-border-bottom-left-radius:  $bottom-left
  -webkit-border-bottom-right-radius: $bottom-right
  -webkit-border-top-left-radius:     $top-left
  -webkit-border-top-right-radius:    $top-right
  -moz-border-bottom-left-radius:     $bottom-left
  -moz-border-bottom-right-radius:    $bottom-right
  -moz-border-top-left-radius:        $top-left
  -moz-border-top-right-radius:       $top-right
  -ms-border-bottom-left-radius:      $bottom-left
  -ms-border-bottom-right-radius:     $bottom-right
  -ms-border-top-left-radius:         $top-left
  -ms-border-top-right-radius:        $top-right
  border-bottom-left-radius:          $bottom-left
  border-bottom-right-radius:         $bottom-right
  border-top-left-radius:             $top-left
  border-top-right-radius:            $top-right

=transition($time, $type)
  -webkit-transition: $time $type
  -moz-transition:    $time $type
  -ms-transition:     $time $type
  -o-transition:      $time $type
  transition:         $time $type

body
  @extend .bg-dark-base
  header
    @extend .bg-dark-second
    +border-radius(0,0,20px,20px)
    padding: 10px
    padding-bottom: 0
    position: relative
    top: -28px
    border: 6px #303030 double
    nav
      ul
        list-style: none
        margin: 0
        padding: 0
        li
          display: table-cell
          width: 1%
          border: 6px #303030 double
          border-bottom: 0
          text-align: center
          overflow: hidden
          +border-radius(20px,20px,0,0)
          +transition(250ms,linear)
          @extend .bg-dark-base
          a
            width: 100%
            height: 100%
            display: table
            padding: 10px 0
            +transition(250ms,linear)
        li:hover
          a
            @extend .bg-dark-second

  h1
    color: #fff
    font-size: 4em
    margin-bottom: 0.6em
    text-align: center

 

Answer 1

Masakra... jak ja nie lubię składni Python-like, czy tam Ruby-like w tym wypadku ;P

Znacie jakieś zrozumiałe tutki jak powinno się wykorzystywać SASS?

http://www.sitepoint.com/8-tips-help-get-best-sass/

Tutaj instalacja, fajny art, jeśli się w ogóle przyda
http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css/

Comments

Dzięki za linki ale to tak inaczej opisana oficjalna dokumentacja ;) 
 

Masakra... jak ja nie lubię składni Python-like, czy tam Ruby-like w tym wypadku ;P

chodzi o to że idę bez klamer? i ogółem tak jak to nazwałem drzewo? 
gdy chciałem użyć klamer, ogółem SCSS(chyba, może być tu literówka)  to koala mi nie kompiluje kodu, tak chociaż muszę trzymać porządek w wcięciach ;) 

---

ogółem SCSS(chyba, może być tu literówka)  to koala mi nie kompiluje kodu,

Sprawdź czy pliki, które próbujesz skompilować mają rozszerzenie .scss : ) 

---

akurat zadałem pytanie o to niżej, dzięki! zaraz sobie przepiszę :)
myślałem że jak sass to jedno rozszerzenie a kompilator sam rozpozna skłądnie ;)

Answer 2

1. http://sass-lang.com/guide wszystko pięknie opisane.

2. Po prostu poza całym szkieletem jak masz pokazany tj. element w elemencie stwórz to co Ci odpowiada.

przykład: 

   nav
      ul
        list-style: none
        margin: 0
        padding: 0
        li
          display: table-cell
          width: 1%
          border: 6px #303030 double
          border-bottom: 0
          text-align: center
          overflow: hidden
          +border-radius(20px,20px,0,0)
          +transition(250ms,linear)
          @extend .bg-dark-base
          a
            width: 100%
            height: 100%
            display: table
            padding: 10px 0
            +transition(250ms,linear)
        li:hover
          a
            @extend .bg-dark-second
 
ul > li .................................

3. Według mnie jest dobry, ale sam nie będę oceniać ponieważ więcej korzystam z LESS'a ;) 

 

Z ciekawości dlaczego nie otwierasz elementów, jak i zamykasz poprzez { , }? 

Comments

SASS oferuje dwie składnie: Sass (bez {, }, ;) i skróconymi funkcjami - Ruby'owy styl) oraz SCSS (bardziej podobną do CSSa), W linku którym podałeś, przy każdym przykładzie w prawym górnym rogu, można zmienić składnie - bardzo ładnie widać wtedy różnicę.

---

mam pytanie co do tych klamer, jak chcę ich użyć to mi nie kompiluje, muszę mieć plik z rozszerzeniem .scss ? wtedy będzie ok?

---

Faktycznie, moje przeoczenie. Kompletnie nie rozumiem sensu takiego pisania, wydaje mi się, iż jest to dużo bardziej nieczytelne od korzystania z klamer. Makoso, tak plik .scss oraz kompilator do niego.

Answer 3

Jeżeli chodzi o tutki to polecam dokumentację http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax​

Slektor dziecka uzyskasz np w taki sposób:

ul {
     > li {
          .....
     }
}

Ogólnie kod nie wygląda źle, ale wydaje mi się, że przedrostki w border-radius i transition nie są już potrzebne. Ogólnie uważaj z zagnieżdżaniem, pamiętaj, że czym więcej zagnieżdżeń tym dłuższy selektor wyjściowy css. Ja staram się trzymać zasady, że zagnieżdżam do 3-4 poziomu. Poza tym, dziięki Twojemu wpisowi zorientowałem się, że istnieje skrócony zapis mixin, za co dziękuje! :)

Pozdrawiam!

 

EDIT: Zgadzam się z kolegami, że kod sass bez klamer i średnikó wygląda co najmniej mało czytelnie. :)