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

_mixins.scss @mixin text-design-change ( $firstColor : $gradient-color-first , $secondColor : $gradient-color-second ){ overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; background-image : linear-gradient (to right top , $firstColor , #742c17 , #ac5f17 , #d59c08 , $secondColor ); } style.scss p { width : 100 %; height : 150 px ; //@include text-design-change(#fff,#000); @include text-design-change (); }

_variables.scss $sizeOfHeader : 28 px ; $color : black ; $size : 16 px ; $deger : 13 px ; $color-red : red ; $color-yellow : yellow ; $header-color : $color-red ; $link-color : $color-yellow ; $gradient-color-first : #370505 ; $gradient-color-second : #ebe212 ; styles.scss @import "variables" ; @import "mixins" ; h1 { font-size : $sizeOfHeader ; color : $header-color ; } h2 { font-size : $sizeOfHeader - 7 px ; color : $header-color ; } a { color : $link-color ; } div { font-size : $size * 1 ; font-family : "Agency FB" , sans-serif ; color : $color ; 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 : 30 px ; color : red ; margin : 3 px ; padding-left : 3 px ; padding-right : 20 px ; bottom : 30 p...