Sass Nedir ve Sass Kullanımı

İçerik

Sass, diğer bilinen adıyla (ya da uzantısıyla diyelim) Scss nedir konusuna değinmek istedim.

Daha önce pek kullanmadığım fakat internette bolca gördüğüm bir konuydu ve daha önce mantığını araştırmışlığım vardı. Nitekim ihtiyaç duymadığım için üstüne düşmeye gerek de görmemiştim fakat ihtiyaç duymaya başlayınca araştırmam gerekti… İyi ki de araştırmışım ve kullanmaya başlamışım dedim çünkü bildiğim özelliklerden fazlasına sahipmiş. Gelelim fasulyenin faydalarına;

Sass Nedir ?

Sass; dünyadaki en olgun, stabil ve güçlü, profesyonel seviyedeki bir CSS uzantısı dildir.

Sass-lang.com‘daki kendi mottoları bu şekilde (en azından ben böyle çevirebildim). Gayet kendinden emin bir cümle olmasının yanı sıra Bootstrap, Ionic gibi güçlü frameworkler de Sass kullandığı için bence haklı olabilirler de… tabii Less ile karşılaştırınca da durum böyle, nitekim biraz karşılaştırma makalelerine baktım ve Sass’ın ben de daha güçlü olduğuna karar kıldım – ya da aldandım diyebilirim de.

Benim için Sass nedir ona gelecek olursam; değişken, function, inheritance (kalıtım), matematik işlemleri yapma gibi CSS’te ihtiyaç duyduğum aksiyonların olduğu, daha üst düzey bir CSS dilidir. Kısacası; daha dinamik bir CSS dilidir.

Değişkenler (Variables)

En çok beğendiğim özellik olan, CSS’te değişken kullanabilme alt yapısıdır.

Kullanımı gayet kolay, tek yapmanız gereken; global scopeta dolar işareti $ ile başlayıp tanımlamak ve ardından kullanmak.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

çıktısı ise

body {
	font: 100% Helvetica, sans-serif;
	color: #333;
}

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

yukarıdaki gibi olacaktır. Aynı değişkeni bir çok yerde kullanabilirsiniz elbette, fakat aynı değişken ismini yeniden tanımlayamazsınız.

İçerleme (Nesting)

İçerleme doğru bir isim olmayabilir aslında fakat hiyerarşi de demek istemiyorum çünkü hiyerarşik bir şekilde olmayabilir sizin kullanımınız.

İçerlemede ise olay iç içe yazarak ebeveyn çocuk mantığı gibi ilerleyerek yazmanızı sağlıyor.

nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		display: inline-block;
	}

	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

}

li {

display: inline-block;

}

a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

çıktısı;

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	display: inline-block;
}

nav a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
}

nav ul {

margin: 0;

padding: 0;

list-style: none;

}

nav li {

display: inline-block;

}

nav a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

Gördüğünüz gibi hepsini nav içine aldı. Daha da iç içe yazabilirsiniz elbette, ileri kullanımda ampersand & işareti de yer almakta fakat buna değinmeyeceğim — kafa karıştırmayalım boşuna.

Parçalama (Partials)

Parçalama, içeri aktarma işleminde kullanmak için yapılan dosyaları parçalama işlemi oluyor. Bunun için ana Sass dosyanızın olduğu yere alt çizgi _ ile başlayan dosyanızı oluşturuyorsunuz ve import ediyorsunuz.

İçeri Aktarım (Import)

CSS’teki içeri aktarma mantığı gibi içeri aktarma, sadece partial yapılmış bir dosyayı içeriye aktarıyorsunuz ve dosya adını, başında alt çizgi sonunda uzantısı olmadan yazıyorsunuz.

2 adet scss dosyası oluşturalım. Birisi style.scss diğeri ise _sub.scss isminde olsun.

_sub.scss:

html,
body,
ul,
ol {
	margin: 0;
	padding: 0;
}

html,

body,

ul,

ol {

margin: 0;

padding: 0;

}

style.scss:

@import 'sub';

body {
	font: 100% Helvetica, sans-serif;
	background-color: #efefef;
}

@import 'sub';

body {

font: 100% Helvetica, sans-serif;

background-color: #efefef;

}

çıktısı ise aşağıdaki gibi olacaktır.

html, body, ul, ol {
	margin: 0;
	padding: 0;
}

body {
	font: 100% Helvetica, sans-serif;
	background-color: #efefef;
}

html, body, ul, ol {

margin: 0;

padding: 0;

}

body {

font: 100% Helvetica, sans-serif;

background-color: #efefef;

}

Katmalar (Mixins)

Aslında daha çok functionlar olarak adlandirmak daha mantikli fakat tam olarak bir function değil, yani hesap vs yaptırmıyorsunuz…

Daha çok CSS3’ün tarayıcı uyumları için kullanılmakta fakat farklı işlemler için de kullanılabilir.

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

.box {
	@include border-radius(10px);
}

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box {

@include border-radius(10px);

}

Çıktısı ise;

.box {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

.box {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

border-radius: 10px;

}

olacaktır. Sanırım mantığı anlamışsınızdır, include ettiğiniz her yerde aynı parametreleri yeniden yazmak zorunda kalmayacaksınız…

Kalıtım (Inheritance)

Kalıtım Sass’ın en büyük avantajlarından birisi… @Extend i kullanarak ortak CSS yapısı kullanan tüm elementleri bir araya toplatabilirsiniz, bunu örnekle açıklamak daha mantıklı olacaktır, daha rahat anlaşılır bu şekilde

.message {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}

.success {
	@extend .message;
	border-color: green;
}

.error {
	@extend .message;
	border-color: red;
}

.warning {
	@extend .message;
	border-color: yellow;
}

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

.error {

@extend .message;

border-color: red;

}

.warning {

@extend .message;

border-color: yellow;

}

Çıktısı;

.message, .success, .error, .warning {
	border: 1px solid #cccccc;
	padding: 10px;
	color: #333;
}

.success {
	border-color: green;
}

.error {
	border-color: red;
}

.warning {
	border-color: yellow;
}

.message, .success, .error, .warning {

border: 1px solid #cccccc;

padding: 10px;

color: #333;

}

.success {

border-color: green;

}

.error {

border-color: red;

}

.warning {

border-color: yellow;

}

.success, .error ve .warning’te ayrı ayrı .message’a extend ettik ve .message son olarak hepsini kapsadı.

Operatörler (Operators)

Ve yine benim en çok sevdiğim özelliği diyebileceğim özelliğine geldik; matematiksel operatörler.

CSS’te matematik işlemleri yapmak gerçekten işlerinizi kolaylaştırabilir. Bu matematik operatörleri; +, -, *, / ve %.

.container {
	width: 100%;
}


article[role="main"] {
	float: left;
	width: 600px / 960px * 100%;
}

aside[role="complementary"] {
	float: right;
	width: 300px / 960px * 100%;
}

.container {

width: 100%;

}

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}

aside[role="complementary"] {

float: right;

width: 300px / 960px * 100%;

}

çıktısı ise aşağıdaki gibi olacak;

.container {
	width: 100%;
}

article[role="main"] {
	float: left;
	width: 62.5%;
}

aside[role="complementary"] {
	float: right;
	width: 31.25%;
}

.container {

width: 100%;

}

article[role="main"] {

float: left;

width: 62.5%;

}

aside[role="complementary"] {

float: right;

width: 31.25%;

}

Şimdilik Sass (Scss) ile ilgili benden bu kadar, örnek kullanım vs için belki tekrar bir yazı yazarım.

Kolay gelsin ;)

6 Comments

Hakan Çolak

2018-01-17 at 02:11

Çok güzel yazmışsın kardeş, teşekkürler

Ferhat

2018-12-24 at 12:44

Hakikaten güzel bir paylaşım olmuş arkadaşım. İnan örnekler bitmesin istedim.

Alief Kusumaningtyas

2019-02-05 at 10:17

is Sass a form of algorithm? or an execution from the program?

ibrhm kendisi

2019-09-17 at 00:09

elinize saglık

Mehmet Can Sürücü

2020-05-26 at 22:50

Merhaba,

Gayet güzel anlatım olmuş öncelikle tebrik ederim. Ancak benim merak ettiğim bir konu var. SASS dosyası içinde ya da farklı bir şekilde PHP değişkenleri kullanabilir miyiz? Örneğin color : $color dedik. bu $color php değişkeni olabilir mi? nasıl?

- Ahmet Ertem
  
  2020-05-27 at 02:42
  Merhaba,
  PHP degiskeni degil, sadece syntaxindaki bir benzerlik bu.
  $degisken: deger; olarak degisken atiyorsun, kullanirken de sadece degeri cagiriyorsun, aslinda cok basit :)
  
  Ornegin;
```
// sayfanin ustlerinde bir yere
$renk1: #424242;
// asagilarda ise;
#main-div {
background-color: $renk1;
}
```
  dedigin an is tamam.
  
  Daha detaylandirmak istersen de ileri seviye islemler mevcut. Ornegin bir degiskenin var (degisken olmasa da olur tabii fakat ordan da yuruyebilirsin), background-color: darken($renk1, 10); diyerek built-in functionlardan deger dondurebiliyorsun. darken, vermis oldugun degeri x% miktarda koyulastirarak geri donduruyor.
  
  https://sass-lang.com/documentation/variables buraya ve diger alt sayfalara bakmani tavsiye ederim, baska kaynaklar da mevcuttur.
  
  Baska bir soru olursa yazmaktan cekinme
  
  Iyi calismalar dilerim, basarilar

Ahmet Ertem

Developer Blog

Sass Nedir ve Sass Kullanımı

Sass Nedir ?

Değişkenler (Variables)

İçerleme (Nesting)

Parçalama (Partials)

İçeri Aktarım (Import)

Katmalar (Mixins)

Kalıtım (Inheritance)

Operatörler (Operators)

6 Comments

Leave a Reply Cancel reply

Sass Nedir ?

Değişkenler (Variables)

İçerleme (Nesting)

Parçalama (Partials)

İçeri Aktarım (Import)

Katmalar (Mixins)

Kalıtım (Inheritance)

Operatörler (Operators)

İlgili Yazılar:

6 Comments

Leave a Reply Cancel reply