Kayıtlar

functions etiketine sahip yayınlar gösteriliyor

SCSS - For Loop

index.html < h1 > Im header 1 </ h1 > < h2 > Im header 2 </ h2 > < h3 > Im header 3 </ h3 > < h4 > Im header 4 </ h4 > < h5 > Im header 5 </ h5 > < h6 > Im header 6 </ h6 > style.scss @for $i from 1 to 7 { // include 1 exclude 7 h #{ $i }{ // #{} -> interpolation font-size : 55 px - $i * 3 ; } }
Devamı

SCSS - Interpolation

style.scss @import "mixins" ; @include small-box ( red ); @include small-box ( pink ); @include small-box ( yellow ); @include small-box ( black ); _mixins.scss @mixin small-box ( $color ){ . small-box- #{ $color } -->#{} is interpolation { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : $color ; } } Output: . small-box-red { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : red ; } . small-box-pink { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : pink ; } . small-box-yellow { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : yellow ; } . small-box-black { width : 50 px ; height : 50 px ; border : 1 px solid black ; color : black ; } To make it better; style.scss @import "mixins" ; @include small-box ( red ); @include small-box ( pink ); @include small-box ( yellow ); @include small-box ( black ); _mixins....
Devamı

SCSS - functions

style.scss @import "placeholder" ; div { font-size : $size * 1 ; font-family : "Agency FB" , sans-serif ; color : automaticContrast ( $link-color , $color ); -> SASS predefined lighten function top : 10 px ; bottom : 30 px ; margin : 100 px ; padding : $deger ; line-break : strict ; line-height : 20 %; border : 1 px dashed $color ; ul { li { text-align : center ; font-family : Andalus , cursive ; font-size : nameOfFunction ( 30 px ); color : lighten ( $color , 85 %); -> SASS predefined lighten function margin : 3 px ; padding-left : 3 px ; padding-right : 20 px ; bottom : 30 px ; top : 2 px ; } } } _functions.scss @function nameOfFunction ( $variable ){ @return $variable + 30 ; } @function automaticContrast ( $backgroundColor , $textColor ){ @if lightness ( $backgroundColor ) < 50 %{ @return lighten ( $textColor , 30 %); } @else { @return ligh...
Devamı