| json_metadata | "{"format": "markdown", "tags": ["coogger", "sass", "tr", "scss"], "app": "coogger/1.4.1", "ecosystem": {"version": "1.4.1", "body": "<img general=\"center w-50\" src=\"https://cdn.steemitimages.com/DQmcNz9HDbQB8nbt2LV7bwjTabfBiMuSsNtto22dLcP2JCv/sass.PNG\">\r\n\r\n[TOC]\r\n\r\nMerhaba arkada\u015flar bildi\u011finiz gibi coogger projesine ba\u015flad\u0131\u011f\u0131mda yeni bir css fremework'u olan [coogger.css](https://github.com/coogger/coogger.css) projesinede ba\u015flam\u0131\u015ft\u0131m, bu fremework'u geli\u015ftirirken sass kullan\u0131yorum ve son 1 haftad\u0131r yeni \u00f6zellikler ve var olan \u00f6zellikleri geli\u015ftirmeye \u00e7al\u0131\u015f\u0131yorum, bunu yaparken sass'da bilmedi\u011fim baz\u0131 yeni \u015feyler \u00f6\u011frendim bunlar\u0131n hepsi bu i\u00e7eri\u011fin konusu olmasada yeni \u00f6\u011frendi\u011fim ve \u00e7ok i\u015fime yarayan programlama dillerinde bulunan if, else yap\u0131s\u0131 ve d\u00f6ng\u00fcleri ele alaca\u011f\u0131m, ek olarak eski sass yaz\u0131lar\u0131ma bakt\u0131\u011f\u0131mda \u00e7ok anla\u015f\u0131l\u0131r ve detayl\u0131 anlatmad\u0131\u011f\u0131m\u0131 fark ettim zaman buldu\u011fumda onlarada bir el at\u0131p d\u00fczenleyece\u011fim yada daha detayl\u0131 eskiye y\u00f6nelik yeni i\u00e7erikler payla\u015faca\u011f\u0131m.\r\n\r\n-------------------\r\n\r\nBu i\u00e7eri\u011fin konusunu herhangi bir programlama dili bilen ki\u015fi h\u0131zl\u0131ca anlay\u0131p kavrayacakt\u0131r.\r\n\r\n### @if\r\nIf ko\u015fullu y\u00fcr\u00fctme kodumuzu sass i\u00e7erisine syntax olarak a\u015fa\u011f\u0131daki gibi yaz\u0131yoruz, **Boolean expression** olarak adland\u0131rlan b\u00f6l\u00fcm'\u00fc \u015fu \u015fekilde anlatay\u0131m. If, else if veya else gibi ko\u015fullu durumlar\u0131 yazmam\u0131z\u0131 sa\u011flayan kodlar\u0131n tek umursad\u0131klar\u0131 \u015fey \u015fart olarak verilen ifadenin do\u011fru olup olmad\u0131\u011f\u0131d\u0131r, verilen ifade do\u011fru ise if, else if veya else alt\u0131ndaki kodlar \u00e7al\u0131\u015f\u0131r, do\u011fru de\u011fil ise \u00e7al\u0131\u015fmazlar, programlama dilleri **0** ve **\"\"** bunun gibi bo\u015f karekteri **false** ( yani yanl\u0131\u015f ) di\u011fer geri kalan her\u015feyi **true** ( yani do\u011fru ) kabul eder, bu kural sass'da da ge\u00e7erlidir.\r\n\r\nSyntax;\r\n```sass\r\n@if <Boolean expression> {\r\n <statements>\r\n}\r\n```\r\n\r\nA\u015fa\u011f\u0131da bir \u00f6rnek yazal\u0131m.\r\n\r\n```sass\r\n$variable: 1; // de\u011fi\u015fkenimi tan\u0131mlad\u0131m\r\na{\r\n @if $variable == 1 { // variable de\u011fi\u015fkenim 1'e e\u015fit ise \r\n color: blue; // color blue olur\r\n }\r\n @if $variable != 1 { // de\u011fi\u015fkenim 1'e e\u015fit de\u011filse \r\n color: red; // color red olur\r\n }\r\n}\r\n```\r\n\r\nbu \u00f6rne\u011fi bu \u015fekildede yazabilirdik.\r\n\r\n```sass\r\n$variable: 1; // de\u011fi\u015fkenimi tan\u0131mlad\u0131m\r\na{\r\n @if $variable == 1 { // variable de\u011fi\u015fkenim 1'e e\u015fit ise \r\n color: blue; // color blue olur\r\n }\r\n @else{ // de\u011fi\u015fkenim 1'e e\u015fit de\u011filse\r\n color: red; // color red olur\r\n }\r\n}\r\n```\r\n\r\ncss olarak \u00e7\u0131kt\u0131m\u0131z\r\n```css\r\na{\r\n color : blue;\r\n}\r\n```\r\n\r\n>Kodlar\u0131n\u0131zda ne kadar @if varsa sass hepsini bakar ve \u015fart do\u011fru oldu\u011fu takdirde hangisi do\u011fru ise onu \u00e7al\u0131\u015ft\u0131r\u0131r, siz 10 farkl\u0131 @if blogu yazm\u0131\u015f olsan\u0131z ve ne olursa olsun mutlaka bir tane @if'in \u00e7al\u0131\u015faca\u011f\u0131n\u0131 bilseniz bile bilgisayar bunu bilemiyece\u011fi i\u00e7in b\u00fct\u00fcn @if'leri kontrol eder bu k\u00f6t\u00fc yaz\u0131lm\u0131\u015f bir kod'dur ve @if, @else if,@else yap\u0131s\u0131n\u0131n kullan\u0131lmas\u0131 gerek\r\n\r\nNota \u00f6rnek;\r\n\r\n```sass\r\n$variable: 1; // de\u011fi\u015fkenimi tan\u0131mlad\u0131m\r\na{\r\n @if $variable == 1 { // variable de\u011fi\u015fkenim 1'e e\u015fit ise\r\n color: blue; // color blue olur\r\n }\r\n @if $variable != 1{ // yukar\u0131daki ilk if do\u011fru olsada olmasada, yani yukar\u0131daki if \u00e7al\u0131\u015fsada \u00e7al\u0131\u015fmasada bu if kontrol edilir, siz yukar\u0131daki \u00e7al\u0131\u015f\u0131rsa bunun \u00e7al\u0131\u015fmayaca\u011f\u0131n\u0131 bilirsiniz ama bilgisayar bilemezi bunu bilmesi i\u00e7in @else if kullanman\u0131z gerekir.\r\n color: red; \r\n }\r\n}\r\n```\r\n\r\n### @else if\r\nElse if ko\u015fullu durumu \u015fu if'den pek farkl\u0131 de\u011fildir, yine boolen bir de\u011fer al\u0131r ve \u015fart do\u011fru ise \u00e7al\u0131\u015f\u0131r, tek fark @if'i anlat\u0131rken hemen yukar\u0131daki \u00f6rnek ile a\u00e7\u0131klad\u0131\u011f\u0131m\u0131z durumdur, e\u011fer kod blo\u011funuzda @if, @else if, @else if yap\u0131s\u0131 varsa yani her \u015fart\u0131n\u0131z @if de\u011fil i\u00e7inde @else if'de varsa, herhangi bir \u015fart sa\u011fland\u0131\u011f\u0131 zaman bilgisayar di\u011fer \u015fartlara bak\u0131p kendisini yormaz.\r\n\r\n```sass\r\n$variable: 1; // de\u011fi\u015fkenimi tan\u0131mlad\u0131m\r\na{\r\n @if $variable == 1 { // variable de\u011fi\u015fkenim 1'e e\u015fit ise\r\n color: blue; // color blue olur\r\n }\r\n @else if $variable != 1{ // yukar\u0131daki \u015fart do\u011fru oldu\u011fu i\u00e7in o \u00e7al\u0131\u015f\u0131r ve pc bu \u015farta bakmaz bile, yukar\u0131daki if blo\u011fu yanl\u0131\u015f ise bakar ama.\r\n color: red;\r\n }\r\n @else{ // hem if hem @else if yanl\u0131\u015f yani \u00e7al\u0131\u015fmam\u0131\u015f ise bu blok \u00e7al\u0131\u015f\u0131r.\r\n color:white;\r\n }\r\n}\r\n```\r\n\r\n### @else\r\nElse ko\u015fullu durum, @if veya @else if'in \u00e7al\u0131\u015fmad\u0131\u011f\u0131 durumlarda \u00e7al\u0131\u015f\u0131r\u0131, yani @else'in \u015fart\u0131 di\u011fer \u015fartlar\u0131n \u00e7al\u0131\u015fmama durumudur, bu y\u00fczden @else ilave bir \u015fart ( boolen karakter almaz ) direk @else{} \u015feklinde yaz\u0131l\u0131r yukar\u0131da bir \u00f6rne\u011fimiz mevcut.\r\n\r\n### @for\r\n**For** d\u00f6ng\u00fcs\u00fc belirli bir noktadan belirli bir noktaya kadar yap\u0131lan d\u00f6ng\u00fcler i\u00e7in kullan\u0131l\u0131r, \u00f6rnek olarak 1'den 100'e kadar gibi d\u00f6ng\u00fclerde **while** yerine for kullanmak daha pratiktir, syntax'\u0131 a\u015fa\u011f\u0131da verilmi\u015ftir.\r\n\r\nSyntax;\r\n```sass\r\n@for <var> from <start> through <end> {\r\n <statements>\r\n}\r\n@for <var> from <start> to <end> { // veya\r\n <statements>\r\n}\r\n```\r\n\r\n10 kere \u00e7al\u0131\u015fan bir for d\u00f6ng\u00fcs\u00fc yapal\u0131m.\r\n```sass\r\n@for $i from 1 through 6 {\r\n .width-#{$i} {\r\n width: 0% * $i;\r\n }\r\n}\r\n```\r\n\r\nSonu\u00e7;\r\n\r\n```css\r\n.width-1{\r\n\twidth: 1%;\r\n}\r\n.width-2{\r\n\twidth: 2%;\r\n}\r\n.width-3{\r\n\twidth: 3%;\r\n}\r\n.width-4{\r\n\twidth: 4%;\r\n}\r\n.width-5{\r\n\twidth: 5%;\r\n}\r\n```\r\n\r\n### @while\r\n@while d\u00f6ng\u00fcm\u00fcz bir boolen ( true veya false ) de\u011fer al\u0131r ve ald\u0131\u011f\u0131 de\u011fer do\u011fru oldu\u011fu s\u00fcre boyunca \u00e7al\u0131\u015f\u0131r.\r\n\r\n```sass\r\n$variable: 4;\r\n@while $variable < 6 {\r\n .myclass-#{$variable} { // css i\u00e7in yaz\u0131lm\u0131\u015f kod blogu\r\n color: red;\r\n }\r\n\t$variable : $variable + 1; // kod blo\u011fundan sonra, de\u011fi\u015fkenimi 1 artt\u0131r\u0131yorum\r\n\t// yoksa d\u00f6ng\u00fc sonsuza kadar \u00e7al\u0131\u015fmak isteyecektir, de\u011fi\u015fkenim 6 oldu\u011fu zaman\r\n\t// $variable < 6 bu \u015fart false olaca\u011f\u0131ndan d\u00f6ng\u00fc duracakt\u0131r\u00e7\r\n}\r\n```\r\n\r\n### @each\r\nSon olarak @each d\u00f6ng\u00fcm\u00fcz bir liste elemanlar\u0131n\u0131 veya s\u00f6zl\u00fck elemanlar\u0131n\u0131 kullanarak d\u00f6ng\u00fc yapmam\u0131z\u0131 sa\u011flar bu t\u0131pk\u0131 python probramlama dilindeki for d\u00f6ng\u00fcs\u00fc gibidir.\r\n\r\nS\u00f6zl\u00fck veri tipi;\r\n`$map: (key1: value1, key2: value2, key3: value3);`\r\n\r\nSyntax ;\r\n```sass\r\n@each <variables> in <list or map> {\r\n <statements>\r\n}\r\n```\r\n\r\n\u00d6rnek;\r\n```sass\r\n@each $size in (10, 12, 14, 16) {\r\n .font-#{$size} {font-size: 0px+$size;}\r\n}\r\n```\r\n\r\nSonu\u00e7;\r\n\r\n```sass\r\n.font-10 {font-size: 10px;}\r\n.font-12 {font-size: 12px;}\r\n.font-14 {font-size: 14px;}\r\n.font-16 {font-size: 16px;}\r\n```\r\n\r\nliste i\u00e7ine liste'de verebilirsiniz\r\n\r\n```sass\r\n@each $name, $style, $size, $color in ((normal, bold, 10px, red), (emphasis, bold, 15px, white)) {\r\n .text-#{$name} {\r\n font-weight: $style;\r\n text-size: $size;\r\n\t color:$color;\r\n }\r\n}\r\n```\r\n\r\nSonu\u00e7;\r\n```css\r\n.text-normal {\r\n font-weight: bold;\r\n font-size: 10px;\r\n color:red;\r\n}\r\n\r\n.text-emphasis {\r\n font-weight: bold;\r\n font-size: 15px;\r\n color:white;\r\n}\r\n```\r\n\r\n-------------\r\n\r\n### Not;\r\n\r\n- D\u00f6ng\u00fclerinizin veya ko\u015fullu durumlar\u0131n\u0131z\u0131n i\u00e7ine kodlad\u0131\u011f\u0131n\u0131z mixinsleri yazarak veya @extend ile di\u011fer css kodlar\u0131n\u0131z\u0131 dahil ederek kullanabilirsiniz.\r\n\r\n- Mixinslerinizin i\u00e7irisine @include mixin_ismi($parametre); \u015feklinde mixin dahil edebilir, yine @extend ile di\u011fer css kodlar\u0131n\u0131z\u0131 dahil edebilirsiniz.\r\n\r\n<div general=\"center bg-dark c-white br-2\">Okudu\u011funuz i\u00e7in te\u015fekk\u00fcrler g\u00f6r\u00fc\u015fmek \u00fczere</div>\r\n-"}}" |
|---|
hiveblocks