SCSS ve Sass arasındaki fark nedir?

Okuduğum kadarıyla Sass, değişken ve matematik desteğiyle CSS'yi daha güçlü yapan bir dildir.

SCSS ile farkı nedir? Aynı dil mi olmalı? Benzer? Farklı?

Sass, sözdizimi ilerlemelerine sahip bir CSS ön işlemcisidir. Gelişmiş sözdizimindeki stil sayfaları program tarafından işlenir ve normal CSS stil sayfalarına dönüştürülür. Ancak, onlar do not CSS standardını kendisi uzatmak.

CSS değişkenleri desteklenir ve kullanılabilir, ancak işlemci öncesi değişkenlerin yanı sıra kullanılamaz.

SCSS ve Sass arasındaki fark için Sass dokümantasyon sayfasındaki bu metin şu soruya cevap vermelidir:

Sass için iki sözdizimi vardır. SCSS (Sassy CSS) olarak bilinen ve bu referans boyunca kullanılan ilki, CSS sözdiziminin bir uzantısıdır. Bu, her geçerli CSS stil sayfasının aynı anlama gelen geçerli bir SCSS dosyası olduğu anlamına gelir. Bu sözdizimi, aşağıda açıklanan Sass özellikleri ile geliştirilmiştir. Bu sözdizimini kullanan dosyalar .scss uzantısına sahiptir.

Girintili sözdizimi (veya bazen yalnızca “Sass”) olarak bilinen ikinci ve daha eski sözdizimi , CSS yazmanın daha özlü bir yolunu sunar. Seçicilerin yuvalanmasını göstermek için köşeli parantezler yerine girinti ve özellikleri ayırmak için noktalı virgül yerine satırlar kullanır. Bu sözdizimini kullanan dosyalar .sass uzantısına sahiptir.

Ancak, tüm bunlar sadece sonunda SSS oluşturan Sass ön derleyicisi ile çalışır. CSS standardının kendisinin bir uzantısı değildir.

Sass'ın yaratılmasına yardımcı olan geliştiricilerden biriyim.

Aradaki fark UI. Metinsel dışın altında özdeştirler. Bu yüzden sass ve scss dosyaları birbirlerini içe aktarabilir. Aslında, Sass'ın dört sözdizimi ayrıştırıcısı vardır: scss, sass, CSS ve daha az. Tüm bunlar, farklı bir sözdizimini CSS çıktısına daha da işlenen bir Özet Sözdizimi Ağacı'na veya hatta sass dönüştürme aracıyla diğer biçimlerden birine dönüştürür.

En sevdiğiniz sözdizimini kullanın, her ikisi de tamamen desteklenir ve fikrinizi değiştirirseniz daha sonra bunlar arasında geçiş yapabilirsiniz.

Sass .sassdosyası görsel olarak .scssdosyadan farklıdır , örn.

Örnek. Sass - sass eski sözdizimidir

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css, Sass 3'teki yeni sözdizimidir

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

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

Sass'ın ( Sözdizimsel Müthiş Stil Sayfaları ) iki sözdizimi vardır:

• daha yeni: SCSS ( Sassy CSS )
• ve eski orijinal: orijinal girinti sözdizimi, Sass da denir Sass .

Yani her ikisi de iki farklı olası sözdizimine sahip Sass ön işlemcisinin bir parçası .

SCSS ve orijinal Sass arasındaki en önemli fark :

SCSS :

• Sözdizimi CSS'ye benzer (her normal geçerli CSS3 de geçerli SCSS'dir , ancak diğer yöndeki ilişki açıkça gerçekleşmez)

• Diş telleri kullanır {}

• Noktalı virgül kullanır ;
• Atama işareti: :
• Bir mixin oluşturmak için @mixindirektif kullanır
• Mixin kullanmak için ondan önce @includeyönerge ile
• Dosyalar .scss uzantısına sahiptir.

Orijinal Sass :

• Söz dizimi benzer Ruby
• Diş teli yok
• Sıkı girinti yok
• Noktalı virgül yok
• Atama işareti =yerine:
• Bir mixin oluşturmak için =işareti kullanır
• Mixin kullanmak için +işaretten önce gelir
• Dosyalar .sass uzantısına sahiptir.

Bazıları orijinal sözdizimi Sass'ı , diğerleri ise SCSS'yi tercih ediyor . Her iki durumda da, ancak Sass’ın girintili sözdiziminin henüz reddedilmediğini ve asla reddedilmeyeceğini belirtmek gerekir .

Sass-convert ile dönüşümler :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass ve SCSS belgeleri

Sözdizimi farklıdır ve bu ana profesyonel (veya bakış açınıza bağlı olarak).

Başkalarının söylediklerinin çoğunu tekrarlamamaya çalışacağım, bunu kolayca google'a gönderebilirsiniz, ancak bunun yerine, her ikisini de kullanarak deneyimlerimden, bazen aynı projede bile birkaç şey söylemek istiyorum.

SASS Pro

• daha temiz - Python, Ruby (sembol benzeri sözdizimiyle sahne bile yazabilirsiniz) veya CoffeeScript dünyasından geliyorsanız, size çok doğal gelecektir - karışımlar, işlevler ve genellikle yeniden kullanılabilir şeyler yazmak .sassçok daha kolaydır 've .scss(öznel) değerinden daha okunabilir .

SASS eksileri

• boşluk duyarlı (sübjektif), diğer dillerde umursamıyorum ama burada CSS'de beni rahatsız ediyor (konular: kopyalama, sekme vs uzay savaşı, vb.).
• satır içi kural yok (bu benim için oyunun kırılmasıydı), body color: red.scss içinde yapabildiğin gibi yapamazsınbody {color: red}
• diğer satıcı malzemelerini içe aktarmak, vanilya CSS parçacıklarını kopyalamak - imkansız değil, bir süre sonra çok sıkıcı. Çözüm, projenizde .scssdosyaların (dosyaların yanında .sass) bulunması veya dönüştürülmesidir .sass.

Bunun dışında - aynı işi yapıyorlar.

Şimdi, yapmaktan hoşlandığım şey, mümkünse .sassaslında CSS için derlenecek karışımlar ve değişkenler yazmak ve kod yazmaktır .scss(yani, Visual studio'nun desteği yoktur, .sassancak Rails projelerinde her çalıştığımda genellikle ikisini birleştiririm, değil bir dosyada .c).

Son zamanlarda, Stylus'a bir şans vermeyi düşünüyorum (tam zamanlı bir CSS ön işlemcisi için) çünkü iki sözdizimini bir dosyada (diğer bazı özelliklerin yanı sıra) birleştirmenize izin veriyor. Bu, bir takımın alması için iyi bir yön olmayabilir, ancak yalnız başına bakım yaptığınızda - sorun değil. Sözdizimi söz konusu olduğunda prob ucu aslında en esnektir.

Ve nihayet için mixin .scssvs .sasssözdizimi karşılaştırma:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Gönderen dilin ana

Sass'ın iki sözdizimi vardır. Yeni ana sözdizimi (Sass 3'ten itibaren) “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, eski sözdizimine girintili sözdizimi (veya yalnızca “Sass”) denir. Haml'in şiddetinden esinlenerek, CSS'ye benzerlikten ziyade özlü olmayı tercih eden insanlar için tasarlanmıştır. Köşeli ayraçlar ve noktalı virgüller yerine, blokları belirtmek için satırların girintisini kullanır. Artık birincil sözdizimi olmasa da, girintili sözdizimi desteklenmeye devam edecektir. Girintili sözdizimindeki dosyalar .sass uzantısını kullanır.

SASS, CSS yayan yorumlanmış bir dildir. Sass'ın yapısı CSS'ye (uzaktan) benziyor , ancak bana göre açıklama biraz yanıltıcı; öyle değil CSS yerini veya bir uzantısı. Sonunda CSS tüküren bir tercüman, bu yüzden Sass hala normal CSS sınırlamalarına sahip, ancak bunları basit kodla maskeler.

Temel fark sözdizimidir. SASS'ın beyaz boşluklu ve noktalı virgül içermeyen gevşek bir sözdizimi olsa da, SCSS CSS'ye daha çok benziyor.

SASS, Sözdizimsel Müthiş Stil Sayfaları anlamına gelir. Temel dile güç ve zarafet katan CSS'nin bir uzantısıdır. SASS bazı isimlerle SCSS olarak adlandırıldı, ancak eski SASS da orada. SCSS veya SASS'ı kullanmadan önce lütfen aşağıdaki farka bakın.

Bazı SCSS ve SASS sözdizimi örneği:

SCSS

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

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

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SUKDÖ'nün

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

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Derleme Sonrası CSS Çıktısı (Her İkisi İçin Aynı)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Daha fazla rehber için resmi web sitesini görebilirsiniz .

Sass birinciydi ve sözdizimi biraz farklı. Örneğin, bir mixin dahil:

Sass: +mixinname()
Scss: @include mixinname()

Sass kıvırcık parantezleri ve noktalı virgülleri görmezden gelir ve daha kullanışlı bulduğum yuvaya yerleştirilir.

SASS ve SCSS makaleleri arasındaki fark, detaylardaki farkı açıklar. SASS ve SCSS seçenekleriyle karıştırmayın, başlangıçta da .scss, Sassy CSS ve yeni nesil .sass.

Bu mantıklı gelmediyse, aşağıdaki koddaki farkı görebilirsiniz.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

Yukarıdaki kodda; beyanları ayırmak. Bu noktayı daha da açıklamak için .border için tüm bildirimleri tek bir satıra ekledim. Buna karşılık, aşağıdaki SASS kodu girintili farklı satırlarda olmalıdır ve;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Aşağıdaki CSS'den SCSS stilinin normal CSS'ye daha eski SASS yaklaşımından çok daha benzer olduğunu görebilirsiniz.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Sanırım bugünlerde birisi Sass ile çalıştığından bahsediyorsa, geleneksel .sass yolundan ziyade .scss dilinde yazmayı kastediyorlar.

Orijinal sassyakut sözdizimine benzer, yakut, yeşim vb.

Bu sözdizimlerinde kullanmıyoruz {}, bunun yerine beyaz boşluklarla gidiyoruz, aynı zamanda ;...

Gelen scsssözdizimlerinden daha gibidir CSS, ancak daha çok özellikler alma ile: benzer, vs, yuvalama ilan lessve diğer ön işleme CSS...

Bunlar temelde aynı şeyi yapmak ama ben sözdizimi farkı, göz görmek için her satır çift koymak {}, ;ve spaces:

SUKDÖ'nün:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

Kompakt cevap:

SCSS, Sass CSS ön işlemcisi tarafından desteklenen ana sözdizimini ifade eder .

• İle biten dosyalar .scssSass tarafından desteklenen standart sözdizimini temsil eder. SCSS, CSS'nin bir üst kümesidir.
• İle biten dosyalar .sass, Ruby dünyasından gelen Sass tarafından desteklenen "eski" sözdizimini temsil eder.

SASS, Sözdizimsel Müthiş Stil Sayfalarıdır ve iç içe geçmiş kurallar, kalıtım, Mixins özelliklerini sağlayan CSS'nin bir uzantısıdır, oysa SCSS, CSS'ye benzer olan ve CSS ve SASS arasındaki boşlukları ve uyumsuzlukları dolduran Sassy Basamaklı Stil Sayfalarıdır. MIT lisansı ile lisanslanmıştır. Bu makalede farklılıklar hakkında daha fazla bilgi var: https://www.educba.com/sass-vs-scss/