Kayıtlar

SCSS etiketine sahip 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", ...
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ı

SCSS - List

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 $header-list : h1 h2 h3 h4 h5 h6 '.something_else' ; //$i: 0; @each $current-header in $header-list { $i : index ( $header-list , $current-header ) + 3 ; // you can do this instead of adding $is' code lines #{ $current-header }{ font-size : 55 px - $i * 3 ; } //$i: $i + 2; }
Devamı

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ı

SASS - extend

style.scss . messageDesign { padding : 10 px ; width : 150 px ; text-align : center ; color : #444 ; } . error { border : 1 px solid red ; @extend . messageDesign ; } . warning { border : 1 px solid yellow ; @extend . messageDesign ; } . success { border : 1 px solid green ; @extend . messageDesign ; } or make a placeholder( % ) messageDesign WE USE PLACEHOLDER IF YOU DO NOT NEED TO HAVE ARGUMENT LIKE; messageDesign(param1,param2) % m essageDesign { padding : 10 px ; width : 150 px ; text-align : center ; color : #444 ; } . error { border : 1 px solid red ; @extend % messageDesign ; } . warning { border : 1 px solid yellow ; @extend % messageDesign ; } . success { border : 1 px solid green ; @extend % messageDesign ; }
Devamı

SASS - mixins, include

_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 (); }
Devamı

SASS - variables

_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...
Devamı