前言

在現(xiàn)代的前端開發(fā)中，CSS已成為呈現(xiàn)網(wǎng)頁和應(yīng)用程序樣式的核心。然而，原生的CSS語法在大型項(xiàng)目中可能變得混亂、冗長且難以維護(hù)。
為了解決這些問題，SCSS（Sass CSS）和Sass（Syntactically Awesome Style Sheets）應(yīng)運(yùn)而生。
本文將帶你簡單了解sass和scss。

sass中文網(wǎng)
scss中文網(wǎng)

SCSS

SCSS（Sass CSS）是一種CSS預(yù)處理器，它擴(kuò)展了普通的CSS語法，提供了更強(qiáng)大、更靈活的功能。
SCSS使用類似于CSS的語法，并引入了變量、嵌套、混合、繼承等概念，使得CSS代碼更易于編寫和維護(hù)。

1. 變量（Variables）：您可以使用變量來存儲顏色、字體、間距等重復(fù)使用的值，并在需要的地方引用它們。這樣可以簡化代碼，方便統(tǒng)一修改。

   $primary-color: #007bff;
   
   .button {
     background-color: $primary-color;
   }
   

2. 嵌套選擇器（Nested Selectors）：可以在SCSS中嵌套選擇器，以減少代碼量，改善可讀性。

   .container {
     width: 100%;
     
     .title {
       font-size: 24px;
     }
   }
   

3. 混合（Mixins）：混合是一段可重用的代碼塊，可以像函數(shù)一樣在需要的地方引用。它可以包含任意數(shù)量的屬性和樣式。

   @mixin flexbox {
   	display: flex;
   	justify-content: center;
   	align-items: center;
   }
   			
   .container {
   	@include flexbox;
   }
   

4. 繼承（Extend）：可以通過繼承樣式來減少重復(fù)的CSS代碼。

   .button {
     border: 1px solid #ccc;
     padding: 10px;
   }
   
   .primary-button {
     @extend .button;
     background-color: #007bff;
     color: #fff;
   }
   

5. 導(dǎo)入其他文件（Import）：可以將SCSS代碼拆分到多個(gè)文件中，并使用@import指令將它們導(dǎo)入到主文件中。

   // main.scss
   @import "variables";
   @import "buttons";
   

6. @content 是 Sass/SCSS 中的特殊指令，用于在自定義的混入(Mixin）中傳遞代碼塊。通過使用 @content，可以將一個(gè)或多個(gè)代碼塊傳遞給混入，并在混入中使用這些代碼塊。

   @mixin media-query($size) {
     @media (max-width: $size) {
       @content;
     }
   }
   
   .container {
     width: 100%;
   
     @include media-query(768px) {
       background-color: #f5f5f5;
     }
   }
   

   編譯后的 CSS 代碼如下所示：

   .container {
     width: 100%;
   }
   
   @media (max-width: 768px) {
     .container {
       background-color: #f5f5f5;
     }
   }
   

   應(yīng)用: 創(chuàng)建適應(yīng)不同屏幕尺寸或其他條件的樣式。

以上只是SCSS的一小部分功能和用法。SCSS還提供了更多的功能，如條件語句、循環(huán)、函數(shù)等，以及靈活的配置選項(xiàng),更多內(nèi)容見scss中文網(wǎng)。

Sass

Sass（Syntactically Awesome Style Sheets）是一種CSS預(yù)處理器，它擴(kuò)展了普通的CSS語法，并提供了更多的功能和特性。
Sass與SCSS非常相似，實(shí)際上，SCSS是Sass的一種語法擴(kuò)展，可以說是更加兼容和易于學(xué)習(xí)的版本。

以下是一些Sass的特性和用法：

1. 變量（Variables）：在Sass中，使用變量來存儲重復(fù)的值，例如顏色、字體大小、間距等，并在需要的地方引用它們。

   $primary-color: #007bff
   
   .button
     background-color: $primary-color
   

2. 嵌套選擇器（Nested Selectors）：在Sass中嵌套選擇器，以減少代碼量和改善可讀性。

   .container
     width: 100%
   
     .title
       font-size: 24px
   

3. 混入（Mixins）：混入是一段可重用的代碼塊，在需要的地方引用它們。與SCSS類似，混入可以包含任意數(shù)量的屬性和樣式。

   @mixin flexbox
     display: flex
     justify-content: center
     align-items: center
   
   .container
     @include flexbox
   

4. 繼承（Extend）：Sass允許通過繼承樣式來減少重復(fù)的CSS代碼。

   .button
     border: 1px solid #ccc
     padding: 10px
   
   .primary-button
     @extend .button
     background-color: #007bff
     color: #fff
   

5. 導(dǎo)入其他文件（Import）：您可以將Sass代碼拆分到多個(gè)文件中，并使用@import指令將它們導(dǎo)入到主文件中。

   // main.sass
   @import variables
   @import buttons
   

Sass 和 SCSS 的區(qū)別

• Sass：

  • 使用縮進(jìn)來表示層級關(guān)系，沒有大括號和分號。
  • 通過空行、縮進(jìn)和冒號來表示屬性和值的關(guān)系。
  • 嵌套選擇器使用父級選擇器后跟子級選擇器的方式，可以減少代碼量。
  • 沒有必要寫單位，如可以直接寫 margin: 10，Sass 會自動(dòng)添加單位。
  • 變量定義符號為 $，例如 $primary-color: #007bff。
  • 混入使用 @mixin 聲明，通過 @include 引用。
  • 文件后綴名為 .sass。

  // main.sass
  
  $primary-color: #007bff
  
  .container
    width: 100%
  
    .title
      font-size: 24px
  
  .button
    background-color: $primary-color
  

• SCSS：

  • 使用花括號和分號來表示層級關(guān)系和語句結(jié)束。
  • 屬性和值之間使用冒號來進(jìn)行分隔。
  • 嵌套選擇器使用普通的 CSS 語法，以大括號表示。
  • 需要明確寫明單位，如 margin: 10px。
  • 變量定義符號為 $，例如 $primary-color: #007bff。
  • 混入使用 @mixin 聲明，通過 @include 引用。
  • 文件后綴名為 .scss。

  // main.scss
  
  $primary-color: #007bff;
  
  .container {
    width: 100%;
  
    .title {
      font-size: 24px;
    }
  }
  
  .button {
    background-color: $primary-color;
  }
  

• 無論是Sass還是SCSS，最終都會被編譯為普通的CSS代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-637153.html

  /* main.css */
  
  .container {
    width: 100%;
  }
  
  .container .title {
    font-size: 24px;
  }
  
  .button {
    background-color: #007bff;
  }
  

到了這里，關(guān)于CSS革命：用Sass/SCSS引領(lǐng)前端創(chuàng)新的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！