Ekşi Duyuru

koala-app.com'dan uygulamayı indirirsen, yazdığın LESS veya SASS kodlarını CSS'ye derlersin. Böylelikle sunucuya bişey kurmana gerek kalmaz.

Yalnız SASS veya LESS senin istediğin şeyi yapmıyor sanırım. Yani class isimlerini rastgele "m-b-27" diye yazamazsın. Yine de tanımlaman gerekir. Tek tek olmasa da fonksiyonlar falan var.

"m-b-27" gibi şeyleri jQuery kullanarak tanımlayabilirsin ama. Mesela jQuery'de class'ları okutup stackoverflow.com sonra m-b-X şekline olanlara istediğin özellikleri eklersin.

Ama asıl zurnanın zırt dedği yer şu, yaptığın şey komple yanlış. Görüntü detayları html'deki class listesinde olmamalı. Çünkü bir elementi bir çok yerde kullanacaksın, hepsini <div class="category title m-b-10"> diye tanımladın diyelim, hem de bir çok farklı dosyada. İleride bunların aralarındaki boşluğu değiştirmek sitersen onlarda yerde m-b-20'ye çevirmen gerekir. Ancak bu elementleri <div class="category title container"> gibi tanımlarsan, CSS'de tek seferde düzenleme yaparsın.

HTML kodunun içinde görünümle ilgili hiç bir şey olmamalı. m-b-20 gibi kısa yollar çok kötü alışkanlıklar edinmene sebep olur. Onun yerine elementlere ve class'lara tanımlayıcı isim ver. O ismi okuyan kişi, görüntü detayını anlamamalı. Renk bile kullanmamak lazım aslında. Mesela şu bile yanlış:

<div class="title red">
.red {color: #ff0000;}

Onun yerine şu olmalı:

<div class="title vurgulu">
.vurgulu {color: #ff0000;}

böylelikle ileride görüntü özelliklerini değiştirmek istediğinde class isimlerini de değiştirmek zorunda kalmazsın.

Baştan böyle alış. Her zaman "ileride görünümü değiştirmek istersem class isimlerini değiştirmek zorunda kalmamalıyım" diye düşün. "m-b-10" bu kurala uymuyor, "red" de uymuyor. Class isimleri görünümü tanımlamaz, elementi tanımlar. En doğru kullanım budur.

@harzem cok hakli. ekleyecek hicbir sey birakmamis neredeyse.
sass/less derlemek pek sikintili is degil, ruby vs gozunu korkutmasin. grunt kullanimi uzerine turkce makaleler mevcut, bakabilirsin derleme kismi icin. less/sass yazimi konusunda da turkce/ingilizce bicok kaynak var. zaten syntax'lari benziyor. less biraz dususte bu aralar, dedigin gibi bootstrap de sass'a geciyor zaten.
bugun su linke rastladim: corpuscss.com burda birisi whitespace.css diye bir kalip hazirlamis sass icin github.com . belki bu isine yarayabilir, en azindan sen kendin yazmamis olursun ml-10 gibi kodlari. ama @harzem'in dedigi gibi bu hic iyi bi kullanim degil.

senin sorununu en iyi less.js cözer. Bircok agir web uygulamasi less.js kullanir zaten. Performans olarak neden problem olmadigina gelince? senin less css olarak yazdigin kod gelistirme asamasinda her degisiklikten sonra javascript tarafindan css olarak derleniyor ve performans düser dogrudur(kodun uzunlugune göre milisaniyeler oraninda kayip olur). fakat gelistirme yaptiktan sonra kodunu servera canli kod olarak attiginda serverda acilan kod temiz css, yani ekstra derleme felan yok. Yani derlenme olayi sadece gelistirme sirasinda oluyor.

Peki neden büyük projeler less.js kullaniyor? cünkü css de en büyük problem "encapsulation". yani bir class ismi projenin baska yerinde baska isimle kullanildiysa birbirini etkileyecektir. Bir baska neden de css kodunu belli bir hierarside göremememk okunurlugu zorlastiriyor. Less de ise tipki bir json yapisinda oldugu icin css kodlari ici ice. Css icin fonksiyon yazilabliliyor. Matematik hesaplamasi yapilabiliyor (meselab bir elemanin 100% genisliginden 10 pixel cikar gibi). Su anda milyonlarda css kodu barindiran bir projede calisiyorum less olmasa isin icinden cikamazdik.

Bu problemi bir de jquery ile cözmeye kalkarsan asil o zaman performans sorunu ile karsilasirsin. cünkü jquery kodu her web sitesini calistirginda calisacaktir, browsera ekstra yük. Ama less ile derledigin kod sadece bir kerelik css koduna dönüstürülürken performans sorunu yasayacak sonrasinda browsera temiz css gidecek.

Senin tam ihtiyacin da "parametric mixin" lesscss.org

mesela böyle bir fonksiyon yap

.m-b(@pixel) {
margin-bottom: @pixel;
}

sonra bunu böyle diledigin gibi diledigin parametre ile cagirabilirsin
header{
.m-b(10px);
}

@emrahday adamın istediği şey html içinde keyfi olarak çağırmak, css içinde değil. Less ile olacak iş değil bu. Zaten dediğim gibi method olarak da çok yanlış.

yıllardır css kullanıyorum ciddi ve nizami bir şekilde.
neden böyle birşey yapmak istedim ve nereden aklıma böyle birşey geldi hiç bilemiyorum.
backend devam eden kariyerim 2 hafta önce direkt olarak frontende dogru yön aldı. sanırım bunalımdan saçma sapan arayışlara girmişim.
sorduktan sonra zaten bu tarz kullanmanın çok abes ve saçma olduğunu anladım.
@emrahday'in dediği tekniğe geçmeyi düşünüyorum bir süredir.
neyse bu da böyle bir anımdır.