SASS'ın Temelleri
Bu makale, SASS'ın temelini açıklar.
SASS'ın temel özelliklerini adım adım açıklayacak ve bunların nasıl kullanılacağını pratik örnek kodlarla göstereceğiz.
YouTube Video
SASS'ın Temelleri
SASS (Syntactically Awesome Stylesheets), CSS'i genişleten bir stil sayfası dilidir. SASS kullanarak, değişkenler, iç içe yapı, mixin'ler ve kalıtım gibi CSS'te bulunmayan gelişmiş özelliklerden faydalanabilirsiniz. Bu, stil dosyalarının yönetimini ve tekrar kullanımını çok daha kolay hale getirir.
SASS nedir?
SASS, CSS yazımını kolaylaştıran ve daha esnek, güçlü stillendirme imkânı tanıyan bir dildir. SASS ayrıca standart CSS sözdizimine benzer olan SCSS (Sassy CSS) sözdizimini de sunar. İşte bir örnek:.
SCSS Örneği
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS Örneği
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASS Kurulumu
Nasıl Kurulur
SASS kullanmak için önce Node.js'i yükleyin, ardından aşağıdaki komut ile SASS'ı yükleyin:.
1npm install -g sassNasıl Derlenir
SASS dosyalarını (.scss veya .sass) CSS'ye derlemek için aşağıdaki komutu kullanın:.
1sass input.scss output.csswatch seçeneğini kullanarak dosya değişikliklerini izleyebilir ve gerçek zamanlı derleme yapabilirsiniz.
Değişkenler
SASS, renkler ve yazı tipi boyutları gibi değerleri tekrar kullanmanızı sağlayan değişkenler kullanmanıza olanak tanır.
Örnek Kod
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- Bu kod, renkleri ve yazı tiplerini tanımlamak için SASS değişkenlerini kullanır ve bunları
bodyseçicisi içinde tekrar kullanarak tutarlılığı ve sürdürülebilirliği artırır.
Derlenmiş Sonuç
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}İç İçe Yazım
SASS, CSS seçicilerinin iç içe yazılmasına izin vererek kodun okunabilirliğini artırır.
Örnek Kod
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- Bu kod, stillerin yapısını görsel olarak netleştirmek için iç içe hiyerarşi kullanır.
Derlenmiş Sonuç
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}Mixinler
Mixinler, birden fazla seçici arasında kodu tekrar kullanmanızı sağlar.
Örnek Kod
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- Bu kod,
@mixinaracılığıyla birborder-radiusstili tanımlar vebuttonile.card'da@includekullanarak tekrar ederek, tekrarsız verimli biçimlendirme sağlar.
Derlenmiş Sonuç
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}Kalıtım (@extend)
Kalıtım, mevcut stilleri diğer seçicilere uygulamanıza olanak tanır.
Örnek Kod
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- Bu kod,
%button-styleadlı bir yer tutucu seçici tanımlar ve genel stilleri hembuttonhem de.link-buttoniçin uygulamak üzere@extendkullanır; bu da yeniden kullanımı ve tutarlılığı teşvik eder.
Derlenmiş Sonuç
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}Koşullu İfadeler ve Döngüler
SASS, stilleri dinamik olarak oluşturmak için koşullu ifadeleri ve döngüleri destekler.
Koşullu İfade Örneği
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- Bu kod, arka plan ve metin renklerini
$themedeğerine göre değiştirmek için SASS'ıniffonksiyonunu kullanır; böylece koşullara bağlı olarak dinamik stil oluşturulabilir.
Döngü Örneği
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- Bu kod, SASS
@fordöngüsü kullanarak.column-1'den.column-3'e kadar dinamik olarak sınıflar oluşturur.
Derlenmiş Sonuç
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}Dosya Bölme ve İçeri Aktarma
SASS, dosyaları bölmenize ve @use veya @import komutları ile tekrar kullanmanıza imkan tanır.
Dosya Yapısı
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}Derlenmiş Sonuç
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}Özet
SASS kullanmak, CSS yazımını kolaylaştırır, kodun tekrar kullanılabilirliğini ve sürdürülebilirliğini artırır.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.