&<\/code> Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi<\/h2>\nSass (Syntactically Awesome Style Sheets), CSS yaz\u0131m s\u00fcrecini daha dinamik, verimli ve s\u00fcrd\u00fcr\u00fclebilir hale getiren pop\u00fcler bir CSS \u00f6n i\u015flemcisidir. Geleneksel CSS’in baz\u0131 k\u0131s\u0131tlamalar\u0131n\u0131 a\u015farak, de\u011fi\u015fkenler, mixin’ler, fonksiyonlar, import kurallar\u0131 ve en \u00f6nemlisi i\u00e7 i\u00e7e yerle\u015ftirme (nesting) gibi \u00f6zellikler sunar. \u0130\u00e7 i\u00e7e yerle\u015ftirme, Sass’\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir ve se\u00e7icileri, HTML yap\u0131s\u0131na benzer bir hiyerar\u015fi i\u00e7inde d\u00fczenlememizi sa\u011flar. Bu hiyerar\u015fi i\u00e7inde, ebeveyn se\u00e7iciye referans verme yetene\u011fi, Sass’\u0131n &<\/code> operat\u00f6r\u00fc arac\u0131l\u0131\u011f\u0131yla sa\u011flan\u0131r ve bu, daha mod\u00fcler, okunakl\u0131 ve DRY (Don’t Repeat Yourself) prensibine uygun CSS yazman\u0131n anahtarlar\u0131ndan biridir.<\/p>\nBu makalede, Sass’taki ebeveyn se\u00e7iciye referans verme mekanizmas\u0131n\u0131, yani &<\/code> operat\u00f6r\u00fcn\u00fc derinlemesine inceleyece\u011fiz. Temel kullan\u0131mlar\u0131ndan ba\u015flayarak, pseudo-s\u0131n\u0131flar, pseudo-elementler, nitelik se\u00e7iciler ve birle\u015fik se\u00e7icilerle olan etkile\u015fimlerini ele alaca\u011f\u0131z. Ard\u0131ndan, modifikat\u00f6rler, prefixleme, medya sorgular\u0131 ve @at-root<\/code> kural\u0131 gibi daha geli\u015fmi\u015f senaryolarda &<\/code> operat\u00f6r\u00fcn\u00fcn nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ke\u015ffedece\u011fiz. Son olarak, yayg\u0131n hatalara, en iyi pratiklere ve &<\/code> operat\u00f6r\u00fcn\u00fcn modern CSS geli\u015ftirme yakla\u015f\u0131mlar\u0131ndaki yerine de\u011finece\u011fiz.<\/p>\nGiri\u015f: Sass ve Ebeveyn Se\u00e7icinin \u00d6nemi<\/h3>\n
Geleneksel CSS’te, bir \u00f6\u011fenin farkl\u0131 durumlar\u0131 (\u00f6rne\u011fin :hover<\/code>, :active<\/code>) veya alt \u00f6\u011feleri i\u00e7in stil tan\u0131mlarken, ebeveyn se\u00e7iciyi her seferinde tekrar yazmak zorunday\u0131z. Bu durum, \u00f6zellikle b\u00fcy\u00fck projelerde veya karma\u015f\u0131k UI bile\u015fenlerinde kod tekrar\u0131na, okunabilirli\u011fin azalmas\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7abilir.<\/p>\n\u00d6rne\u011fin, bir butonun normal ve \u00fczerine gelindi\u011finde (hover) durumlar\u0131n\u0131 stilize etmek istedi\u011fimizde geleneksel CSS ile \u015f\u00f6yle yazard\u0131k:<\/p>\n
\n.button {\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n border-radius: 5px;\n}\n\n.button:hover {\n background-color: #0056b3;\n}\n<\/code><\/pre>\nBu \u00f6rnekte .button<\/code> se\u00e7icisi iki kez tekrar edilmi\u015ftir. K\u00fc\u00e7\u00fck bir \u00f6rnekte bu sorun te\u015fkil etmese de, y\u00fczlerce veya binlerce sat\u0131rl\u0131k CSS dosyalar\u0131nda bu t\u00fcr tekrarlar, dosya boyutunu art\u0131r\u0131r, kodun okunmas\u0131n\u0131 ve anla\u015f\u0131lmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Sass, bu sorunu i\u00e7 i\u00e7e yerle\u015ftirme \u00f6zelli\u011fi ile \u00e7\u00f6zerek, se\u00e7icileri daha mant\u0131ksal bir yap\u0131da gruplamam\u0131za olanak tan\u0131r. Ancak i\u00e7 i\u00e7e yerle\u015ftirmenin ger\u00e7ek g\u00fcc\u00fc, &<\/code> operat\u00f6r\u00fc ile ebeveyn se\u00e7iciye referans verebilme yetene\u011fiyle ortaya \u00e7\u0131kar. Bu operat\u00f6r, hem kod tekrar\u0131n\u0131 azalt\u0131r hem de stillerin ait olduklar\u0131 bile\u015fen ba\u011flam\u0131nda kalmas\u0131n\u0131 sa\u011flayarak daha mod\u00fcler ve anla\u015f\u0131l\u0131r bir yap\u0131 sunar.<\/p>\n&<\/code> Operat\u00f6r\u00fcn\u00fcn Temelleri: Ne \u0130\u015fe Yarar ve Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n&<\/code> operat\u00f6r\u00fc, Sass’ta i\u00e7 i\u00e7e yerle\u015ftirilmi\u015f bir se\u00e7icinin, kendisini \u00e7evreleyen ebeveyn se\u00e7iciyi temsil etmesini sa\u011flayan \u00f6zel bir sembold\u00fcr. Ba\u015fka bir deyi\u015fle, bir se\u00e7icinin \u00f6n\u00fcne veya arkas\u0131na &<\/code> ekledi\u011finizde, Sass derleyicisi bu &<\/code> karakterini, derleme s\u0131ras\u0131nda mevcut ebeveyn se\u00e7ici ile de\u011fi\u015ftirir. Bu, se\u00e7icileri daha k\u0131sa ve ba\u011flamsal bir \u015fekilde yazmam\u0131za olanak tan\u0131r.<\/p>\nEn temel kullan\u0131m\u0131, bir \u00f6\u011fenin pseudo-s\u0131n\u0131flar\u0131n\u0131 veya pseudo-elementlerini tan\u0131mlarken ebeveyn se\u00e7iciyi tekrarlamaktan ka\u00e7\u0131nmakt\u0131r.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n\n\/\/ Sass kodu\n.button {\n background-color: #007bff;\n color: white;\n\n &:hover {\n background-color: #0056b3;\n }\n}\n<\/code><\/pre>\nYukar\u0131daki Sass kodu derlendi\u011finde, a\u015fa\u011f\u0131daki CSS \u00e7\u0131kt\u0131s\u0131n\u0131 \u00fcretecektir:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.button {\n background-color: #007bff;\n color: white;\n}\n\n.button:hover {\n background-color: #0056b3;\n}\n<\/code><\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, &:hover<\/code> ifadesindeki &<\/code>, derleme s\u0131ras\u0131nda .button<\/code> ile de\u011fi\u015ftirilmi\u015ftir. Bu, kodun hem daha k\u0131sa olmas\u0131n\u0131 hem de .button<\/code> ile ilgili t\u00fcm stillerin tek bir blok alt\u0131nda toplanmas\u0131n\u0131 sa\u011flar, bu da okunabilirli\u011fi ve bak\u0131m\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\nTemel Kullan\u0131m Senaryolar\u0131<\/h3>\n
&<\/code> operat\u00f6r\u00fc, \u00e7e\u015fitli se\u00e7ici t\u00fcrleriyle birlikte kullan\u0131larak CSS yaz\u0131m\u0131nda b\u00fcy\u00fck esneklik sa\u011flar. \u0130\u015fte baz\u0131 temel kullan\u0131m senaryolar\u0131:<\/p>\nPseudo-S\u0131n\u0131flar (:hover<\/code>, :focus<\/code>, :active<\/code>, :nth-child<\/code>, vb.)<\/h4>\nBir \u00f6\u011fenin farkl\u0131 durumlar\u0131n\u0131 stilize etmek i\u00e7in pseudo-s\u0131n\u0131flar kullan\u0131l\u0131r. &<\/code> operat\u00f6r\u00fc sayesinde, bu durumlar\u0131 ebeveyn se\u00e7icinin i\u00e7ine kolayca yerle\u015ftirebiliriz.<\/p>\n\n\/\/ Sass kodu\n.link {\n color: blue;\n text-decoration: none;\n\n &:hover {\n color: darkblue;\n text-decoration: underline;\n }\n\n &:active {\n color: red;\n }\n\n &:focus {\n outline: 2px solid orange;\n }\n}\n\nul {\n list-style: none;\n padding: 0;\n\n li {\n margin-bottom: 5px;\n\n &:nth-child(odd) {\n background-color: #f0f0f0;\n }\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.link {\n color: blue;\n text-decoration: none;\n}\n\n.link:hover {\n color: darkblue;\n text-decoration: underline;\n}\n\n.link:active {\n color: red;\n}\n\n.link:focus {\n outline: 2px solid orange;\n}\n\nul {\n list-style: none;\n padding: 0;\n}\n\nul li {\n margin-bottom: 5px;\n}\n\nul li:nth-child(odd) {\n background-color: #f0f0f0;\n}\n<\/code><\/pre>\nPseudo-Elementler (::before<\/code>, ::after<\/code>, ::first-letter<\/code>, vb.)<\/h4>\nBir \u00f6\u011fenin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc stilize etmek veya i\u00e7erik eklemek i\u00e7in pseudo-elementler kullan\u0131l\u0131r. &<\/code> ile bu elementler de ebeveyn se\u00e7icinin i\u00e7ine yerle\u015ftirilebilir.<\/p>\n\n\/\/ Sass kodu\n.tooltip {\n position: relative;\n\n &::before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background-color: black;\n color: white;\n padding: 5px;\n border-radius: 3px;\n white-space: nowrap;\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n &:hover::before {\n opacity: 1;\n }\n\n &::first-letter {\n font-size: 1.2em;\n font-weight: bold;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.tooltip {\n position: relative;\n}\n\n.tooltip::before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background-color: black;\n color: white;\n padding: 5px;\n border-radius: 3px;\n white-space: nowrap;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.tooltip:hover::before {\n opacity: 1;\n}\n\n.tooltip::first-letter {\n font-size: 1.2em;\n font-weight: bold;\n}\n<\/code><\/pre>\nBiti\u015fik Se\u00e7iciler (+<\/code>, ~<\/code>)<\/h4>\nBir \u00f6\u011fenin hemen ard\u0131ndan gelen karde\u015f \u00f6\u011feyi (+<\/code>) veya ayn\u0131 seviyedeki t\u00fcm karde\u015f \u00f6\u011feleri (~<\/code>) se\u00e7mek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\/\/ Sass kodu\n.item {\n margin-bottom: 10px;\n\n & + .item {\n border-top: 1px solid #ccc;\n padding-top: 10px;\n }\n}\n\ninput[type=\"text\"] {\n border: 1px solid #ddd;\n padding: 8px;\n\n & ~ button {\n margin-left: 10px;\n background-color: #eee;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.item {\n margin-bottom: 10px;\n}\n\n.item + .item {\n border-top: 1px solid #ccc;\n padding-top: 10px;\n}\n\ninput[type=\"text\"] {\n border: 1px solid #ddd;\n padding: 8px;\n}\n\ninput[type=\"text\"] ~ button {\n margin-left: 10px;\n background-color: #eee;\n}\n<\/code><\/pre>\n\u00c7ocuk Se\u00e7iciler (><\/code>)<\/h4>\nBir \u00f6\u011fenin do\u011frudan \u00e7ocuk \u00f6\u011fesini se\u00e7mek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\n\/\/ Sass kodu\n.card {\n border: 1px solid #eee;\n padding: 15px;\n\n & > h3 {\n color: #333;\n margin-top: 0;\n }\n\n & > p {\n font-size: 0.9em;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.card {\n border: 1px solid #eee;\n padding: 15px;\n}\n\n.card > h3 {\n color: #333;\n margin-top: 0;\n}\n\n.card > p {\n font-size: 0.9em;\n}\n<\/code><\/pre>\nNitelik Se\u00e7iciler ([attribute]<\/code>)<\/h4>\nBelirli bir niteli\u011fe sahip \u00f6\u011feleri se\u00e7mek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\n\/\/ Sass kodu\n.input-field {\n padding: 8px;\n border: 1px solid #ccc;\n\n &[readonly] {\n background-color: #f9f9f9;\n cursor: not-allowed;\n }\n\n &[type=\"password\"] {\n font-family: monospace;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.input-field {\n padding: 8px;\n border: 1px solid #ccc;\n}\n\n.input-field[readonly] {\n background-color: #f9f9f9;\n cursor: not-allowed;\n}\n\n.input-field[type=\"password\"] {\n font-family: monospace;\n}\n<\/code><\/pre>\nBa\u015fka S\u0131n\u0131flarla veya ID’lerle Birle\u015ftirme (.parent.child<\/code>, #id.class<\/code>)<\/h4>\nBir \u00f6\u011fenin birden fazla s\u0131n\u0131fa veya hem ID hem de s\u0131n\u0131fa sahip oldu\u011fu durumlar\u0131 stilize etmek i\u00e7in &<\/code> operat\u00f6r\u00fcn\u00fc di\u011fer se\u00e7icilerle birle\u015ftirebiliriz.<\/p>\n\n\/\/ Sass kodu\n.message {\n padding: 10px;\n border-radius: 5px;\n\n &.success {\n background-color: #d4edda;\n color: #155724;\n }\n\n &.error {\n background-color: #f8d7da;\n color: #721c24;\n }\n}\n\n#main-nav {\n background-color: #333;\n\n &.collapsed {\n width: 50px;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.message {\n padding: 10px;\n border-radius: 5px;\n}\n\n.message.success {\n background-color: #d4edda;\n color: #155724;\n}\n\n.message.error {\n background-color: #f8d7da;\n color: #721c24;\n}\n\n#main-nav {\n background-color: #333;\n}\n\n#main-nav.collapsed {\n width: 50px;\n}\n<\/code><\/pre>\nBu temel kullan\u0131m senaryolar\u0131, &<\/code> operat\u00f6r\u00fcn\u00fcn CSS yaz\u0131m\u0131n\u0131 nas\u0131l daha d\u00fczenli ve verimli hale getirdi\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\nGeli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131<\/h3>\n
&<\/code> operat\u00f6r\u00fc, sadece temel se\u00e7ici kombinasyonlar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda daha karma\u015f\u0131k ve geli\u015fmi\u015f senaryolarda da b\u00fcy\u00fck fayda sa\u011flar.<\/p>\n&<\/code> ile Se\u00e7iciyi De\u011fi\u015ftirme veya Geni\u015fletme (Modifikat\u00f6rler)<\/h4>\n&<\/code> operat\u00f6r\u00fc, BEM (Block, Element, Modifier) gibi CSS metodolojilerinde modifikat\u00f6r s\u0131n\u0131flar\u0131 olu\u015fturmak i\u00e7in son derece kullan\u0131\u015fl\u0131d\u0131r. Bu, bir bile\u015fenin farkl\u0131 varyasyonlar\u0131n\u0131 tan\u0131mlamam\u0131za olanak tan\u0131r.<\/p>\n\n\/\/ Sass kodu\n.button {\n display: inline-block;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n\n \/\/ Modifikat\u00f6rler\n &--primary {\n background-color: #007bff;\n color: white;\n\n &:hover {\n background-color: #0056b3;\n }\n }\n\n &--secondary {\n background-color: #6c757d;\n color: white;\n\n &:hover {\n background-color: #5a6268;\n }\n }\n\n &--large {\n padding: 15px 30px;\n font-size: 18px;\n }\n\n &[disabled] {\n opacity: 0.6;\n cursor: not-allowed;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.button {\n display: inline-block;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n}\n\n.button--primary {\n background-color: #007bff;\n color: white;\n}\n\n.button--primary:hover {\n background-color: #0056b3;\n}\n\n.button--secondary {\n background-color: #6c757d;\n color: white;\n}\n\n.button--secondary:hover {\n background-color: #5a6268;\n}\n\n.button--large {\n padding: 15px 30px;\n font-size: 18px;\n}\n\n.button[disabled] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n<\/code><\/pre>\nBu kullan\u0131m, .button<\/code> bile\u015feninin t\u00fcm varyasyonlar\u0131n\u0131 tek bir Sass blo\u011fu alt\u0131nda toplar, bu da kodun okunmas\u0131n\u0131 ve y\u00f6netilmesini kolayla\u015ft\u0131r\u0131r.<\/p>\n&<\/code> ile Se\u00e7icileri \u00d6nceden Ekleme (Prefixleme)<\/h4>\n&<\/code> operat\u00f6r\u00fc, bir se\u00e7icinin \u00f6n\u00fcne metin eklemek i\u00e7in de kullan\u0131labilir. Bu, \u00f6zellikle bir bile\u015fen veya mod\u00fcl i\u00e7in benzersiz bir ad alan\u0131 (namespace) olu\u015fturmak istedi\u011finizde veya BEM gibi metodolojilerde element isimlerini olu\u015ftururken faydal\u0131d\u0131r.<\/p>\n\n\/\/ Sass kodu\n.modal {\n background-color: white;\n border: 1px solid #ccc;\n padding: 20px;\n\n &__header {\n font-size: 1.5em;\n margin-bottom: 10px;\n }\n\n &__body {\n line-height: 1.6;\n }\n\n &__footer {\n text-align: right;\n margin-top: 20px;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.modal {\n background-color: white;\n border: 1px solid #ccc;\n padding: 20px;\n}\n\n.modal__header {\n font-size: 1.5em;\n margin-bottom: 10px;\n}\n\n.modal__body {\n line-height: 1.6;\n}\n\n.modal__footer {\n text-align: right;\n margin-top: 20px;\n}\n<\/code><\/pre>\nBurada, &__header<\/code> ifadesi, .modal__header<\/code> olarak derlenir. Bu, bile\u015fenin elementlerinin adland\u0131r\u0131lmas\u0131nda tutarl\u0131l\u0131k sa\u011flar ve \u00e7ak\u0131\u015fmalar\u0131 \u00f6nler.<\/p>\n&<\/code> ile Se\u00e7ici Listeleri (.a, .b<\/code>)<\/h4>\nSass, virg\u00fclle ayr\u0131lm\u0131\u015f se\u00e7ici listelerini i\u00e7 i\u00e7e yerle\u015ftirme ile birlikte kullanman\u0131za izin verir. &<\/code> operat\u00f6r\u00fc, bu senaryoda da i\u015fe yarar ve her bir se\u00e7ici i\u00e7in ebeveyn referans\u0131n\u0131 korur.<\/p>\n\n\/\/ Sass kodu\n.dark-theme {\n background-color: #333;\n color: white;\n\n & h1,\n & h2,\n & h3 {\n color: #eee;\n border-bottom: 1px solid #555;\n }\n\n & .card,\n & .panel {\n background-color: #444;\n border-color: #666;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.dark-theme {\n background-color: #333;\n color: white;\n}\n\n.dark-theme h1,\n.dark-theme h2,\n.dark-theme h3 {\n color: #eee;\n border-bottom: 1px solid #555;\n}\n\n.dark-theme .card,\n.dark-theme .panel {\n background-color: #444;\n border-color: #666;\n}\n<\/code><\/pre>\nBu, belirli bir ba\u011flamdaki birden fazla \u00f6\u011feye ayn\u0131 stil setini uygulamak i\u00e7in olduk\u00e7a etkilidir.<\/p>\n
&<\/code> ile \u0130\u00e7 \u0130\u00e7e Ge\u00e7mi\u015f Medya Sorgular\u0131<\/h4>\nDuyarl\u0131 tasar\u0131mda, bir bile\u015fenin farkl\u0131 ekran boyutlar\u0131nda nas\u0131l g\u00f6r\u00fcnece\u011fini belirlemek i\u00e7in medya sorgular\u0131 kullan\u0131l\u0131r. Sass, medya sorgular\u0131n\u0131 se\u00e7icilerin i\u00e7ine yerle\u015ftirmenize olanak tan\u0131r ve &<\/code> operat\u00f6r\u00fc, bu i\u00e7 i\u00e7e ge\u00e7mi\u015f ba\u011flamda ebeveyn se\u00e7iciye referans vermeyi m\u00fcmk\u00fcn k\u0131lar.<\/p>\n\n\/\/ Sass kodu\n.container {\n width: 90%;\n margin: 0 auto;\n padding: 20px;\n\n @media (min-width: 768px) {\n width: 70%;\n padding: 30px;\n\n &.full-width {\n width: 100%;\n }\n }\n\n @media (min-width: 1200px) {\n width: 60%;\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.container {\n width: 90%;\n margin: 0 auto;\n padding: 20px;\n}\n\n@media (min-width: 768px) {\n .container {\n width: 70%;\n padding: 30px;\n }\n\n .container.full-width {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .container {\n width: 60%;\n }\n}\n<\/code><\/pre>\nBu yakla\u015f\u0131m, bir bile\u015fenin t\u00fcm duyarl\u0131 stil varyasyonlar\u0131n\u0131 tek bir yerde tutar, bu da kodun organizasyonunu ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
&<\/code> ile \u0130\u00e7 \u0130\u00e7e Ge\u00e7mi\u015f @supports<\/code> Kurallar\u0131<\/h4>\n@supports<\/code> kural\u0131, taray\u0131c\u0131n\u0131n belirli bir CSS \u00f6zelli\u011fini destekleyip desteklemedi\u011fini kontrol etmek i\u00e7in kullan\u0131l\u0131r. &<\/code> operat\u00f6r\u00fc, medya sorgular\u0131nda oldu\u011fu gibi, @supports<\/code> kurallar\u0131n\u0131 da i\u00e7 i\u00e7e yerle\u015ftirirken ebeveyn se\u00e7iciye referans vermeyi sa\u011flar.<\/p>\n\n\/\/ Sass kodu\n.card {\n border: 1px solid #ccc;\n padding: 15px;\n\n @supports (display: grid) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n\n & > .card-header {\n grid-column: 1 \/ -1;\n font-weight: bold;\n }\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.card {\n border: 1px solid #ccc;\n padding: 15px;\n}\n\n@supports (display: grid) {\n .card {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .card > .card-header {\n grid-column: 1 \/ -1;\n font-weight: bold;\n }\n}\n<\/code><\/pre>\nBu, ilerici iyile\u015ftirme (progressive enhancement) stratejileri uygularken veya belirli taray\u0131c\u0131 \u00f6zellikleri i\u00e7in yedek stiller sa\u011flarken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
&<\/code> ve @at-root<\/code> Kural\u0131<\/h4>\nBazen, i\u00e7 i\u00e7e yerle\u015ftirilmi\u015f bir se\u00e7icinin ebeveyn se\u00e7iciyle birle\u015fmesini istemeyebiliriz; bunun yerine, tamamen yeni bir se\u00e7ici olu\u015fturmak isteyebiliriz. \u0130\u015fte bu noktada @at-root<\/code> kural\u0131 devreye girer. @at-root<\/code>, bir veya daha fazla kural\u0131 veya se\u00e7iciyi, i\u00e7 i\u00e7e yerle\u015ftirildi\u011fi yerden \u00e7\u0131kararak CSS dosyas\u0131n\u0131n en \u00fcst seviyesine ta\u015f\u0131r. &<\/code> operat\u00f6r\u00fc @at-root<\/code> ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, ebeveyn se\u00e7iciyi tamamen g\u00f6z ard\u0131 ederek yeni bir se\u00e7ici olu\u015fturabiliriz.<\/p>\n\n\/\/ Sass kodu\n.parent {\n color: blue;\n\n .child {\n font-size: 16px;\n\n @at-root .no-parent-link & { \/\/ & burada .child'\u0131 temsil eder\n background-color: yellow;\n }\n\n @at-root body.dark & { \/\/ & burada .child'\u0131 temsil eder\n color: white;\n }\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.parent {\n color: blue;\n}\n\n.parent .child {\n font-size: 16px;\n}\n\n.no-parent-link .child {\n background-color: yellow;\n}\n\nbody.dark .child {\n color: white;\n}\n<\/code><\/pre>\nBu \u00f6rnekte, &<\/code> operat\u00f6r\u00fc @at-root<\/code> i\u00e7inde kullan\u0131ld\u0131\u011f\u0131nda, ebeveyn .parent<\/code> se\u00e7icisi tamamen yok say\u0131l\u0131r ve .no-parent-link .child<\/code> ve body.dark .child<\/code> gibi yeni, ba\u011f\u0131ms\u0131z se\u00e7iciler olu\u015fturulur. Bu, \u00f6zellikle global s\u0131n\u0131flar\u0131n veya belirli ba\u011flamlardaki \u00f6zel durumlar\u0131n stilini tan\u0131mlarken, ancak ana bile\u015fenin hiyerar\u015fisinden ba\u011f\u0131ms\u0131z kalmas\u0131n\u0131 istedi\u011fimizde faydal\u0131d\u0131r.<\/p>\nYayg\u0131n Hatalar ve Dikkat Edilmesi Gerekenler<\/h3>\n
&<\/code> operat\u00f6r\u00fc g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda potansiyel sorunlara yol a\u00e7abilir.<\/p>\nA\u015f\u0131r\u0131 \u0130\u00e7 \u0130\u00e7e Ge\u00e7me (Deep Nesting)<\/h4>\n
Sass’\u0131n i\u00e7 i\u00e7e yerle\u015ftirme \u00f6zelli\u011fi, kodu d\u00fczenlemek i\u00e7in harika bir yol olsa da, a\u015f\u0131r\u0131ya ka\u00e7mak derlenmi\u015f CSS’te \u00e7ok karma\u015f\u0131k ve uzun se\u00e7icilere neden olabilir. Bu, hem okunabilirli\u011fi zorla\u015ft\u0131r\u0131r hem de CSS dosyas\u0131n\u0131n boyutunu art\u0131rarak performans sorunlar\u0131na yol a\u00e7abilir. Genellikle, 3-4 seviyeden fazla i\u00e7 i\u00e7e ge\u00e7mekten ka\u00e7\u0131n\u0131lmas\u0131 \u00f6nerilir.<\/p>\n
\n\/\/ K\u00f6t\u00fc \u00f6rnek: A\u015f\u0131r\u0131 i\u00e7 i\u00e7e ge\u00e7me\n.header {\n .nav {\n ul {\n li {\n a {\n color: blue;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS: .header .nav ul li a:hover { text-decoration: underline; }<\/code>
\nBu kadar uzun bir se\u00e7ici, taray\u0131c\u0131n\u0131n stil e\u015fle\u015ftirme performans\u0131n\u0131 olumsuz etkileyebilir ve HTML yap\u0131s\u0131nda yap\u0131lacak k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklikte bile CSS’i bozabilir.<\/p>\nAnla\u015f\u0131lmas\u0131 Zor Se\u00e7iciler Olu\u015fturma<\/h4>\n
&<\/code> operat\u00f6r\u00fcn\u00fc yarat\u0131c\u0131 bir \u015fekilde kullanmak cazip gelse de, her zaman derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131n\u0131n ne olaca\u011f\u0131n\u0131 ve bu se\u00e7icinin ne anlama geldi\u011fini d\u00fc\u015f\u00fcnmelisiniz. \u00c7ok karma\u015f\u0131k veya belirsiz &<\/code> kullan\u0131mlar\u0131, di\u011fer geli\u015ftiricilerin kodu anlamas\u0131n\u0131 ve s\u00fcrd\u00fcrmesini zorla\u015ft\u0131rabilir.<\/p>\n\n\/\/ Kafa kar\u0131\u015ft\u0131r\u0131c\u0131 \u00f6rnek\n.component {\n \/\/ ...\n .item {\n \/\/ ...\n &.is-active ~ & + .sibling {\n \/\/ ...\n }\n }\n}\n<\/code><\/pre>\nBu t\u00fcr bir se\u00e7iciyi okumak ve anlamak zordur. M\u00fcmk\u00fcn oldu\u011funca a\u00e7\u0131k ve \u00f6ng\u00f6r\u00fclebilir se\u00e7iciler olu\u015fturmaya \u00e7al\u0131\u015f\u0131n.<\/p>\n
Derlenmi\u015f CSS Boyutu<\/h4>\n
Her ne kadar Sass kodu k\u0131sa ve \u00f6z g\u00f6r\u00fcnse de, derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131 beklenenden daha b\u00fcy\u00fck olabilir. &<\/code> operat\u00f6r\u00fc, tekrarlayan se\u00e7icileri azaltmaya yard\u0131mc\u0131 olsa da, \u00e7ok fazla i\u00e7 i\u00e7e ge\u00e7me veya \u00e7ok say\u0131da modifikat\u00f6r, sonu\u00e7ta b\u00fcy\u00fck bir CSS dosyas\u0131na yol a\u00e7abilir. Her zaman derlenmi\u015f \u00e7\u0131kt\u0131y\u0131 kontrol etmek ve gereksiz tekrarlar\u0131 veya karma\u015f\u0131k se\u00e7icileri optimize etmek \u00f6nemlidir.<\/p>\nEn \u0130yi Pratikler<\/h3>\n
&<\/code> operat\u00f6r\u00fcn\u00fc etkili ve s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi pratikler \u015funlard\u0131r:<\/p>\nNe Zaman Kullan\u0131lmal\u0131, Ne Zaman Ka\u00e7\u0131n\u0131lmal\u0131?<\/h4>\n
* Kullan\u0131n:<\/strong>
\n * Bir bile\u015fenin kendi pseudo-s\u0131n\u0131flar\u0131 (:hover<\/code>, :focus<\/code>) veya pseudo-elementleri (::before<\/code>, ::after<\/code>) i\u00e7in.
\n * Bile\u015fenin modifikat\u00f6r s\u0131n\u0131flar\u0131 (.button--primary<\/code>) veya durum s\u0131n\u0131flar\u0131 (.is-active<\/code>) i\u00e7in.
\n * Bile\u015fenin i\u00e7indeki elementler i\u00e7in BEM benzeri bir adland\u0131rma yaparken (&__element<\/code>).
\n * Medya sorgular\u0131n\u0131 veya @supports<\/code> kurallar\u0131n\u0131 bir bile\u015fenin i\u00e7inde tutarak ba\u011flam\u0131 korumak i\u00e7in.
\n* Ka\u00e7\u0131n\u0131n:<\/strong>
\n * \u00c7ok derin i\u00e7 i\u00e7e ge\u00e7mekten (maksimum 3-4 seviye).
\n * Ebeveyn-\u00e7ocuk ili\u015fkisi olmayan veya zay\u0131f olan se\u00e7icileri i\u00e7 i\u00e7e yerle\u015ftirmekten.
\n * \u00c7ok genel se\u00e7icileri (\u00f6rne\u011fin div<\/code>, p<\/code>) i\u00e7 i\u00e7e yerle\u015ftirmekten, bu durum global stilleri beklenmedik \u015fekilde etkileyebilir.<\/p>\nOkunabilirlik ve S\u00fcrd\u00fcr\u00fclebilirlik<\/h4>\n
* Tutarl\u0131 \u0130simlendirme:<\/strong> &<\/code> operat\u00f6r\u00fcn\u00fc kullan\u0131rken tutarl\u0131 bir adland\u0131rma kural\u0131 (\u00f6rne\u011fin BEM) benimseyin. Bu, kodun anla\u015f\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n* Yorumlar:<\/strong> Karma\u015f\u0131k &<\/code> kullan\u0131mlar\u0131n\u0131 a\u00e7\u0131klayan yorumlar ekleyin.
\n* K\u0131sa ve \u00d6z Olun:<\/strong> Sass kodu k\u0131sa ve \u00f6z olmal\u0131, ancak okunabilirlikten \u00f6d\u00fcn vermemelidir.<\/p>\nBEM veya Di\u011fer Metodolojilerle Entegrasyon<\/h4>\n
BEM (Block, Element, Modifier) gibi metodolojiler, &<\/code> operat\u00f6r\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc tam olarak kullanmak i\u00e7in ideal bir \u00e7er\u00e7eve sunar.
\n* Bloklar:<\/strong> Ana bile\u015feni temsil eder (\u00f6rn. .card<\/code>).
\n* Elementler:<\/strong> Blo\u011fun par\u00e7alar\u0131d\u0131r (\u00f6rn. .card__title<\/code>). Sass’ta &__title<\/code> olarak yaz\u0131l\u0131r.
\n* Modifikat\u00f6rler:<\/strong> Blo\u011fun veya elementin farkl\u0131 durumlar\u0131n\u0131 veya varyasyonlar\u0131n\u0131 temsil eder (\u00f6rn. .card--primary<\/code>). Sass’ta &--primary<\/code> olarak yaz\u0131l\u0131r.<\/p>\nBu yap\u0131, &<\/code> operat\u00f6r\u00fcn\u00fcn do\u011fal ak\u0131\u015f\u0131yla m\u00fckemmel bir uyum i\u00e7indedir ve son derece \u00f6l\u00e7eklenebilir ve s\u00fcrd\u00fcr\u00fclebilir bir CSS mimarisi olu\u015fturman\u0131za yard\u0131mc\u0131 olur.<\/p>\n\n\/\/ BEM ve & ile \u00f6rnek\n.product-card { \/\/ Blok\n border: 1px solid #ddd;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n\n &__image { \/\/ Element\n width: 100%;\n height: 150px;\n object-fit: cover;\n margin-bottom: 0.5rem;\n }\n\n &__title { \/\/ Element\n font-size: 1.2rem;\n margin-bottom: 0.5rem;\n }\n\n &__price { \/\/ Element\n font-weight: bold;\n color: #e44d26;\n }\n\n &--featured { \/\/ Modifikat\u00f6r\n border-color: #e44d26;\n box-shadow: 0 0 10px rgba(228, 77, 38, 0.2);\n\n .product-card__title { \/\/ Modifiye edilmi\u015f element\n color: #e44d26;\n }\n }\n\n &:hover { \/\/ Blokun pseudo-s\u0131n\u0131f\u0131\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n}\n<\/code><\/pre>\nDerlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131:<\/p>\n
\n\/\/ Derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131\n.product-card {\n border: 1px solid #ddd;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n}\n\n.product-card__image {\n width: 100%;\n height: 150px;\n object-fit: cover;\n margin-bottom: 0.5rem;\n}\n\n.product-card__title {\n font-size: 1.2rem;\n margin-bottom: 0.5rem;\n}\n\n.product-card__price {\n font-weight: bold;\n color: #e44d26;\n}\n\n.product-card--featured {\n border-color: #e44d26;\n box-shadow: 0 0 10px rgba(228, 77, 38, 0.2);\n}\n\n.product-card--featured .product-card__title {\n color: #e44d26;\n}\n\n.product-card:hover {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n<\/code><\/pre>\nBu \u00f6rnek, &<\/code> operat\u00f6r\u00fcn\u00fcn BEM ile nas\u0131l g\u00fc\u00e7l\u00fc bir sinerji olu\u015fturdu\u011funu ve kodun ne kadar d\u00fczenli ve okunabilir hale geldi\u011fini g\u00f6stermektedir.<\/p>\nSonu\u00e7<\/h3>\n
Sass’taki &<\/code> operat\u00f6r\u00fc, ebeveyn se\u00e7iciye referans verme yetene\u011fiyle, CSS geli\u015ftirme s\u00fcrecini d\u00f6n\u00fc\u015ft\u00fcren temel bir \u00f6zelliktir. Kod tekrar\u0131n\u0131 azalt\u0131r, se\u00e7icileri daha ba\u011flamsal hale getirir ve stil dosyalar\u0131n\u0131n organizasyonunu \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Pseudo-s\u0131n\u0131flardan ve pseudo-elementlerden, modifikat\u00f6rlere, medya sorgular\u0131na ve hatta @at-root<\/code> kural\u0131na kadar geni\u015f bir kullan\u0131m yelpazesi sunar.<\/p>\nAncak, her g\u00fc\u00e7l\u00fc ara\u00e7 gibi, &<\/code> operat\u00f6r\u00fcn\u00fcn de bilin\u00e7li ve dikkatli kullan\u0131lmas\u0131 gerekir. A\u015f\u0131r\u0131 i\u00e7 i\u00e7e ge\u00e7mekten ka\u00e7\u0131nmak, okunabilirli\u011fi \u00f6n planda tutmak ve derlenmi\u015f CSS \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak, s\u00fcrd\u00fcr\u00fclebilir ve performansl\u0131 stil sayfalar\u0131 olu\u015fturman\u0131n anahtar\u0131d\u0131r. BEM gibi metodolojilerle entegre edildi\u011finde, &<\/code> operat\u00f6r\u00fc, b\u00fcy\u00fck ve karma\u015f\u0131k projelerde bile CSS kodunuzu d\u00fczenli, mod\u00fcler ve y\u00f6netilebilir tutman\u0131za yard\u0131mc\u0131 olan vazge\u00e7ilmez bir ara\u00e7 haline gelir. Bu operat\u00f6r\u00fc ustaca kullanmak, modern web geli\u015ftiricileri i\u00e7in daha temiz, daha verimli ve daha keyifli bir stil yazma deneyimi demektir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Sass’ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi\nSass (Syntactically Awesome Style Sheets), CSS yaz\u0131m s\u00fcrecini daha","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-38520","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nSass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi\" \/>\n<meta property=\"og:description\" content=\"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi Sass (Syntactically Awesome Style Sheets), CSS yaz\u0131m s\u00fcrecini daha\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-02T00:40:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Sass’ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi\",\"datePublished\":\"2026-02-02T00:40:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\"},\"wordCount\":2281,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\",\"name\":\"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-02T00:40:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sass’ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/","og_locale":"tr_TR","og_type":"article","og_title":"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi","og_description":"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi Sass (Syntactically Awesome Style Sheets), CSS yaz\u0131m s\u00fcrecini daha","og_url":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-02T00:40:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Sass’ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi","datePublished":"2026-02-02T00:40:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/"},"wordCount":2281,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/","url":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/","name":"Sass'ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-02T00:40:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/sassta-ebeveyn-seciciye-referans-verme-operatorunun-gucu-ve-esnekligi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Sass’ta Ebeveyn Se\u00e7iciye Referans Verme: & Operat\u00f6r\u00fcn\u00fcn G\u00fcc\u00fc ve Esnekli\u011fi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38520"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38520\/revisions"}],"predecessor-version":[{"id":38521,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38520\/revisions\/38521"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}