CSS Pre-processor (CSS Ön-derleyici) Nedir?

Bir front-end developer görev tanımı itibariyle etkileşimin gerçekleştiği ön-yüz ve ön-yüz aracılığıyla sağlanan etkileşimin işlenmesi süreçlerinden sorumludur.
AA

Ön-yüzün ortaya çıkarılmasından etkileşimlerin işlenmesine değin pek çok teknolojiden faydalanılmaktadır ve bu teknolojiler her geçen zaman içerisinde yeni standartların ve üretim biçimlerinin de ortaya çıkmasına neden olmaktadır. Daha önce değindiğim şablon motorları (template engine), Vue gibi framework’ler geliştirme sürecine örnek olarak gösterilebilir. Ayrıca, yazılım geliştirme süreçlerinde söz konusu olan SoC, DRY, KISS gibi yaklaşımlar da yine ön-yüz geliştirme sürecine etkimektedir.

Yaklaşımlara ayrı yazılar bağlamında değinmeye devam edeceğim. Bu yazıda ise, sürecin daha çok teknik bağlamında yer alan ve ön-yüz geliştirme sürecinin önemli bir bölümünü oluşturan CSS Ön-derleyici konsuna değinmeye çalışacağım.

CSS Ön-derleyici (CSS Pre-processor)

Bir web sitesi ve/veya uygulaması, Cordova1, Ionic2 gibi framework’lerle hazırlanan mobil ve Electron ile geliştirilen masaüstü uygulamalarda yer alan görsel elemanlar (tipografi, renk, biçim, animasyon vb.) ön-yüz geliştirme süreciyle ortaya çıkar ve yönetilirler. İlkel bir örnek üzerinden izah etmek gerekirse; bir arabanın motor fonksiyonlarını sağlayan yapı ile dışını birbirinden ayırdığımızda dış katman arabanın kimliğini ve kullanılabilirliğini yani ön-yüzünü (front-end) temsil edecektir.

Front-end ve Back-end
Car Slice – Richard Thompson

Araba örneği bağlamında da motor fonksiyonları arka-yüz (back-end) olarak nitelendirebiliriz. Elbette bileşen (component) yaklaşımı çerçevesinde farklı yaklaşımlar (örn. Atomic Design) da söz konusu olabilir. CSS ön-derleyici ise hem yaklaşımlar hem de teknik açıdan oldukça büyük avantajlar sağlamaktadırlar. Bu nedenle de ön-yüz geliştirme sürecinin önemli bir parçası olarak nitelendirilmektedirler. Peki, CSS ön-derleyiciler (CSS Pre-processor) tam olarak nedir?

CSS ön-derleyici, ön-işlemcinin kendi benzersiz sözdiziminden (syntax) standart CSS kodunun oluşturulmasını sağlayan bir programdır3. İhtiyaçlar ve özellikler bağlamında tercih edilebilecek pek çok CSS ön-işlemci bulunmaktadır. Özellikle vurgulanması gerekir ki, pure CSS’in sahip olmadığı mixin, nesting selector ve inheritance selector gibi pek çok özellik ön-işlemciler sayesinde kullanılabilmektedir ve böylelikle CSS yapısı daha okunaklı ve bakımı kolay hale gelmektedir.

Bir CSS ön-işlemcisinin kullanılabilmesi için bir CSS derleyiciye (bkz. compiler) ihtiyaç duyulur.

Popüler CSS ön-işlemcilerden bazıları şunlardır;

Pure CSS

Pure CSS, W3C standartlarına sahip, yalın şablon-stil (stylesheet) dilini tanımlar. Pure ve/veya Vanilla ifadeleri yalınlığı, bir şeyin düz versiyonunu belirtmektedir4. Dolayısıyla, pure CSS veya vanilla CSS ilgili kosun en yalın (native, standards-based, non-extended) haliyle, standardın dışında herhangi bir öge içermediğini vurgular 5. JavaScript yazımında da yine pure ve/veya vanilla ifadelerine rastlanmaktadır. Diğer yandan, Pure CSS6 adında da ayrıca bir CSS modül sistemi mevcuttur ancak pure css ifadesine karşılık değildir.

Yalın bir CSS kodu şuna benzer:

body {
  margin: 0;
  padding: 0;
}

.main-content {
  background: #ddd;
  font-family: Arial, sans-serif;
  padding: 1em;
}

.main-content .blog-post {
  border-bottom: 1px #666 solid;
  padding: 1em 0;
}

.main-content .blog-post h1 {
  margin: 0 0 0.25em 0;
  padding: 0;
}

.main-content .blog-post p {
  margin: 0 0 1em 0;
  padding: 0;
}

.main-content .blog-post a {
  color: blue;
  font-weight: bold;
  text-decoration: none;
}

.main-content .blog-post a:hover,
.main-content .blog-post a:focus {
  color: red;
  text-decoration: underline;
}

LESS

LESS, geriye dönük uyumluluk gösteren bir CSS dil uzantısı / CSS derleyicisidir. LESS ile CSS yazımında variable, mixin, nesting, operation, escaping, function, namespace ve accessor, map, scope ve importing gibi özelliklerden faydalanabiliriz. Ruby ile geliştirilmiş olan LESS özellikleri bakımından SASS ile benzerlik gösterse de sözdizimi bağlamında ayrışmaktadır. LESS .less dosya uzantısını kullanır. Ek olarak, LESS kurulum ve kullanımsa SASS’a göre daha basittir. Daha detaylı bilgi için lesscss.org adresi incelenebilir.

Temel bir LESS kodu şuna benzer:

@color_1: #dddddd;
@color_2: #666666;
@color_3: blue;
@color_4: red;
@font_family_1: Arial, sans-serif;

body {
 margin: 0;
 padding: 0;
}
.main-content {
 background: @color_1;
 font-family: @font_family_1;
 padding: 1em;
 .blog-post {
  border-bottom: 1px @color_2 solid;
  padding: 1em 0;
  h1 {
   margin: 0 0 0.25em 0;
   padding: 0;
  }
  p {
   margin: 0 0 1em 0;
   padding: 0;
  }
  a {
   color: @color_3;
   font-weight: bold;
   text-decoration: none;
   &:hover, &:focus {
    color: @color_4;
    text-decoration: underline;
   }
  }
 }
}

SASS

SASS, 2006 yılından bu yana kullanılan, en eski CSS ön-derleyicidir ve Haml şablon dilinden (templating language) ilham alınarak geliştirilmiştir. LESS gibi SASS da Ruby dilini kullanmakta ve sözdizimindeki farklılık dışında LESS ile benzer özellikler (variable, mixin, nesting, operation, escaping, function vb.) sunmaktadır. Diğer yandan, SASS bünyesinde ayrıca SCSS sözdizimini de barındırır. Sass .scss dosya uzantısını kullanır. Daha detaylı bilgi için sass-lang.com adresi incelenebilir.

$color_1: #dddddd
$color_2: #666666
$color_3: blue
$color_4: red
$font_family_1: Arial, sans-serif

body
 margin: 0
 padding: 0

.main-content
 background: $color_1
 font-family: $font_family_1
 padding: 1em
 .blog-post
  border-bottom: 1px $color_2 solid
  padding: 1em 0
  h1
   margin: 0 0 0.25em 0
   padding: 0

  p
   margin: 0 0 1em 0
   padding: 0

  a
   color: $color_3
   font-weight: bold
   text-decoration: none
   &:hover, &:focus
    color: $color_4
    text-decoration: underline

SCSS

Bir üst başlıkta da belirttiğim üzere, SASS bünyesinde SCSS sözdizimini de barındırmaktadır. SCSS, SASS’ın 3. sürümüyle birlikte sunulan yeni bir SASS sözdizimidir. Her iki yapı da esasında aynıdır, ancak SCSS, CSS3’ün bir üst kümesidir.

$color_1: #dddddd;
$color_2: #666666;
$color_3: blue;
$color_4: red;
$font_family_1: Arial, sans-serif;

body {
 margin: 0;
 padding: 0;
}
.main-content {
 background: $color_1;
 font-family: $font_family_1;
 padding: 1em;
 .blog-post {
  border-bottom: 1px $color_2 solid;
  padding: 1em 0;
  h1 {
   margin: 0 0 0.25em 0;
   padding: 0;
  }
  p {
   margin: 0 0 1em 0;
   padding: 0;
  }
  a {
   color: $color_3;
   font-weight: bold;
   text-decoration: none;
   &:hover, &:focus {
    color: $color_4;
    text-decoration: underline;
   }
  }
 }
}

Stylus

Stylus, LESS ve SASS gibi daha az kod ile dinamik CSS özelliklerini kullanma amacı gütmektedir. Ancak, genel bir karşılaştırma yapıldığında Stylus’un çok daha özgür ve esnek bir sözdizimine sahip olduğunu söyleyebiliriz. Stylus .styl dosya uzantısını kullanır. Daha detaylı bilgi için stylus-lang.com adresini inceleyebilirsiniz.

color_1 = #dddddd;
color_2 = #666666;
color_3 = blue;
color_4 = red;
font_family_1 = Arial, sans-serif;

body
    margin 0
    padding 0

.main-content
    background color_1
    font-family font_family_1
    padding 1em
    .blog-post
        border-bottom 1px color_2 solid
        padding 1em 0
        h1
            margin 0 0 0.25em 0
            padding 0
        p
            margin 0 0 1em 0
            padding 0
        a
            color color_3
            font-weight bold
            text-decoration none

.main-content .blog-post a:hover,
.main-content .blog-post a:focus
    color color_4
    text-decoration underline

Sonuç Olarak

LESS, SASS (veya SCSS) ya da Stylus… Aralarında yazım biçimi ve kuralları dışında öne çıkan kritik bir farklılık olduğunu söylemek zor. Yazım biçimine aşinalık kazandıktan sonra temel olarak alınacak çıktılar benzer olacaktır. Genel hatlarıyla değerlendirmek gerekirse, SASS’ın daha uzun bir geçmişe sahip olması daha kapsamlı bir dokümantasyona sahip olmasını sağlarken Stylus daha pratik bir yazım deneyimi sunmaktadır. Diğer yandan, diğer front-end geliştiricilerin ve projede tercih edilen sözdiziminin de devamlılığı öncelik olacağı için bu popüler ön-derleyicilere genel bir aşinalık yeterli olacaktır.

İleri Okumalar

  1. Roadmap to becoming a web developer in 2019
  2. Less vs Sass vs Stylus
  3. 10 LESS CSS Examples You Should Steal for Your Projects
  4. Sass vs. LESS vs. Stylus: Preprocessor Shootout
  5. Popular CSS Preprocessors With Examples: Sass, Less & Stylus
  6. It’s 2018: You shouldn’t be writing vanilla CSS
  7. Learn to Code Advanced HTML & CSS
  8. An Introduction to CSS Pre-Processors: SASS, LESS and Stylus
  9. You might not need a CSS preprocessor
  10. 10 CSS Preprocessors Worth Considering
  1. Apache Cordova ↩
  2. Ionic. Cross-Platform Mobile App Development ↩
  3. CSS preprocessor, @MDN web docs ↩
  4. What is Vanilla CSS and why? ↩
  5. What does “vanilla” mean in the context of gaming? ↩
  6. Pure CSS ↩
Yorum alanını göster
Beğendim
Beğenmedim