Kayıtlar

Haziran, 2019 tarihine ait yayınlar gösteriliyor

Compass - Important Notes

if we overuse it might make our code too complex and hard to read.  The most useful feature of Compass are; sprites ,  vertical rhytm,  horiznal lists, creating vendor prefixes.  However it is still better idea to use Autoprefixer over mixins for creating vendor prefixes.  Why?  Because Autoprefixes is a process that is gonna work even if you do not use compass/sass. You do not need to learn a new code. You also can keep having tips in your IDE when you want to change something. Autoprefixer is a PostCSS plugin which parse your CSS and add vendor prefixes. Href :  https://autoprefixer.github.io/ https://fatihhayrioglu.com/browserlist-ve-autoprefixere-guncelleme/
Devamı

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

D:\WebstormProjects\emptyProjectForCompass> compass interactive >> browsers() ("android", "android-chrome", "android-firefox", "blackberry", "chrome", "firefox", "ie", "ie-mobile", "ios-safari", "opera", "opera-mini", "opera-m obile", "safari") >> browser-versions(ie) ("5.5", "6", "7", "8", "9", "10", "11") >> browser-versions(firefox) ("2", "3", "3.5", "3.6", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25 ", "26", &qu
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ı

Compass - Sprites

Sprite is a collection of images put into a single image. Sprites are used to decrease number of requests to server from the users If you created your website properly the most useful layout setting for sprite is smart . _hover:   In order to create automatically : hover styles in your output CSS for the image you type after the name of image In order to create width and height for all images inside the sprite you use variable called $ -sprite-dimensions
Devamı

SASS - Compass

compass init -> initialize a new project in current folder compass create --> create a new project compass compile --> convert and create css file compass watch --> watch for changes on source code. If changes happen, compile source code. sprite -> single image contains more than one image.Many small images combines together to became a single image. You should create a folder and put all images under that folder, rest of process is handled by compass :)) example 1 style.scss @import "social/*.png" ; p { border : 2 px solid black ; @include border-radius ( 18 px ); } style.css @import "social/*.png" ; p { border : 2 px solid black ; @include border-radius ( 18 px ); } example 2 @import "compass" ; @import "social/*.png" ; --> generate all class with background positions @include all-social-sprites ; p { border : 2 px solid black ; @include border-radius ( 18 px ); } the output is below;
Devamı