En İyi 40 SASS Mülakat Soruları ve Cevapları (2025)

İşte hem yeni başlayanlar hem de deneyimli adaylar için hayallerindeki işi bulmaları için SASS ve SCSS mülakat soruları ve cevapları.

1) Sass nedir açıklayınız? Nasıl kullanılabilir?

Sass, Sözdizimsel Olarak Harika Stil Sayfaları anlamına gelir ve Hampton Catlin tarafından yaratılmıştır. CSS3'ün bir uzantısıdır; iç içe kurallar, karışımlar, değişkenler, seçici mirası vb. ekler.

Sass üç şekilde kullanılabilir

Komut satırı aracı olarak
Bağımsız bir Ruby modülü olarak
Herhangi bir Rack özellikli çerçeve için eklenti olarak

Ücretsiz PDF İndir: SASS Mülakat Soruları ve Cevapları

2) Sass'ın temel özelliklerini sıralayın?

Sass'ın temel özellikleri şunları içerir:

Tam CSS3 uyumlu
Yuvalama, değişkenler ve karışımlar gibi dil uzantıları
Renkleri ve diğer değerleri değiştirmek için birçok kullanışlı işlev
Kitaplıklar için kontrol yönergeleri gibi gelişmiş özellikler
İyi biçimlendirilmiş, özelleştirilebilir çıktı

3) SassScript'in desteklediği Veri Türlerini listelemek ister misiniz?

SassScript yedi ana veri türünü destekler

Sayılar (örneğin; 1,5 ,10px)
Metin dizeleri (örneğin, “foo”, 'bar' vb.)
Renkler (mavi, #04a3f9)
Boolean'lar (doğru veya yanlış)
Boş değerler (örneğin; boş)
Değerlerin boşluk veya virgülle ayrılmış listesi (örn., 1.5em, Arial, Helvetica vb.)
Bir değerden diğerine eşleme yapar (örneğin, ( anahtar 1: değer1, anahtar 2: Değer 2))

4) Sass'ta bir değişkenin nasıl tanımlanacağını açıklayın?

Sass'ta değişkenler ($) işaretiyle başlar ve değişken ataması iki nokta üst üste (:) ile yapılır.

5) Sass ve SCSS arasındaki farkın ne olduğunu açıklayın?

Sass ve SCSS arasındaki fark şudur:

Sass bir CSS Söz dizimi gelişmelerine ve CSS3 uzantısına sahip ön işlemci
Sass'ın iki sözdizimi vardır
İlk sözdizimi “SCSS”dir ve .scss uzantısını kullanır
Diğer sözdizimi girintili sözdizimi veya yalnızca “Sass”tır ve .sass uzantısını kullanır.
Sass'ın beyaz boşluklu ve noktalı virgülsüz söz dizimi gevşek olsa da SCSS, CSS'ye daha çok benziyor

Geçerli herhangi bir CSS belgesi, uzantıyı.CSS'den.SCSS'ye değiştirerek Sass'a dönüştürülebilir.

6) Sass'ta Selector Nesting ne için kullanılır?

Sass'ta seçici yerleştirme, stil sayfası yazarlarına, daha kısa seçicileri iç içe yerleştirerek uzun seçicileri hesaplamaları için bir yol sunar.

7) Sass'ta @extend fonksiyonunun ne için kullanıldığını açıklayın.

Sass'ta @EXTEND yönergesi, bir seçicinin başka bir seçicinin stillerini devralmasına izin veren basit bir yol sağlar. A seçicisine, B seçicisinden gelen stilleri genişletmesi için bir yol sağlamayı amaçlar. Bunu yaparken, A seçicisi, B seçicisine eklenecek ve böylece her ikisi de aynı bildirimleri paylaşacaktır. @EXTEND, aynı stili paylaşan seçicileri tek bir kuralda gruplayarak kod şişmesini önler.

8) Sass'ta @IMPORT fonksiyonunun ne işe yaradığını açıklayın.

Sass'ta @IMPORT işlevi

SCSS ve Sass dosyalarının içe aktarılmasını etkinleştirerek CSS içe aktarma kuralını genişletir
İçe aktarılan tüm dosyalar, çıktısı alınan tek bir CSS dosyasında birleştirilir
Herhangi bir dosyayı sanal olarak karıştırıp eşleştirebilir ve tüm stillerinizden emin olabilirsiniz
@IMPORT içe aktarılacak bir dosya adı alır

9) Sass'ın neden LESS'ten daha iyi olduğu düşünülüyor?

Saas, yeniden kullanılabilir yöntemler yazmanıza ve döngüler ve koşullar gibi mantıksal ifadeler kullanmanıza olanak tanır
Saas kullanıcısı Compass kitaplığına erişebilir ve dinamik hareketli harita oluşturma, eski tarayıcı korsanlıkları ve CSS3 özellikleri için tarayıcılar arası destek gibi harika özellikleri kullanabilir
Compass ayrıca Blueprint, Foundation veya gibi harici bir çerçeve eklemenize de olanak tanır. Çizme atkısı üstüne
LESS'te, Sass if ifadelerine eşdeğer olan 'korumalı karışım' kullanarak temel bir mantık ifadesi yazabilirsiniz.
LESS'te, özyinelemeli işlevleri kullanarak sayısal değerler arasında geçiş yapabilirsiniz; Sass ise her türlü veriyi yinelemenize olanak tanır
Sass'ta kendi kullanışlı fonksiyonlarınızı yazabilirsiniz.

10) Mixin fonksiyonunun Sass'ta ne işe yaradığını açıklayın. Bir karışımı KURUTMANIN anlamı nedir?

Mixin, .float-left gibi anlamsal olmayan sınıflara başvurmaya gerek kalmadan stil sayfası boyunca yeniden kullanılabilecek stilleri tanımlamanıza olanak tanır.

Bir karışımın KURUTULMASI, onu dinamik ve statik parçalara bölmek anlamına gelir. Dinamik karışım, kullanıcının gerçekten arayacağı karışımdır ve statik karışım, aksi takdirde kopyalanacak bilgi parçalarıdır.

11) Sass Haritalarının ne olduğunu ve Sass Haritalarının ne işe yaradığını açıklayınız?

Sass haritası, yalnızca bir dizi değişken değil, hiyerarşik bir şekilde yapılandırılmış bir veridir. Kodun düzenlenmesine yardımcı olabilir. Sass'ın bazı harika kullanımları:

Projenizdeki öğe katmanlarıyla uğraşırken çok faydalıdır.
Farklı renk ve tonlardan oluşan uzun bir liste olduğunda renk yönetiminde faydalı olabilir.
Çeşitli sosyal medya simgeleri için simge haritasını kullanın, örneğin: facebook: '\e607' veya Twitter: '\e602'
Diğer programlama kütüphanelerinden farklı olarak Sass haritası yalnızca kullanılacak kodlardan oluşacaktır.

12) Sass yorumlarının normal CSS'den nasıl farklı olduğunu açıklayın?

Normal CSS'de yorumların sözdizimi /* yorumlar…*/ ile başlar, SASS'ta ise iki tür yorum vardır; tek satırlı yorumlar // ve çok satırlı CSS yorumları /* */ ile.

13) Sass satır içi yorumları destekliyor mu?

Tek satırlık yorumlar // .scss ön işlemcisi tarafından kaldırılacak ve .css dosyanızda görünmeyecek

*/ yorumu geçerli CSS olsa da, .scss'den .css dosyanıza çeviri arasında korunacaktır.

14) Sass'ta enterpolasyon nasıl kullanılır?

Sass'ta, bir değişkendeki bir öğeyi tanımlayabilir ve onu Sass kodunun içine ekleyebilirsiniz. Modüllerinizi ayrı dosyalarda tuttuğunuzda kullanışlıdır.

15) Sass'ta %yer tutucularını ne zaman kullanabileceğinizi açıklayın?

Sass'taki %placeholders, genişletilmesi amaçlanan stiller yazmak istediğinizde ancak temel stillerin çıktı CSS stillerinde görünmesini istemiyorsanız kullanışlıdır.

16) Sass'ta değişkenleri değişkenlerin içine yerleştirmek mümkün müdür?

Değişken adlarının enterpolasyonu şu anda Sass'ta mümkün değildir. Ancak yer tutucuların enterpolasyonunu kullanabilirsiniz.

17) Sass'ın eksileri ve artıları nelerdir?

Artılar:

Sass'ı öğrenmek, özellikle Python, Ruby veya Coffescript geçmişine sahip olanlar ve fonksiyonları kullanarak, karışımlar yazanlar için öğrenmesi kolaydır.
CSS kolayca Sass'a dönüştürülebilir
Proje boyunca @extend özelliğini kullanarak benzer CSS ifadelerini tekrarlamak zorunda değilsiniz
Tüm proje boyunca kullanılabilecek değişkenlerin tanımlanmasına olanak tanır
Duyarlı projenizi daha düzenli tutar

Eksiler:

Kullanmadan önce önişlemcinin yeni özelliklerini öğrenmek zaman gerektirir
Tarayıcının yerleşik öğe denetçisi özelliğini kullanamayabilirsiniz
Sorun giderme zor olabilir

18) AZ nedir açıklayınız?

LESS, dinamik stil sayfası üretme dilidir. LESS bir CSS ön işlemcisidir ve CSS'yi dinamik davranışla genişletir. Değişkenlere, karışımlara, işlemlere ve işlevlere izin verir. LESS hem sunucu hem de istemci tarafında çalışır.

19) LESS dosyasının nasıl oluşturulacağını ve nerede saklanacağını ve derleneceğini açıklayın.

LESS dosyasını oluşturmak veya saklamak, CSS dosyasını oluşturmaya/saklamaya benzer. .less uzantılı yeni bir LESS dosyası oluşturulabilir veya mevcut .css dosyasını .less dosyası olarak yeniden adlandırabilirsiniz. LESS kodunu mevcut CSS koduyla yazabilirsiniz.

~/content/ veya ~/Styles/ klasörü içinde oluşturmanın en iyi yolu

20) LESS hangi şekillerde kullanılabilir?

Npm LESS aracılığıyla komut satırında kullanılabilir
Tarayıcı için komut dosyası olarak indirin
Üçüncü taraf araçlar için kullanılır

21) LESS'te değişken nasıl temsil edilir?

LESS değişkenlerin tanımlanmasına izin verir. LESS'te değişken @sing olarak temsil edilir. Değişken ataması ise: (iki nokta üst üste) işaretiyle yapılır. Değişkenlerin değerleri, küçültülmüş dosyanın yanı sıra CSS çıktı dosyasına da eklenir.

22) Mixins'in nasıl faydalı olduğunu açıklayın?

Karışımlar, sınıf adının özelliklerinden biri olarak dahil edilmesiyle bir sınıfın tüm özelliklerinin başka bir sınıfa yerleştirilmesine olanak tanır. Tıpkı değişkenler gibidir ancak tüm sınıflar içindir.

23) LESS.js'yi bir programda çalıştırdığınızda kodu izleme modunda nasıl ayarlayabileceğinizi açıklayın. HTML5 tarayıcı?

LESS.js'yi bir HTML5 tarayıcısında çalıştırırsanız, oluşturulan CSS'yi önbelleğe almak için yerel depolamayı kullanır. Ancak geliştirici açısından bakıldığında yaptıkları değişiklikleri anında göremezler. Değişikliklerinizi anında görebilmeniz için JavaScript'i takip ederek programı geliştirme ve izleme modunda yükleyebilirsiniz.

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) LESS programlamada iç içe yerleştirmenin ne anlama geldiğini açıklayın.

LESS'te yuvalama, ifadelerin diğer ifadelerin içinde kümelenmesidir, dolayısıyla ilgili kodlardan oluşan bir grup oluşturur. Yani bir kod parçacığı ekleyip onun içine başka bir kod eklediğimizde o kod parçasına yuvalama adı verilir.

25) LESS'te kullanılan renk kanalı fonksiyonlarının neler olduğundan bahsedin.

renk
doyma
hsvhue
doyma
hswalue
kırmızı
yeşil
mavi
alfa
luma
parlaklık

26) LESS'te data-uri nedir açıklayınız?

CSS'de Veri URI'leri en iyi tekniklerden biridir; geliştiricilerin harici görsel referanslarından kaçınmasına ve bunun yerine bunları doğrudan bir stil sayfasına yerleştirmesine olanak tanır. Veri URI'leri HTTP isteklerini azaltmanın mükemmel yoludur

27) “Kaynak Haritası Daha Az Satır İçi” nedir açıklayınız?

“Kaynak Haritası Daha Az Satır İçi” seçeneği, tüm CSS dosyalarını kaynak haritasına dahil etmemiz gerektiğini belirtir. Bu, orijinal kaynağınıza ulaşmak için yalnızca harita dosyanıza ihtiyacınız olduğu anlamına gelir.

28) LESS'te Extend “all”ın ne işe yaradığını açıklayın.

Bir genişletme bağımsız değişkeninde tüm anahtar sözcüklerin sonuncusunu belirttiğinizde, LESS'e bu seçiciyi başka bir seçicinin parçası olarak eşleştirmesi söylenir.

29) LESS'te “StrictImports” nedir açıklayınız?

strictImports, derleyicinin @media blokları veya diğer seçici bloklar içinde @import işlemine izin verip vermeyeceğini kontrol eder

30) LESS ve Sass arasındaki farkları sıralayın?

Her stil sayfası dili kendi perspektifi ve kullanımı açısından iyidir; ancak kullanımlarında çok az fark vardır.

DAHA AZ	şımarıklık
– LESS, JavaScript kullanır ve istemci tarafında işlenir	– Sass Ruby'de kodlanmıştır ve bu nedenle sunucu tarafında işlenir
– Değişken adlarının başında @sembol bulunur	– Değişken adının önünde $ sembolü bulunur
– LESS, tek bir özellik kümesiyle birden fazla seçiciyi miras almaz	– Sass, tek bir özellik kümesiyle birden fazla seçiciyi devralır
– LESS “bilinmeyen” birimlerle çalışmaz, uyumsuz birimler için sözdizimi hatası bildirimi veya matematikle ilgili sözdizimi hatası döndürmez	– Sass, “bilinmeyen” birimlerle çalışmanıza olanak tanır ve uyumsuz birimler için sözdizimi hatası bildirimi döndürür

31) LESS ve Sass arasındaki benzerlikler nelerdir?

LESS ve Sass arasında benzerlikler var

Ad
Renk işlevleri
Karışımlar ve parametrik karışımlar
Yuvalama yetenekleri
JavaScript değerlendirmeleri

32) &Birleştiricinin ne işe yaradığını açıklayın?

&birleştirici iç içe geçmiş seçiciyi ana seçiciyle birleştirir. :hover ve :focus gibi Pseudo sınıfları için kullanışlıdır.

33) LESS'teki işlemlerin ne işe yaradığını açıklayın?

İşlemler aşağıdaki gibi işlevleri gerçekleştirmek için kullanılabilir:

Basit Matematiksel operatörler: +, – , *, /
Renk işlevleri
Matematik fonksiyonları
Herhangi bir boyut veya renk değişkeni çalıştırılabilir

34) Kaçmanın ne işe yaradığını açıklayın?

LESS'te kaçmanın kullanımı

Geçerli CSS sözdizimi olmayan CSS çıktısı almanız gerektiğinde
LESS tarafından tanınmayan özel sözdizimi
LESS derleyicisi kullanılmadığı takdirde hata verir
~ sembollü ve tırnak içine alınmış basit önek

35) LESS elementleri neler içerir?

Daha az element, yaygın olarak kullanılan karışımları içerir

.gradyan
.yuvarlak
.opaklık
.kutu-gölge
.İç gölge

36) LESS'e karşı alternatifleri sıralayın?

SASS: Sözdizimsel Açıdan Harika Stil Sayfaları
SCSS: SASS Sürüm.2
pikap iğnesi

37) Derleyiciyi komut satırından nasıl çağırabileceğinizi açıklayın?

Derleyiciyi LESS'teki komut satırından şu şekilde çağırabilirsiniz:

$ lessc stiller.daha az

Bu, derlenmiş CSS'nin çıktısını alacaktır. stdout; daha sonra onu seçtiğiniz bir dosyaya yönlendirebilirsiniz

$ lessc stiller.less > stiller.css

38) e() fonksiyonunun kullanımı nedir?

e() işlevinin yardımıyla, LESS derleyicisi tarafından fark edilmeden doğrudan derlenmiş CSS'ye geçmesi için bir değerden kaçabilirsiniz.

39) LESS'i CSS'ye nasıl önceden derleyebileceğinizi açıklayın.

LESS'i CSS'de önceden derlemek için kullanabilirsiniz

Node.js'yi kullanarak less.js'yi çalıştırın: Node.js JavaScript çerçevesini kullanarak less.js betiğini tarayıcının dışında çalıştırabilirsiniz.
Lessphp kullanın: PHP'de yazılmış LESS derleyicisinin uygulanması için lessphp kullanılır
Çevrimiçi Derleyiciyi Kullan: Bir derleyici kurmadan LESS kodunun hızlı bir şekilde derlenmesi için çevrimiçi derleyiciyi kullanın
Az. app (Mac kullanıcıları için): Less.app, Mac kullanıcıları için ücretsiz bir araçtır; bu araç bunları otomatik olarak CSS dosyalarında derler

40) LESS'te birleştirme fonksiyonunun nasıl kullanıldığını açıklayın?

Birden çok özellikteki değerleri tek bir özellik altında boşluk veya virgülle ayrılmış bir listede toplamak için LESS kullanılır. Dönüşüm ve arka plan gibi özellikler için kullanışlıdır

41) LESS'te döngü yapılarını nasıl oluşturabilirsiniz?

Bir karışım kendisini LESS olarak çağırabilir. Bu tür özyinelemeli karışımlar, Desen eşleştirme ve Koruma İfadeleri ile birleştirildiğinde çeşitli yinelemeli/döngü yapıları oluşturmak için kullanılabilir.

42) LESS'te neden parametrik karışımlara ihtiyacımız var?

Parametrik karışımlar standart karışımlarla aynıdır. Tek fark, parametrik karışımların JavaScript'teki işlevler gibi parametreler almasıdır. Karışımlara ilişkin parametreleri belirledikten sonra karışımlar üzerinde daha fazla kontrole sahip olursunuz.