CSS ve SCSS arasındaki fark nedir?

CSS'yi çok iyi biliyorum ama Sass konusunda kafam karıştı. SCSS'nin CSS'den farkı nedir ve CSS yerine SCSS kullanırsam aynı şekilde çalışır mı?

Idriss cevabına ek olarak :

CSS

CSS'de kodu aşağıda gösterildiği gibi tam uzunlukta yazıyoruz.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

SCSS'de bu kodu a kullanarak kısaltabiliriz, @mixinböylece tekrar tekrar yazmak colorve widthözellikler yapmak zorunda kalmayız . Bunu PHP veya diğer dillere benzer şekilde bir işlev aracılığıyla tanımlayabiliriz.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SUKDÖ'nün

Ancak SASS'de tüm yapı görsel olarak SCSS'den daha hızlı ve daha temizdir.

• Kopyala ve yapıştır kullanırken beyaz boşluğa duyarlıdır,

• Görünüşe göre şu anda satır içi CSS'yi desteklemiyor.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

CSS , herhangi bir tarayıcının web sayfalarını biçimlendirmek için anladığı stil dilidir.

SCSS , SASSRuby'de yazılmış bir program için özel bir dosya türüdür, CSSbir tarayıcı için stil sayfalarını bir araya SASSgetirir ve bilgi için, CSSbenzer değişkenlere, iç içe yerleştirmeye ve daha fazlasına yazmayı CSSdaha kolay ve daha hızlı hale getirebilecek birçok ek işlevsellik ekler .
SCSS dosyaları , CSStarayıcınızın anlayabileceği geleneksel bir çıktı elde etmek için bir web uygulaması çalıştıran sunucu tarafından işlenir .

cssdeğişkenler de vardır. Bunları şu şekilde kullanabilirsiniz:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Ve bu daha az

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Değişken tanımları doğru:

$      => SCSS, SASS
--     => CSS
@      => LESS

Tüm cevaplar güzel ama soru cevaplardan biraz farklı

"Sass hakkında. SCSS'nin CSS'den farkı nedir" : scss, iyi biçimlendirilmiş CSS3 sözdizimidir. bunu oluşturmak için sass ön işlemcisini kullanır.

ve CSS yerine SCSS kullanırsam aynı şekilde çalışır mı? Evet. fikriniz sass ön işlemcisini destekliyorsa. aynı işe yarayacak.

Sass'ın iki sözdizimi vardır. En yaygın kullanılan sözdizimi "SCSS" ("Sassy CSS" için) olarak bilinir ve CSS3'ün sözdiziminin bir üst kümesidir. Bu, her geçerli CSS3 stil sayfasının da geçerli SCSS olduğu anlamına gelir. SCSS dosyaları .scss uzantısını kullanır.

İkinci, daha eski sözdizimi girintili sözdizimi (veya sadece ".sass") olarak bilinir. Haml'ın özünden esinlenerek, CSS'ye benzerlik yerine özlü olmayı tercih eden insanlar için tasarlanmıştır. Parantez ve noktalı virgül yerine, blokları belirtmek için satırların girintisini kullanır. Girintili sözdizimindeki dosyalar .sass uzantısını kullanır.

• Furher Hakkında Bilgi:

CSS Ön İşlemcisi Nedir?

CSS kendi içinde, yeniden kullanılabilir ve organize kod yazmak için gereken karmaşık mantık ve işlevsellikten yoksundur. Sonuç olarak, bir geliştirici sınırlamalara bağlıdır ve özellikle kapsamlı kod ve birden çok CSS stil sayfası içeren büyük projelerde çalışırken, kod bakımı ve ölçeklenebilirlik konusunda aşırı zorluklarla karşılaşacaktır. CSS Ön İşlemcileri kurtarmaya geldiği yer burasıdır.

CSS Ön İşlemcisi, varsayılan vanilya CSS'nin temel işlevlerini kendi komut dosyası diliyle genişletmek için kullanılan bir araçtır. Değişkenler, işlevler, karışımlar, kod iç içe yerleştirme ve kalıtım gibi karmaşık mantıksal sözdizimi kullanmamıza yardımcı olur ve vanilya CSS'nizi güçlendirir. CSS Ön İşlemcileri kullanarak, basit görevleri sorunsuz bir şekilde otomatikleştirebilir, yeniden kullanılabilir kod parçacıkları oluşturabilir, kod tekrarını ve şişkinliği önleyebilir ve iyi organize edilmiş ve okunması kolay iç içe kod blokları yazabilirsiniz. Ancak, tarayıcılar yalnızca yerel vanilya CSS kodunu anlayabilir ve CSS Ön İşlemcisi sözdizimini yorumlayamaz. Bu nedenle, karmaşık ve gelişmiş Önişlemci sözdiziminin önce yerel CSS sözdiziminde derlenmesi gerekir; bu, daha sonra tarayıcılar arası uyumluluk sorunlarını önlemek için tarayıcılar tarafından yorumlanabilir.

Makalede ileriye doğru, şu anda dünyanın dört bir yanındaki geliştiriciler tarafından kullanılan en popüler 3 CSS Ön İşlemcisine, yani Sass, LESS ve Stylus'a bir göz atacağız. Sass vs LESS ve Stylus arasında kazanana karar vermeden önce, önce onları detaylı olarak tanımamıza izin verin.

Sass - Sözdizimsel Olarak Harika Stil Sayfaları

Sass, "Syntactically Awesome Style Sheets" in kısaltmasıdır. Sass, yalnızca dünyadaki en popüler CSS Ön İşlemcisi değil, aynı zamanda 2006 yılında Hampton Catlin tarafından başlatılan ve daha sonra Natalie Weizenbaum tarafından geliştirilen en eskilerden biridir. Sass, Ruby dilinde yazılmış olmasına rağmen, bir Ön Derleyici LibSass, Sass'ın diğer dillerde ayrıştırılmasına ve Ruby'den ayrıştırılmasına izin verir. Sass, büyük bir aktif topluluğa ve yeni başlayanlar için internette bulunan kapsamlı öğrenme kaynaklarına sahiptir. Olgunluğu, istikrarı ve güçlü mantıksal becerisi sayesinde Sass, rakip akranlarının önünde CSS Ön İşlemcisi'nin ön saflarına yerleşmiştir.

Sass, Sass veya SCSS kullanılarak 2 sözdiziminde yazılabilir. İkisi arasındaki fark nedir? Hadi bulalım.

Sözdizimi Bildirimi: Sass - SCSS

• SCSS, Sassy CSS'nin kısaltmasıdır. Sass'tan farklı olarak, SCSS girintiye dayalı değildir.
• .sass uzantısı Sass için orijinal sözdizimi olarak kullanılırken, SCSS .scss uzantısıyla daha yeni bir sözdizimi sunar.
• Sass'tan farklı olarak, SCSS'de tıpkı CSS gibi küme parantezleri ve noktalı virgül vardır.
• SCSS'nin aksine, Sass'ın CSS'den oldukça sapması nedeniyle okunması zordur. Bu nedenle SCSS, daha kolay okunması ve Native CSS'ye çok benzemesi ve aynı zamanda Sass'ın gücünün keyfini çıkarması nedeniyle daha çok önerilen Sass sözdizimidir.

Derlenmiş CSS kodu ile birlikte Sass ve SCSS sözdizimi ile aşağıdaki örneği düşünün.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

Her iki durumda da, ister Sass ister SCSS olsun, derlenen CSS kodu aynı olacaktır -

#box {
      color: #fff;
      background: #00f;

Sass Kullanımı

Muhtemelen en popüler ön uç çerçevesi Bootstrap Sass'ta yazılmıştır. 3. versiyona kadar, Bootstrap LESS olarak yazılıyordu ancak bootstrap 4 Sass'ı benimsedi ve popülaritesini artırdı. Sass kullanan büyük şirketlerden birkaçı - Zapier, Uber, Airbnb ve Kickstarter.

LESS - Daha Yalın Stil Sayfaları

LESS, "Leaner Stylesheets" in kısaltmasıdır. 2006'da Sass'ın ilk lansmanından 3 yıl sonra, Alexis Sellier tarafından 2009'da piyasaya sürüldü. Sass Ruby'de yazılırken, LESS JavaScript ile yazılmıştır. Aslında, LESS, yerel vanilya CSS'nin işlevselliğini karışımlar, değişkenler, iç içe yerleştirme ve kural seti döngüsüyle genişleten bir JavaScript kitaplığıdır. Sass vs LESS hararetli bir tartışma oldu. LESS'in Sass'ın en güçlü rakibi olması ve ikinci en büyük kullanıcı tabanına sahip olması şaşırtıcı değildir. Bununla birlikte, Bootstrap, Bootstrap 4'ün piyasaya sürülmesiyle Sass'ın lehine LESS'i terk ettiğinde, LESS'in popülaritesi azaldı. LESS'in Sass'a göre birkaç dezavantajından biri, işlevleri desteklememesidir. Sass'tan farklı olarak, LESS, @ media ve @keyframes ile karışıklığa neden olabilecek değişkenleri bildirmek için @ kullanır. Ancak, LESS'in Sass ve Stylus veya diğer herhangi bir ön işlemciye göre önemli bir avantajı, onu projenize eklemenin kolaylığıdır. Bunu NPM kullanarak veya Less.js dosyasını dahil ederek yapabilirsiniz. Sözdizimi Bildirimi: LESS .less uzantısını kullanır. LESS sözdizimi, değişkenleri bildirmek için $ işareti yerine LESS'in @ kullanması dışında SCSS'ye oldukça benzer.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

DAHA AZ Kullanımı Sürüm 4'ün lansmanına kadar popüler Bootstrap çerçevesi LESS olarak yazılmıştır. Bununla birlikte, SEMANTIC UI adlı başka bir popüler çerçeve hala LESS olarak yazılmıştır. Sass kullanan büyük şirketler arasında Indiegogo, Patreon ve WeChat bulunmaktadır

pikap iğnesi

Stylus, eski Node JS geliştiricisi TJ Holowaychuk tarafından, Sass'ın piyasaya sürülmesinden yaklaşık 4 yıl ve LESS'in piyasaya sürülmesinden 1 yıl sonra 2010 yılında piyasaya sürüldü. Kalem, Node JS ile yazılmıştır ve JS yığınına mükemmel uyum sağlar. Kalem, Sass'ın mantıksal becerisinden ve LESS'in basitliğinden büyük ölçüde etkilendi. Stylus, Node JS geliştiricileri arasında hala popüler olmasına rağmen, kendisi için oldukça büyük bir paylaşım yapamadı. Stylus'un Sass veya LESS'e göre bir avantajı, son derece güçlü yerleşik işlevlerle donanmış olması ve ağır bilgi işlem işlemlerini idare edebilmesidir.

Sözdizimi Bildirimi: Stylus .styl uzantısını kullanır. Stylus, sözdizimi yazmada büyük bir esneklik sunar, yerel CSS'yi destekler ve ayrıca köşeli parantez iki nokta üst üste ve noktalı virgüllerin atlanmasına izin verir. Ayrıca, Stylus'un değişkenleri tanımlamak için @ veya $ sembollerini kullanmadığını unutmayın. Bunun yerine Stylus, bir değişken bildirimini belirtmek için atama işleçlerini kullanır.

STYLUS SYNTAX NATIVE CSS GİBİ YAZILI

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

VEYA

KIRMIZI DESTEKLER OLMADAN STYLUS SYNTAX

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

VEYA

KOLONLAR VE SEMİKOLONLAR OLMADAN STYLUS SYNTAX

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color