| json_metadata | "{"format":"markdown","tags":["coogger","sass","frontend","tr","scss"],"app":"coogger\/1.4.1","ecosystem":{"version":"1.4.1","body":"<img alt=\"sass\" general=\"w-50 center\" src=\"https:\/\/www.coogger.com\/media\/images\/sass_Grw7XMo.png\"><\/img>\r\n\r\nMerhaba arkada\u015flar [sass](https:\/\/www.coogger.com\/sass\/@hakancelik\/) listemde **Sass** yerine **css** yap\u0131s\u0131na daha \u00e7ok benzedi\u011fi ve kolay \u00f6\u011frenilmesi a\u00e7\u0131s\u0131ndan daha h\u0131zl\u0131 olaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm **Scss** yap\u0131s\u0131n\u0131 ele alarak devam edece\u011fim, belki ilerleyen zamanlarda zaman bulursam syntax olarak bu i\u00e7eriklere **Sass** syntax'\u0131n\u0131da dahil ederim, zaten Syntax hari\u00e7 geri kalan her\u015fey ayn\u0131.\r\n\r\n## Sass watch\r\nsass ile yazd\u0131\u011f\u0131m\u0131z kodlar biz yazarken hemen css'e d\u00f6n\u00fc\u015fs\u00fcn ve local de \u00e7al\u0131\u015f\u0131rken sonunuc direk web projenizde g\u00f6rmek istiyorsan\u0131z bunu watch ile yapabiliyoruz\r\n\r\n```css\r\nsass --watch input.scss output.css\r\n```\r\n\r\nburda input.scss ile a\u00e7m\u0131\u015f oldu\u011fumuz sass dosyas\u0131ndaki kodlar biz her ctrl+s yapt\u0131\u011f\u0131m\u0131zda hemen css kodlar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve output.css dosyas\u0131na kay\u0131t eder, watch olay\u0131n\u0131 klas\u00f6r yolu i\u00e7inde yapabilirsiniz mesela iki tane klas\u00f6r\u00fcn\u00fcz oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn biri sass diyeri styles klas\u00f6r\u00fc styles dosyan\u0131zda css kodlar\u0131n\u0131z ( dosyalar\u0131n\u0131z ) olacak bunu i\u00e7in\r\n\r\n```css\r\nsass --watch sass:styles\r\n```\r\nbu watch'da siz sass klas\u00f6r\u00fcn\u00fczde herhangi bir .sass dosya uzant\u0131s\u0131 ile dosya a\u00e7\u0131p sass kodlar\u0131n\u0131z\u0131 yazd\u0131g\u0131n\u0131zda ayn\u0131 isimide fakat .css uzant\u0131l\u0131 dosyalar styles klas\u00f6r\u00fcn\u00fczde olu\u015fmaya ba\u015flar\r\n\r\nher ctrl+s yapt\u0131\u011f\u0131n\u0131zda de\u011fi\u015fimler kay\u0131t edelir.\r\n\r\n### Sass de\u011fi\u015fkenler\r\nDe\u011fi\u015fkenler, stil sayfas\u0131 boyunca yeniden kullanmak istedi\u011finiz bilgileri depolaman\u0131n bir yoludur. Yeniden kullanmak isteyece\u011finizi d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fcz herhangi bir CSS de\u011ferini saklayabilirsiniz. Sass\u00a0 bir \u015feyi de\u011fi\u015fken olarak atamak i\u00e7in $ sembol\u00fcn\u00fc kullan\u0131r de\u011fi\u015fkenleri kullanmak tekrar eden kodlar\u0131 minumun indirmemize yard\u0131mc\u0131 olur bu y\u00fczden de\u011fi\u015fken kullanmak \u00f6nemlidir.\r\n\r\n\r\n```css\r\n$font-stack: Helvetica, sans-serif;\r\n$primary-color: #333;\r\n\r\nbody {\r\n font: 100% $font-stack;\r\n color: $primary-color;\r\n}\r\n```\r\nBurdaki de\u011fi\u015fkenlerimiz iki tane olup\r\n\r\n**$font-stack**, **$primary-color** bunlard\u0131r, tan\u0131mlad\u0131\u011f\u0131m\u0131z de\u011fi\u015fkenleri kullanmak sitedi\u011fimizde ise yine tan\u0131mlad\u0131\u011f\u0131m\u0131z gibi $ \u00f6n eki ile birlikte de\u011fi\u015fken ismimizi yazmam\u0131z geriyor yani $primary-color b\u00f6yle\r\n\r\nbu kodlar sass'da b\u00f6yle g\u00f6r\u00fcn\u00fcrken css olarak de\u011fi\u015fkenler olmadan direk de\u011fi\u015fkenin de\u011feri olarak yaz\u0131l\u0131r yani css \u00e7\u0131kt\u0131m\u0131z \u015f\u00f6yle olacakt\u0131r.\r\n```css\r\nbody {\r\n font: 100% Helvetica, sans-serif;\r\n color: #333;\r\n}\r\n```\r\n\r\n## Nesting\r\nHtml kodlar\u0131m\u0131zda belirli bir hiyerar\u015fi olabiliryor \u015funun gibi mesela footer>div>ul>li>a>span gibi bir \u015fekilde html kodlar\u0131m\u0131z olabiliyor sass ile yine bu hiyerar\u015fi gibi kod yazabiliyoruz \u015f\u00f6yleki\r\n```css\r\nfooter{\r\n ul{\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n li{ display: inline-block; }\r\n }\r\n \r\n a{\r\n display: block;\r\n padding: 6px 12px;\r\n text-decoration: none;\r\n }\r\n span{\r\n display: flex;\r\n }\r\n}\r\n```\r\ncss \u00e7\u0131kt\u0131s\u0131 olarak\r\n```css\r\nfooter ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n}\r\n\r\nfooter ul li {\r\n display: inline-block;\r\n}\r\n\r\nfooter a {\r\n display: block;\r\n padding: 6px 12px;\r\n text-decoration: none;\r\n}\r\n\r\nfooter span {\r\n display: flex;\r\n}\r\n```\r\n\u015feklinde olur\r\n\r\n## Import i\u015flevi\r\nsass kodlar\u0131n\u0131z\u0131 mod\u00fcler olarak yazabilirsiniz \u00f6rne\u011fin header.scss kodlar\u0131n\u0131z ayr\u0131 bir dosyada, body.scss kodlar\u0131n\u0131z ayr\u0131 bir dosyada hover.scss kodlar\u0131n\u0131z ayr\u0131 bir dosyada olabilir ve bu dosyalar\u0131n\u0131z\u0131 python dilinde oldu\u011fu gibi projelerinize dahil edebilirsiniz @import \u00f6n eki ile sass ile bir kere bir \u00e7\u0131ta (fremework) olu\u015fturur daha sonra iste\u011finize g\u00f6re yapt\u0131klar\u0131n\u0131z\u0131 projenize dahil edebilirsiniz veya github dan a\u00e7\u0131k kaynak olarak yap\u0131lan sass projelerini kendi projenize import ile dahil edebilirsiniz.\r\n\r\n\u00f6rne\u011fin ;\r\n```css\r\n\/\/ _reset.scss \r\n\r\nhtml,\r\nbody,\r\nul,\r\nol {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nbu _reset.scss dosyam\u0131z\r\n\r\n\/\/ base.scss\r\n\r\n@import 'reset'; \r\n\r\n\/\/ veya \r\n\r\n@import '_reset.scss'; \/\/ \u015feklindede import edebilirdik \r\n\r\nbody {\r\n font: 100% Helvetica, sans-serif;\r\n background-color: #efefef;\r\n}\r\n```\r\n\r\n@import \u00f6n eki ile ayn\u0131 dizinde bulunan reset.scss dosyas\u0131n\u0131 projemize dahil ettik\r\n\r\nwatch komutu bunu css dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcnde @import reset; yazan sat\u0131rda reset dosyas\u0131ndaki kodlar\u0131m\u0131z daha sonra ise onun alt sat\u0131r\u0131ndaki kodlar bulunur yani aynen \u015f\u00f6yle\r\n\r\n```css\r\nhtml, body, ul, ol {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nbody {\r\n font: 100% Helvetica, sans-serif;\r\n background-color: #efefef;\r\n}\r\n```\r\n\r\n## Mixins ( fonksiyonlar )\r\nfonksiyonlar\u0131n bir g\u00fczelli\u011fi vard\u0131r oda bir fonksiyon yazars\u0131n sonra geri kalan kodlar\u0131 o yazar :D , yani \u015f\u00f6yle kendisini s\u00fcrekli tekrar eden bir olay vard\u0131r bu tekrar kodlarda ufak tefek \u015feyler de\u011fi\u015fse bile genel hat hep ayn\u0131d\u0131r i\u015fte o zaman bunlar\u0131 tekrarlamak yerine bir fonksiyon ve o de\u011fi\u015fen yerler i\u00e7in \u00f6\u011fe say\u0131s\u0131 boyunca parametreler ve i\u015fte bitti \u00f6rnek verelim, mesela css ile bir border-radius kodu yaz\u0131yorsunuz ama hem frefoxda hem safaride \u00e7al\u0131\u015fs\u0131n istiyorsunuz o zaman \u00f6yle bir kod yazman\u0131z gerekiyor.\r\n\r\n```css\r\n.border{\r\n-webkit-border-radius: 3px;\r\n-moz-border-radius: 3px;\r\n-ms-border-radius: 3px;\r\nborder-radius: 3px;\r\n}\r\n```\r\n\r\n\u015fimdi buna bakarsak\r\n**-webkit-border-radius:** **-moz-border-radius:** **-ms-border-radius:** **border-radius:** bu k\u0131s\u0131mlar de\u011fi\u015fmiyor de\u011fi\u015fen yerler ald\u0131klar\u0131 de\u011ferler birden fazla border radius kullanacaksam s\u00fcrekli bunlar\u0131 de\u011ferleri farkl\u0131 olacaksa bile tekrar tekrar yazmak yerine \u015fyle bir\u015fey yapabilirim\r\n\r\n```css\r\n@mixin border-radius($radius) {\r\n -webkit-border-radius: $radius;\r\n -moz-border-radius: $radius;\r\n -ms-border-radius: $radius;\r\n border-radius: $radius;\r\n}\r\n\r\n.box { @include border-radius(10px); }\r\n```\r\n\r\nburda @mixin\u00a0 \u00f6n eki ile tan\u0131mlam\u0131s oldugum border-radius isimki mixin'im $radius diye bir de\u011fi\u015fken al\u0131yor unutmay\u0131n de\u011fi\u015fkenler $ \u00f6n eki ile tan\u0131mlan\u0131yordu.daha sonra da yaz\u0131lan bu fonksiyonu kullanmak i\u00e7in @include \u00f6n eki + kullanmak istedi\u011fin fonksiyon ismi ve () bunun i\u00e7ine fonksiyonda al\u0131nan parametre bilgisi\r\n\r\nyani \u015f\u00f6yle yapars\u0131n\u0131z\r\n\r\n```css\r\n.box { @include border-radius(1px); }\r\n\r\n.box { @include border-radius(2px); }\r\n\r\n.box { @include border-radius(3px); }\r\n\r\n.box { @include border-radius(10px); }\r\n```\r\n\r\ngibi kullanabilirsiniz hatta daha da abartal\u0131m burda asl\u0131nda sabit olan 3 nesne var onlarda -webkit,-moz ve -ms \u00f6n ekleridir ben\u00a0 e\u011fer her yazd\u0131\u011f\u0131m kod b\u00fct\u00fcn taray\u0131c\u0131lara uyumlu olsun ve tekrar dan kurtulay\u0131m isterseniz \u015f\u00f6yle yazman\u0131z gerek.\r\n\r\n```css\r\n@mixin prefixed($property, $value) {\r\n -webkit-#{$property}: #{$value};\r\n -moz-#{$property}: #{$value};\r\n -ms-#{$property}: #{$value};\r\n -o-#{$property}: #{$value};\r\n #{$property}: #{$value};\r\n}\r\n```\r\n\r\n\u015fimdi bunu \u015fu \u015fekilde kullanabilirim\r\n\r\n```css\r\n@include prefixed(border-radius, 4px)\r\n\r\n@include prefixed(border, 4px)\r\n\r\n@include prefixed(border, 4px)\r\n\r\n@include prefixed(border-color, red);\r\n```\r\n\r\nbak\u0131n \u015fuan bir mixin ile her taray\u0131c\u0131ya uygun kodlar yazd\u0131k \u00e7ok basit , bu arada $property de\u011fi\u015fkeninden al\u0131nan css kodlar\u0131na eri\u015fmek i\u00e7in #{$property} b\u00f6yle yap\u0131lmal\u0131 normal de\u011fi\u015fken de\u011fil bunlar direk $property \u015feklinde eri\u015femezsiniz de\u011fi\u015fkene css kodlar\u0131 atad\u0131\u011f\u0131m\u0131z i\u00e7in.\r\n\r\n\u00e7\u0131kt\u0131 olarak normal css kodlar\u0131 verir ler \u00f6rne\u011fin \u015f\u00f6yle\r\n\r\n```css\r\n.box {\r\n -webkit-border-radius: 10px;\r\n -moz-border-radius: 10px;\r\n -ms-border-radius: 10px;\r\n border-radius: 10px;\r\n}\r\n```\r\n\r\n## Operat\u00f6rler\r\n\u015f\u00f6yle i\u015flemler yapabiliriz mesela\r\n\r\n```css\r\nwidth: 300px \/ 960px * 100%;\r\nwidth: 600px \/ 960px * 100%;\r\n```\r\n\r\nkullanaca\u011f\u0131m\u0131z operat\u00f6rler\r\n\r\n`\/,*,-,+,%` dir\r\n\r\nsass dersleri bu kadar arkada\u015flar yeni \u015feyler \u00f6\u011frenirsem eklerim herkese iyi \u00e7al\u0131\u015fmalar dilerim kolay gelsin g\u00f6r\u00fc\u015fmek \u00fczere."}}" |
|---|