Sass @import ve Parçalara

Sass, CSS kodunu kurak tutabilir (DRYDon't Repeat Yourself, kendinizi tekrarlamayın).

DRY kod yazmanın bir yolu, ilgili kodları ayrı dosyalarda saklamaktır.

CSS parçacıkları kullanarak küçük dosyalar oluşturabilir ve diğer Sass dosyalarına dahil edebilirsiniz. Örneğin bu tür dosyalar olabilir: sıfırlama dosyaları, değişkenler, renkler, fontlar vb.

Sass Dosya İçe Aktarma

CSS gibi, Sass da @import Düzen.

@import Düzen; bir dosyanın içeriğini diğer bir dosyaya dahil etmenizi sağlar.

Performans sorunları nedeniyle CSS @import Düzenin ana dezavantajı; her çağrıldığında ekstra bir HTTP talebi oluşturur. Ancak, Sass @import Düzen; dosyaları CSS'ye dahil eder; bu yüzden çalışma sırasında ekstra HTTP çağrılarına gerek yok!

Sass İçe Aktarma Grami：

@import dosya_adı;

İpucu：Dosya uzantısını belirtmenize gerek yok, Sass otomatik olarak .sass veya .scss dosyasını varsayacaktır. Ayrıca CSS dosyalarını da içe aktarabilirsiniz.@import Düzen; dosyaları içe aktararak, ana dosyada içe aktarılan dosyaların tanımladığı herhangi bir değişken veya mixin kullanabilirsiniz.

Ana dosyada istediğiniz kadar dosya içe aktarabilirsiniz:

Örnek

@import "variables";
@import "colors";
@import "reset";

Bize bir örnek bakalım: "reset.scss" adında bir sıfırlama dosyası varsa, şu şekilde görünebilir:

SCSS Grami (reset.scss):

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

Şimdi "reset.scss" dosyasını "standard.scss" adlı başka bir dosyaya dahil etmeyi planlıyoruz.

Bunu böyle yapıyoruz: genellikle dosya başına ekliyoruz @import Düzen; bu içeriğin genel etkisi olacak şekilde:

SCSS Grami (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Bu yüzden, "standard.css" dosyası tercüme edildiğinde, CSS şu şekilde görünecektir:

CSS Çıktısı：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Parçaları (Bölgesel Dosyalar)

Varsayılan durumda, Sass tüm .scss dosyalarını doğrudan tercüme eder. Ancak, dosyaların doğrudan tercüme edilmesini istemezseniz, dosyaların doğrudan tercüme edilmesini istemezsiniz.

Sass, dosya adının başında alt çizgi kullandığınızda, Sass'ın onu dönüştürmeyeceğini bir mekanizması vardır. Bu şekilde adlandırılan dosyalar Sass'ta partials olarak adlandırılır.

Bu nedenle, parçacık Sass dosyaları, önündeki alt çizgi ile adlandırılır:

Sass Parçacık Grameri:

_dosyaadı;

Aşağıdaki örnek, adı "_colors.scss" olan parçacık Sass dosyasını gösterir. (Bu dosya doğrudan "colors.css" olarak dönüştürülmez):

Örnek

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Şu anda, bu parçacık dosyasını içe aktardığınızda alt çizgiyi atlayın. Sass'ın anlayışı, dosyayı "_colors.scss" olarak içe aktarması gerektiğidir:

Örnek

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}