Sass – dziedziczenie

dziedziczenie, ineritance

dwie ważne zasady:

1. nie można w ciągu wprowadzać kolejnych class po @extend
2. 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
}

–