Kayıtlar

include etiketine sahip yayınlar gösteriliyor

Compass - Horizontal List

HTML Code <!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < title > Compass </ title > < link href= "stylesheets/screen.css" media= "screen, projection" rel= "stylesheet" type= "text/css" /> < link href= "stylesheets/print.css" media= "print" rel= "stylesheet" type= "text/css" /> <!--[if IE]> <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> <![endif]--> < link href= "stylesheets/index2.css" rel= "stylesheet" type= "text/css" /> </ head > < body > < ul id= "social-links" > < li class= "social_blogger" ></ li > < li class= "social_facebook" ></ li ...
Devamı

Compass - Browser Support

style.scss @import "compass" ; $debug-browser-support : true ; p { border : 2 px solid black ; @include border-radius ( 12 px ); } a { @include opacity ( 0.5 ); @include single-transition ( all , 5 s ); & : hover { font-size : 28 px ; color : red ; } } output: /* line 5, ../sass/style.scss */ p { border : 2 px solid black ; /* Capability border-radius is prefixed with -moz because 0.25036% of users need it which is more than the threshold of 0.1%. */ /* Creating new -moz context. */ -moz-border-radius : 12 px ; /* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */ /* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 0.1. */ /* Capability border-radius is prefixed with -webkit because 0.1583% of users need it which is more than the threshold of 0.1%. */ /* Creating new -webkit context. ...
Yorum Gönder
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ı