CSS

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

Güncelleme:
Bir front-end developer (ön-yüz geliştirici) 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. Ön-yüzün ortaya çıkarılmasından etkileşimlerin işlenmesine değin ...
GÖRSEL

Bir front-end developer (ön-yüz geliştirici) 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. Ö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-derleyicilerden (CSS Pre-processor) bahsetmeye çalışacağım.

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

Bir web sitesi ve/ya uygulaması, Cordova, Ionic 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.

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-derleyiciler (CSS Pre-processor) 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-derleyiciler (CSS pre-processor), ön-işlemcinin kendi benzersiz sözdiziminden (syntax) standart CSS kodunun oluşturulmasını sağlayan bir programdır. İhtiyaçlar ve özellikler bağlamında tercih edilebilecek pek çok CSS (Cascading Style Sheets) ö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; Sass, LESS, Stylus ve PostCSS.

Pure CSS Nedir?

Pure CSS, W3C standartlarına sahip, yalın şablon-stil (stylesheet) dilini tanımlar. Pure ve/ya Vanilla ifadeleri yalınlığı, bir şeyin düz versiyonunu belirtmektedir. 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. JavaScript yazımında da yine pure ve/ya vanilla ifadelerine rastlanmaktadır. Diğer yandan, Pure CSS 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 (Leaner Style Sheets), geriye dönük (backwards-compatible) 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 (Syntactically Awesome Style Sheets), 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

Kaynakça

  1. CSS preprocessor, @MDN web docs
  2. What is Vanilla CSS and why?
  3. What does “vanilla” mean in the context of gaming?
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.