Sass – dziedziczenie
dziedziczenie, ineritance
dwie ważne zasady:
- nie można w ciągu wprowadzać kolejnych class po @extend
- klasa musi być zdefiniowana w danym zakresie styli, czyli nie możemy użyć w @media queris {} klasy jako @extend którą zdefiniowaliśmy po za tym @media queris {}
sass:
.error color: $colorError .critical_error @extend .error border-bottom: 1 solid $colorError
css:
.error, .critical_error { color:#c00c30 } .critical_error { border-bottom:1 solid #c00c30 }
–
selektory stworzone tylko do tworzenia @extension nie będące żadną 'fizyczną’ klasą w css – %
sass:
%highlight background-color: lighten(orange, 10%) .sub_title font-style: italic @extend %highlight h4 font-size: 30px @extend %highlight
css:
.sub_title, h4 { background-color:#ffb733 } .sub_title { font-style:italic } h4 { font-size:30px }
opcjonalne rozszerzenie, jeśli jest zdefiniowane jest interpretowane, jeśli nie istniej jest ignorowane i nie zwraca błędu – !optional
sass:
.sub_title font-style: italic @extend %highlight @extend .foo !optional
@extend vs @mixin
jeśli te same style zamkniemy w @mixins a nie w @extension otrzymamy więcej powtarzalnego kodu w css
sass:
%btn border: none background-color: $colorAccent color: $colorText &:hover background-color: darken($colorAccent, 0.5) %btn_min height: 20px line-height: 20px .btn_primary @extend %btn padding: 5px .btn_secondary @extend %btn @extend %btn_min font-size: 10px
css:
.btn_primary, .btn_secondary { border:none; background-color:#08baba; color:#161616 } .btn_primary:hover, .btn_secondary:hover { background-color:#08b8b8 } .btn_secondary { height:20px; line-height:20px } .btn_primary { padding:5px } .btn_secondary { font-size:10px }
sass:
@mixin btn border: none background-color: $colorAccent color: $colorText &:hover background-color: darken($colorAccent, 0.5) @mixin btn_min height: 20px line-height: 20px .btn_primary @include btn padding: 5px .btn_secondary @include btn @include btn_min font-size: 10px
css:
.btn_primary { border:none; background-color:#08baba; color:#161616; padding:5px } .btn_primary:hover { background-color:#08b8b8 } .btn_secondary { border:none; background-color:#08baba; color:#161616; height:20px; line-height:20px; font-size:10px } .btn_secondary:hover { background-color:#08b8b8 }
–