薩斯開始

>本文探討了CSS預處理器Sass的功能，以簡化您的CSS工作流程。 它已通過當前信息和改進的格式進行了更新。

sass：a css革命

>

sass可以通過變量，嵌套和混合物等功能增強CSS，使樣式表更易於管理和動態。 它提供了兩種語法：原始的縮進語法（簡潔）和類似CSS的.scss>（更廣泛地採用）。 本文側重於.scss。

>

為什麼要使用sass？ Sass擁有一個大型活躍的社區和豐富的擴展生態系統。 它的模塊化和組織能力簡化了大規模項目。 縮進語法和>之間的選擇是偏愛問題。

>與CSS的相似性使初學者更容易。

.scss>工作流和工具.scss

>避免直接編輯>文件。而是修改文件，然後將其編譯到CSS中。 這可以在構建過程中自動化，也可以使用GUI工具，例如livereload，codekit（僅MAC-horly）或prepros（跨平台）。保存更改時，這些工具會自動重新編譯您的SASS，刷新瀏覽器以進行即時反饋。

.css SASS編碼ESSENTER .scss

嵌套： sass允許嵌套選擇器，反映您的HTML結構。 但是，避免過度嵌套（超過四個級別），以防止過度特定的選擇器。優先考慮可重複使用的模塊化代碼。

• >>變量：

  使用
定義變量，以集中樣式設置。 這簡化了更新並保持一致性。

• $variable-name: value;函數和操作員：

• 混合素：使用>創建可重複使用的樣式塊，並將它們與

  一起包含。這對於處理供應商前綴或常見樣式模式特別有用。
>

• >>示例：sass嵌套（好與壞）@mixin mixin-name { ... }> @include mixin-name;

  好：

壞（過度嵌套）：

示例：SASS變量

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

>>示例：sass mixin（供應商前綴）

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

>

組織您的Sass Project

$site-max-width: 960px;
$font-color: #333;

body {
  color: $font-color;
}

#main {
  max-width: $site-max-width;
}

>

>使用多個文件並將其整理到文件夾中。帶有下劃線的前綴部分文件（摘要）（）。 使用>。

示例：style.scss

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

用Compass

擴展SASS >文件進行配置。 config.rb 用羅盤

指南針簡化了精靈管理。將圖像組織到文件夾中。 使用導入它們，並使用

或單個Sprite功能生成CSS類。

> @import "images/*.png";@include all-icons-sprites;>示例：指南針精靈生成

> 這將在

>文件夾中的每個圖像中生成CSS類。 >

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

結論images/icons

SASS顯著改善了CSS的工作流程。 立即開始使用它來編寫更高效，可維護和愉快的CSS。

FAQS

sass vs. scss： scss使用類似於CSS的語法（支架，半龍），而原始SASS則使用凹痕。 SCSS通常是優選的。

• >

  安裝：>使用>安裝node.js和npm。

• 編譯：>使用或自動重新編譯的選項。 npm install -g sass

• （其餘的常見問題是直接在原始文本中回答的，並且在這裡沒有重複。）

以上是薩斯開始的詳細內容。更多資訊請關注PHP中文網其他相關文章！