Günay's Coding World

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....

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...