Sass - Yorumlar

Bu bölümde Sass hakkında çalışacağız. Comments. Yorumlar, kaynak koduna yerleştirilen yürütülemez ifadelerdir. Yorumlar, kaynak kodun anlaşılmasını kolaylaştırır. SASS iki tür yorumu destekler.

Multiline comments- Bunlar / * ve * / kullanılarak yazılır. Çok satırlı yorumlar CSS çıktısında korunur.
Single line comments - Bunlar kullanılarak yazılmıştır //ardından yorumlar. CSS çıktısında tek satırlı yorumlar korunmaz.

Misal

Aşağıdaki örnek, SCSS dosyasındaki yorumların kullanımını göstermektedir -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Ardından, style.scss dosyası oluşturun .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

Aşağıdaki komutu kullanarak SASS'ye dosyayı izlemesini ve SASS dosyası her değiştiğinde CSS'yi güncellemesini söyleyebilirsiniz -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ardından, yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıda verilen html kodunu şuraya kaydedin: sass_comments.html dosya.
Bu HTML dosyasını bir tarayıcıda açın, aşağıda gösterildiği gibi bir çıktı görüntülenir.

Çok satırlı yorumlarda enterpolasyon hakkında çalışmak için bu bağlantıya tıklayın .

Sass - Çok Satırlı Yorumlarda Enterpolasyon

Açıklama

Çok satırlı yorumlardaki enterpolasyon, ortaya çıkan CSS'de çözülür. Küme ayraçları içinde değişkenleri veya özellik adlarını belirtebilirsiniz.

Sözdizimi

$var : "value"; /* multiline comments #{$var} */

Misal

Aşağıdaki örnek, SCSS dosyasındaki çok satırlı yorumlarda enterpolasyon kullanımını gösterir -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Ardından, style.scss dosyası oluşturun .

style.css

$version: "7.8"; /* Framework version for the generated CSS is #{$version}. */

Aşağıdaki komutu kullanarak SASS'ye dosyayı izlemesini ve SASS dosyası her değiştiğinde CSS'yi güncellemesini söyleyebilirsiniz -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ardından, yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır

style.css

/* Framework version for the generated CSS is 7.8. */

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıda verilen html kodunu şuraya kaydedin: sass_comments_interpolation.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın, aşağıda gösterildiği gibi bir çıktı görüntülenir.