{"id":36415,"date":"2025-12-16T02:41:31","date_gmt":"2025-12-15T23:41:31","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36415"},"modified":"2025-12-16T02:41:31","modified_gmt":"2025-12-15T23:41:31","slug":"sass-degiskenlerine-giris-neden-ihtiyac-duyariz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/","title":{"rendered":"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?"},"content":{"rendered":"<p><body><\/p>\n<p>Web geli\u015ftirme s\u00fcre\u00e7lerinde stil y\u00f6netimi, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a zorla\u015fabilir. Tekrar eden renkler, font boyutlar\u0131, bo\u015fluk de\u011ferleri gibi CSS \u00f6zelliklerini her yerde manuel olarak tan\u0131mlamak hem zaman kayb\u0131na yol a\u00e7ar hem de bak\u0131m\u0131n\u0131 olduk\u00e7a g\u00fc\u00e7le\u015ftirir. \u0130\u015fte tam bu noktada Sass (Syntactically Awesome Style Sheets) devreye girerek CSS yaz\u0131m\u0131n\u0131 \u00e7ok daha esnek, g\u00fc\u00e7l\u00fc ve y\u00f6netilebilir hale getirir. Sass&#8217;\u0131n sundu\u011fu en temel ve g\u00fc\u00e7l\u00fc \u00f6zelliklerden biri de &#8220;De\u011fi\u015fkenler&#8221;dir.<\/p>\n<p>Bu teknik rehberde, Sass de\u011fi\u015fkenlerinin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, kapsamlar\u0131n\u0131, farkl\u0131 t\u00fcrlerini ve ger\u00e7ek d\u00fcnya projelerinde nas\u0131l pratik faydalar sa\u011flad\u0131\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, en s\u0131k kar\u015f\u0131la\u015f\u0131lan sorulara yan\u0131tlar sunarak Sass de\u011fi\u015fkenlerini ustaca kullanman\u0131z\u0131 sa\u011flayacak bilgiler edineceksiniz.<\/p>\n<h2>Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?<\/h2>\n<p>Geleneksel CSS&#8217;te, bir rengi veya bir font boyutunu de\u011fi\u015ftirmek istedi\u011finizde, bu de\u011feri kulland\u0131\u011f\u0131n\u0131z her yerde tek tek g\u00fcncellemeniz gerekir. Bu durum, \u00f6zellikle b\u00fcy\u00fck projelerde veya tema de\u011fi\u015fikliklerinde korkun\u00e7 bir kabusa d\u00f6n\u00fc\u015febilir. Sass de\u011fi\u015fkenleri, bu sorunu k\u00f6kten \u00e7\u00f6zerek stil de\u011ferlerini merkezile\u015ftirmenizi sa\u011flar.<\/p>\n<p>Sass de\u011fi\u015fkenleri, t\u0131pk\u0131 programlama dillerindeki de\u011fi\u015fkenler gibi, bir de\u011feri depolayan adland\u0131r\u0131lm\u0131\u015f yer tutuculard\u0131r. Bu sayede, bir de\u011feri bir kez tan\u0131mlay\u0131p projenizin herhangi bir yerinde tekrar tekrar kullanabilirsiniz. De\u011feri g\u00fcncellemeniz gerekti\u011finde ise sadece de\u011fi\u015fkenin tan\u0131mland\u0131\u011f\u0131 yeri de\u011fi\u015ftirmeniz yeterli olur; bu de\u011fi\u015fiklik, de\u011fi\u015fkenin kullan\u0131ld\u0131\u011f\u0131 her yere otomatik olarak yans\u0131r. Bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azalt\u0131r, stil sayfalar\u0131n\u0131z\u0131 daha okunakl\u0131 ve bak\u0131m\u0131 kolay hale getirir.<\/p>\n<h3>Sass De\u011fi\u015fkenlerinin Temel Faydalar\u0131:<\/h3>\n<ul>\n<li><strong>Kod Tekrar\u0131n\u0131 Azaltma:<\/strong> Ortak de\u011ferleri bir kez tan\u0131mlay\u0131p her yerde kullan\u0131rs\u0131n\u0131z.<\/li>\n<li><strong>Daha Kolay Bak\u0131m:<\/strong> Bir de\u011feri g\u00fcncellemek i\u00e7in tek bir yere m\u00fcdahale etmeniz yeterlidir.<\/li>\n<li><strong>Daha Okunabilir Kod:<\/strong> Anlaml\u0131 de\u011fi\u015fken isimleri kullanarak kodunuzun ne anlama geldi\u011fini daha kolay anlars\u0131n\u0131z.<\/li>\n<li><strong>Tutarl\u0131l\u0131k:<\/strong> Proje genelinde renk, font, bo\u015fluk gibi de\u011ferlerin tutarl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>Esneklik:<\/strong> Tema de\u011fi\u015fiklikleri veya h\u0131zl\u0131 prototipleme i\u00e7in idealdir.<\/li>\n<\/ul>\n<h2>Sass De\u011fi\u015fkenlerinin Tan\u0131mlanmas\u0131 ve Kullan\u0131m\u0131<\/h2>\n<p>Sass&#8217;ta bir de\u011fi\u015fken tan\u0131mlamak olduk\u00e7a basittir. De\u011fi\u015fken isimleri bir dolar i\u015fareti (<code>$<\/code>) ile ba\u015flar, ard\u0131ndan de\u011fi\u015fkenin ad\u0131 ve iki nokta \u00fcst \u00fcste (<code>:<\/code>) ile de\u011feri gelir. Her de\u011fi\u015fken tan\u0131m\u0131 bir noktal\u0131 virg\u00fcl (<code>;<\/code>) ile sonland\u0131r\u0131lmal\u0131d\u0131r.<\/p>\n<h3>De\u011fi\u015fken Tan\u0131mlama S\u00f6zdizimi:<\/h3>\n<pre><code class=\"language-sass\">$degisken-adi: deger;<\/code><\/pre>\n<h3>\u00d6rnek Kullan\u0131m:<\/h3>\n<p>Birincil renk, ikincil renk ve font boyutu gibi temel stil de\u011ferlerini de\u011fi\u015fkenler olarak tan\u0131mlayal\u0131m:<\/p>\n<pre><code class=\"language-sass\">\/\/ _variables.scss\n$primary-color: #007bff;\n$secondary-color: #6c757d;\n$font-size-base: 16px;\n$line-height-base: 1.5;\n$border-radius: 0.25rem;<\/code><\/pre>\n<p>Bu de\u011fi\u015fkenleri Sass dosyalar\u0131n\u0131zda kullanmak i\u00e7in, t\u0131pk\u0131 bir CSS \u00f6zelli\u011fi de\u011feriymi\u015f gibi de\u011fi\u015fkenin ad\u0131n\u0131 yazman\u0131z yeterlidir:<\/p>\n<pre><code class=\"language-sass\">\/\/ style.scss\n@import 'variables'; \/\/ De\u011fi\u015fkenleri i\u00e7eren dosyay\u0131 dahil ediyoruz\n\nbody {\n  font-family: Arial, sans-serif;\n  font-size: $font-size-base;\n  line-height: $line-height-base;\n  color: #333; \/\/ Normal bir CSS de\u011feri\n}\n\n.button {\n  background-color: $primary-color;\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: $border-radius;\n  cursor: pointer;\n\n  &.secondary {\n    background-color: $secondary-color;\n  }\n}\n\nh1 {\n  color: $primary-color;\n  font-size: $font-size-base * 2; \/\/ Matematiksel i\u015flemler de yapabiliriz\n}<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>$primary-color<\/code>, <code>$secondary-color<\/code>, <code>$font-size-base<\/code>, <code>$line-height-base<\/code> ve <code>$border-radius<\/code> de\u011fi\u015fkenlerini tan\u0131mlad\u0131k ve farkl\u0131 CSS kurallar\u0131nda kulland\u0131k. Dikkat ederseniz, <code>h1<\/code> elementi i\u00e7in <code>$font-size-base * 2<\/code> \u015feklinde matematiksel bir i\u015flem de ger\u00e7ekle\u015ftirdik. Sass, de\u011fi\u015fkenlerle toplama, \u00e7\u0131karma, \u00e7arpma ve b\u00f6lme gibi temel matematiksel i\u015flemleri yapman\u0131za olanak tan\u0131r, bu da daha dinamik ve \u00f6l\u00e7eklenebilir stil hesaplamalar\u0131 yapman\u0131z\u0131 sa\u011flar.<\/p>\n<h2>De\u011fi\u015fken Kapsam\u0131 (Scope) ve T\u00fcrleri<\/h2>\n<p>Sass de\u011fi\u015fkenlerinin \u00f6nemli bir y\u00f6n\u00fc, onlar\u0131n &#8220;kapsam\u0131d\u0131r&#8221;. Bir de\u011fi\u015fkenin kapsam\u0131, o de\u011fi\u015fkenin Sass dosyas\u0131n\u0131n hangi b\u00f6l\u00fcmlerinden eri\u015filebilir oldu\u011funu belirler. Kapsam, de\u011fi\u015fkenlerin beklenmedik davran\u0131\u015flar sergilemesini \u00f6nlemek ve kodunuzu daha d\u00fczenli tutmak i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n<h3>Kapsam Kurallar\u0131:<\/h3>\n<ol>\n<li><strong>Global Kapsam:<\/strong> En \u00fcst seviyede (herhangi bir kural blo\u011funun d\u0131\u015f\u0131nda) tan\u0131mlanan de\u011fi\u015fkenler global kapsama sahiptir. Bu de\u011fi\u015fkenlere dosyan\u0131n her yerinden ve bu dosyay\u0131 <code>@import<\/code> eden di\u011fer dosyalardan eri\u015filebilir.<\/li>\n<li><strong>Yerel Kapsam:<\/strong> Bir CSS kural blo\u011funun (\u00f6rne\u011fin, bir se\u00e7ici veya bir <code>@mixin<\/code> i\u00e7indeki) i\u00e7inde tan\u0131mlanan de\u011fi\u015fkenler yerel kapsama sahiptir. Bu de\u011fi\u015fkenlere yaln\u0131zca tan\u0131mland\u0131klar\u0131 blok i\u00e7inde ve alt bloklarda eri\u015filebilir. Blok d\u0131\u015f\u0131ndan eri\u015filemezler.<\/li>\n<\/ol>\n<h3>\u00d6rnek: Kapsam<\/h3>\n<pre><code class=\"language-sass\">\/\/ Global de\u011fi\u015fken\n$global-text-color: #333;\n\n.container {\n  \/\/ Yerel de\u011fi\u015fken\n  $container-bg: #f8f8f8;\n  color: $global-text-color; \/\/ Global de\u011fi\u015fkene eri\u015fim\n  background-color: $container-bg; \/\/ Yerel de\u011fi\u015fkene eri\u015fim\n\n  .item {\n    \/\/ Bu blok i\u00e7inde $container-bg'ye eri\u015filebilir\n    border: 1px solid $container-bg;\n    color: $global-text-color;\n  }\n}\n\n\/\/ Burada $container-bg'ye eri\u015filemez, hata verir.\n\/\/ background-color: $container-bg; \/\/ Hata!<\/code><\/pre>\n<p><strong><code>!global<\/code> Bayra\u011f\u0131:<\/strong> Normalde yerel olarak tan\u0131mlanan bir de\u011fi\u015fkeni global hale getirmek isterseniz, de\u011fi\u015fken tan\u0131m\u0131n\u0131n sonuna <code>!global<\/code> bayra\u011f\u0131n\u0131 ekleyebilirsiniz. Ancak bu, genellikle iyi bir uygulama de\u011fildir ve kapsam\u0131 karma\u015f\u0131kla\u015ft\u0131rabilir.<\/p>\n<pre><code class=\"language-sass\">$initial-value: 10px;\n\n.some-block {\n  $initial-value: 20px !global; \/\/ Bu de\u011fi\u015fkeni global olarak g\u00fcnceller\n  padding: $initial-value; \/\/ 20px\n}\n\ndiv {\n  margin: $initial-value; \/\/ Art\u0131k 20px olacak\n}<\/code><\/pre>\n<h3>Sass De\u011fi\u015fken T\u00fcrleri ve De\u011ferleri:<\/h3>\n<p>Sass de\u011fi\u015fkenleri, \u00e7e\u015fitli veri t\u00fcrlerini depolayabilir, bu da onlar\u0131 olduk\u00e7a esnek k\u0131lar:<\/p>\n<ul>\n<li><strong>Say\u0131lar (Numbers):<\/strong> <code>10px<\/code>, <code>1.5rem<\/code>, <code>2em<\/code>, <code>100%<\/code>. Birimlerle veya birimsiz olabilirler.<\/li>\n<li><strong>Dizeler (Strings):<\/strong> <code>\"Merhaba D\u00fcnya\"<\/code>, <code>'my-font'<\/code>, <code>sans-serif<\/code>. T\u0131rnak i\u015faretli veya t\u0131rnak i\u015faretsiz olabilirler.<\/li>\n<li><strong>Renkler (Colors):<\/strong> <code>#ff0000<\/code>, <code>red<\/code>, <code>rgba(0,0,0,0.5)<\/code>, <code>hsl(0, 100%, 50%)<\/code>. Sass, renkler \u00fczerinde matematiksel i\u015flemler ve \u00f6zel renk fonksiyonlar\u0131 (<code>darken()<\/code>, <code>lighten()<\/code>, <code>mix()<\/code> vb.) yapman\u0131za olanak tan\u0131r.<\/li>\n<li><strong>Booleans (Mant\u0131ksal De\u011ferler):<\/strong> <code>true<\/code>, <code>false<\/code>. Genellikle <code>@if<\/code> ko\u015fullar\u0131yla birlikte kullan\u0131l\u0131rlar.<\/li>\n<li><strong>Listeler (Lists):<\/strong> <code>(1px solid black)<\/code>, <code>(top, right, bottom, left)<\/code>, <code>(Arial, sans-serif)<\/code>. Birden fazla de\u011feri tek bir de\u011fi\u015fkende saklamak i\u00e7in kullan\u0131l\u0131r. Virg\u00fcl veya bo\u015flukla ayr\u0131labilirler.<\/li>\n<li><strong>Haritalar (Maps):<\/strong> <code>(key1: value1, key2: value2)<\/code>. Anahtar-de\u011fer \u00e7iftlerini depolamak i\u00e7in kullan\u0131l\u0131r. \u00d6zellikle tema y\u00f6netimi veya breakpoint tan\u0131mlamalar\u0131 i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr.<\/li>\n<\/ul>\n<h3>\u00d6rnek: Harita (Map) Kullan\u0131m\u0131<\/h3>\n<p>Bir renk paletini veya breakpointleri bir harita i\u00e7inde tan\u0131mlamak \u00e7ok pratiktir:<\/p>\n<pre><code class=\"language-sass\">$colors: (\n  \"primary\": #007bff,\n  \"secondary\": #6c757d,\n  \"success\": #28a745,\n  \"danger\": #dc3545\n);\n\n$breakpoints: (\n  \"sm\": 576px,\n  \"md\": 768px,\n  \"lg\": 992px,\n  \"xl\": 1200px\n);\n\n.alert {\n  background-color: map-get($colors, \"danger\"); \/\/ Haritadan de\u011fer \u00e7ekme\n  padding: 1rem;\n  border-radius: $border-radius;\n}\n\n@media (min-width: map-get($breakpoints, \"md\")) {\n  .hero {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n<p><code>map-get()<\/code> fonksiyonu, bir haritadan belirli bir anahtara kar\u015f\u0131l\u0131k gelen de\u011feri alman\u0131z\u0131 sa\u011flar. Bu, dinamik ve mod\u00fcler stil sistemleri olu\u015fturmak i\u00e7in kritik bir \u00f6zelliktir.<\/p>\n<h2>Pratik Kullan\u0131m Senaryolar\u0131<\/h2>\n<p>Sass de\u011fi\u015fkenleri, modern web geli\u015ftirme projelerinde bir\u00e7ok farkl\u0131 senaryoda kullan\u0131labilir. \u0130\u015fte en yayg\u0131n ve faydal\u0131 kullan\u0131m durumlar\u0131ndan baz\u0131lar\u0131:<\/p>\n<h3>1. Renk Paletleri Y\u00f6netimi<\/h3>\n<p>Projenizdeki t\u00fcm renkleri tek bir yerde tan\u0131mlamak, marka kimli\u011finizin tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flaman\u0131n en iyi yoludur. Renkleri bir harita i\u00e7inde d\u00fczenlemek, renk paletinizi daha da organize hale getirir.<\/p>\n<pre><code class=\"language-sass\">\/\/ _colors.scss\n$brand-colors: (\n  \"primary\": #6f42c1,\n  \"secondary\": #fd7e14,\n  \"accent\": #20c997,\n  \"dark\": #343a40,\n  \"light\": #f8f9fa\n);\n\n$text-color: map-get($brand-colors, \"dark\");\n$heading-color: map-get($brand-colors, \"primary\");\n\nbody {\n  color: $text-color;\n}\n\nh1, h2, h3 {\n  color: $heading-color;\n}\n\n.btn-primary {\n  background-color: map-get($brand-colors, \"primary\");\n  color: map-get($brand-colors, \"light\");\n}<\/code><\/pre>\n<h3>2. Tipografi \u00d6l\u00e7ekleri<\/h3>\n<p>Font boyutlar\u0131, sat\u0131r y\u00fckseklikleri ve font ailelerini de\u011fi\u015fkenler arac\u0131l\u0131\u011f\u0131yla y\u00f6netmek, projenizin tipografik hiyerar\u015fisini kolayca kontrol etmenizi sa\u011flar.<\/p>\n<pre><code class=\"language-sass\">\/\/ _typography.scss\n$font-stack-base: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n$font-stack-heading: Georgia, serif;\n\n$base-font-size: 1rem; \/\/ 16px\n$h1-font-size: $base-font-size * 2.5; \/\/ 40px\n$h2-font-size: $base-font-size * 2;   \/\/ 32px\n$h3-font-size: $base-font-size * 1.75; \/\/ 28px\n\n$base-line-height: 1.6;\n\nbody {\n  font-family: $font-stack-base;\n  font-size: $base-font-size;\n  line-height: $base-line-height;\n}\n\nh1 {\n  font-family: $font-stack-heading;\n  font-size: $h1-font-size;\n  line-height: 1.2;\n}<\/code><\/pre>\n<h3>3. Bo\u015fluk ve Boyutland\u0131rma<\/h3>\n<p>Margin, padding ve di\u011fer boyutland\u0131rma de\u011ferlerini de\u011fi\u015fkenler olarak tan\u0131mlamak, tutarl\u0131 bir aray\u00fcz ve kolayca ayarlanabilir bir tasar\u0131m sistemi olu\u015fturman\u0131za yard\u0131mc\u0131 olur. Genellikle bir &#8220;spacing scale&#8221; (bo\u015fluk \u00f6l\u00e7e\u011fi) olu\u015fturulur.<\/p>\n<pre><code class=\"language-sass\">\/\/ _spacing.scss\n$spacer: 1rem; \/\/ 16px\n\n$spacers: (\n  0: 0,\n  1: $spacer * 0.25, \/\/ 4px\n  2: $spacer * 0.5,  \/\/ 8px\n  3: $spacer,        \/\/ 16px\n  4: $spacer * 1.5,  \/\/ 24px\n  5: $spacer * 3     \/\/ 48px\n);\n\n.mb-3 { \/\/ Margin Bottom 3\n  margin-bottom: map-get($spacers, 3);\n}\n\n.py-2 { \/\/ Padding Top\/Bottom 2\n  padding-top: map-get($spacers, 2);\n  padding-bottom: map-get($spacers, 2);\n}<\/code><\/pre>\n<h3>4. Tema Y\u00f6netimi<\/h3>\n<p>Sass de\u011fi\u015fkenleri, a\u00e7\u0131k ve koyu tema gibi farkl\u0131 temalar\u0131 y\u00f6netmek i\u00e7in de harikad\u0131r. Temaya \u00f6zel de\u011fi\u015fken setleri olu\u015fturup, duruma g\u00f6re bunlar\u0131 dahil edebilirsiniz.<\/p>\n<pre><code class=\"language-sass\">\/\/ _light-theme-vars.scss\n$background-color: #ffffff;\n$text-color: #333333;\n$border-color: #dddddd;\n\n\/\/ _dark-theme-vars.scss\n$background-color: #333333;\n$text-color: #ffffff;\n$border-color: #555555;\n\n\/\/ style.scss (\u00d6rnek kullan\u0131m)\n\/\/ @import 'light-theme-vars'; \/\/ Varsay\u0131lan tema\n\/\/ veya\n\/\/ @import 'dark-theme-vars'; \/\/ Koyu tema i\u00e7in<\/code><\/pre>\n<p>Bu y\u00f6ntem, JavaScript ile dinamik tema ge\u00e7i\u015fleri i\u00e7in de bir temel olu\u015fturabilir, ancak Sass derleme zaman\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in dinamik ge\u00e7i\u015fler i\u00e7in daha \u00e7ok CSS Custom Properties (CSS De\u011fi\u015fkenleri) tercih edilir. Ancak Sass de\u011fi\u015fkenleri, farkl\u0131 tema varyasyonlar\u0131n\u0131 derleme zaman\u0131nda olu\u015fturmak i\u00e7in kullan\u0131labilir.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<p>Sass de\u011fi\u015fkenleri, modern ve s\u00fcrd\u00fcr\u00fclebilir CSS yaz\u0131m\u0131n\u0131n temel ta\u015flar\u0131ndan biridir. Kod tekrar\u0131n\u0131 azaltma, bak\u0131m kolayl\u0131\u011f\u0131, okunabilirlik ve tutarl\u0131l\u0131k gibi pek \u00e7ok avantaj sunarak stil sayfalar\u0131n\u0131z\u0131 daha g\u00fc\u00e7l\u00fc ve y\u00f6netilebilir hale getirirler. Renklerden fontlara, bo\u015fluklardan breakpoint&#8217;lere kadar her t\u00fcrl\u00fc stil de\u011ferini de\u011fi\u015fkenler arac\u0131l\u0131\u011f\u0131yla merkezile\u015ftirmek, b\u00fcy\u00fck projelerde dahi d\u00fczeni koruman\u0131n anahtar\u0131d\u0131r.<\/p>\n<p>Sass&#8217;\u0131n sundu\u011fu bu esneklik sayesinde, tasar\u0131m sistemleri olu\u015fturmak, temalar\u0131 kolayca de\u011fi\u015ftirmek ve karma\u015f\u0131k aray\u00fczleri tutarl\u0131 bir \u015fekilde geli\u015ftirmek m\u00fcmk\u00fcn hale gelir. De\u011fi\u015fkenleri do\u011fru bir \u015fekilde kullanmak, Sass&#8217;\u0131n g\u00fcc\u00fcnden tam olarak faydalanman\u0131n ilk ad\u0131m\u0131d\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS):<\/h3>\n<p><strong>1. Sass de\u011fi\u015fkenleri ile CSS Custom Properties (CSS De\u011fi\u015fkenleri) aras\u0131ndaki fark nedir?<\/strong><\/p>\n<p>Sass de\u011fi\u015fkenleri derleme (compile) zaman\u0131nda i\u015flenir ve nihai CSS \u00e7\u0131kt\u0131s\u0131nda yer almazlar. Yani, Sass de\u011fi\u015fkenlerinin de\u011ferleri CSS&#8217;e d\u00f6n\u00fc\u015ft\u00fcr\u00fclmeden \u00f6nce belirlenir. CSS Custom Properties (<code>--degisken-adi: deger;<\/code>) ise taray\u0131c\u0131 taraf\u0131ndan \u00e7al\u0131\u015fma (runtime) zaman\u0131nda okunur ve de\u011fi\u015ftirilebilir. Bu, JavaScript ile dinamik tema de\u011fi\u015fiklikleri veya kullan\u0131c\u0131 etkile\u015fimlerine dayal\u0131 stil g\u00fcncellemeleri i\u00e7in CSS Custom Properties&#8217;i daha uygun hale getirir. Sass de\u011fi\u015fkenleri daha \u00e7ok geli\u015ftirme zaman\u0131 optimizasyonlar\u0131 ve kod organizasyonu i\u00e7in kullan\u0131l\u0131rken, CSS Custom Properties daha \u00e7ok dinamik stil de\u011fi\u015fiklikleri i\u00e7in tercih edilir.<\/p>\n<p><strong>2. De\u011fi\u015fkenlerimi nerede tan\u0131mlamal\u0131y\u0131m?<\/strong><\/p>\n<p>Genel olarak, t\u00fcm global de\u011fi\u015fkenlerinizi (renkler, fontlar, bo\u015fluklar, breakpoint&#8217;ler vb.) tek bir Sass partial dosyas\u0131nda (\u00f6rne\u011fin, <code>_variables.scss<\/code> veya <code>_config.scss<\/code>) tan\u0131mlamak en iyi uygulamad\u0131r. Daha sonra bu dosyay\u0131, di\u011fer Sass dosyalar\u0131n\u0131z\u0131n en ba\u015f\u0131nda <code>@import<\/code> veya <code>@use<\/code> (Sass mod\u00fcl sistemi) ile dahil edersiniz. Bu, de\u011fi\u015fkenlerinize projenin her yerinden eri\u015filebilmesini sa\u011flar ve onlar\u0131 kolayca bulup y\u00f6netmenize yard\u0131mc\u0131 olur.<\/p>\n<p><strong>3. \u00c7ok fazla Sass de\u011fi\u015fkeni kullanmak k\u00f6t\u00fc m\u00fcd\u00fcr?<\/strong><\/p>\n<p>Hay\u0131r, aksine iyi bir uygulamad\u0131r. \u0130yi tan\u0131mlanm\u0131\u015f ve d\u00fczenli de\u011fi\u015fkenler kullanmak, kodunuzun daha mod\u00fcler, okunabilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar. Ancak, her k\u00fc\u00e7\u00fck de\u011fer i\u00e7in bir de\u011fi\u015fken tan\u0131mlamak yerine, anlaml\u0131 ve tekrar eden de\u011ferler i\u00e7in de\u011fi\u015fkenler olu\u015fturmaya odaklanmal\u0131s\u0131n\u0131z. \u00d6rne\u011fin, her piksel de\u011feri i\u00e7in bir de\u011fi\u015fken yerine, bir bo\u015fluk \u00f6l\u00e7e\u011fi (spacing scale) veya tipografi \u00f6l\u00e7e\u011fi gibi mant\u0131ksal gruplar halinde de\u011fi\u015fkenler tan\u0131mlamak daha verimlidir.<\/p>\n<p><strong>4. Sass de\u011fi\u015fken isimleri i\u00e7in en iyi uygulama nedir?<\/strong><\/p>\n<p>De\u011fi\u015fken isimleri a\u00e7\u0131klay\u0131c\u0131 ve tutarl\u0131 olmal\u0131d\u0131r. Genellikle kebab-case (<code>$primary-color<\/code>, <code>$font-size-base<\/code>) kullan\u0131l\u0131r. De\u011fi\u015fkenin neyi temsil etti\u011fini a\u00e7\u0131k\u00e7a belirten isimler se\u00e7in. \u00d6rne\u011fin, <code>$red<\/code> yerine <code>$brand-primary<\/code> veya <code>$error-color<\/code> gibi daha semantik isimler kullanmak, kodunuzun amac\u0131n\u0131 daha iyi anlaman\u0131z\u0131 sa\u011flar.<\/p>\n<p><strong>5. Sass de\u011fi\u015fkenlerini nas\u0131l g\u00fcncelleyebilirim?<\/strong><\/p>\n<p>Bir Sass de\u011fi\u015fkeninin de\u011feri, ayn\u0131 isimle yeniden tan\u0131mlanarak g\u00fcncellenebilir. Ancak, kapsam kurallar\u0131na dikkat etmek \u00f6nemlidir. E\u011fer bir de\u011fi\u015fkeni global olarak g\u00fcncellemek istiyorsan\u0131z, onu global kapsamda yeniden tan\u0131mlaman\u0131z veya <code>!global<\/code> bayra\u011f\u0131n\u0131 kullanman\u0131z gerekir. Yerel bir kapsamda yap\u0131lan yeniden tan\u0131mlama, yaln\u0131zca o kapsama \u00f6zel olacakt\u0131r.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web geli\u015ftirme s\u00fcre\u00e7lerinde stil y\u00f6netimi, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a zorla\u015fabilir. Tekrar eden renkler, font boyu","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-36415","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z? - 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\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?\" \/>\n<meta property=\"og:description\" content=\"Web geli\u015ftirme s\u00fcre\u00e7lerinde stil y\u00f6netimi, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a zorla\u015fabilir. Tekrar eden renkler, font boyu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-15T23:41:31+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=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?\",\"datePublished\":\"2025-12-15T23:41:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\"},\"wordCount\":1811,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\",\"name\":\"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-15T23:41:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?\"}]},{\"@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 De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z? - 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\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/","og_locale":"tr_TR","og_type":"article","og_title":"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?","og_description":"Web geli\u015ftirme s\u00fcre\u00e7lerinde stil y\u00f6netimi, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a zorla\u015fabilir. Tekrar eden renkler, font boyu","og_url":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-15T23:41:31+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?","datePublished":"2025-12-15T23:41:31+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/"},"wordCount":1811,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/","url":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/","name":"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-15T23:41:31+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/sass-degiskenlerine-giris-neden-ihtiyac-duyariz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Sass De\u011fi\u015fkenlerine Giri\u015f: Neden \u0130htiya\u00e7 Duyar\u0131z?"}]},{"@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\/36415","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=36415"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36415\/revisions"}],"predecessor-version":[{"id":36416,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36415\/revisions\/36416"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}