dziedziczenie, ineritance
dwie ważne zasady:
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 }
–
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 }
sass:
.sub_title font-style: italic @extend %highlight @extend .foo !optional
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 }
–
Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.