使用Sass的方法是什么

這篇文章主要介紹了使用Sass的方法是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

對于一個網頁設計的新手來說，可能聽說過“Sass”這個詞。但卻不確定Sass的作用以及是否可以使用它，

簡而言之，Sass是一個CSS預處理器，它將特殊功能（如變量，嵌套規則和mixins（有時稱為語法糖））添加到常規CSS中。目的是使編碼過程更簡單，更有效。讓我們更詳細地探討一下。

什么是CSS預處理器？

CSS預處理器是一種腳本語言，它通過允許開發人員用一種語言編寫代碼然后將其編譯成CSS來擴展CSS。Sass可能是最受歡迎的預處理器，但其他常見的例子包括Less和Stylus。

什么是SASS？

Sass（Syntactically Awesome Style Sheets）是CSS的擴展，使您可以使用變量，嵌套規則，內聯導入等內容。它還有助于保持組織有序，并允許您更快地創建樣式表。

Sass與所有版本的CSS兼容。使用它的唯一要求是必須安裝Ruby。

如何使用Sass？

句法：

Sass包含兩個語法選項：

1、SCSS (Sassy CSS)：使用.scss文件擴展名，完全符合CSS語法

2、Indented (簡單地稱為 'Sass')：使用.sass文件擴展名和縮進而不是括號; 它不完全符合CSS語法，但編寫起來更快

請注意，可以使用sass-convert命令將文件從一種語法轉換為另一種語法。

變量

與其他編程語言一樣，Sass允許使用可存儲可在整個樣式表中使用的信息的變量。例如，您可以將顏色值存儲在文件頂部的變量中，然后在設置元素的顏色時使用此變量。這使您可以快速更改顏色，而無需單獨修改每一行。

例如：

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

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

將生成以下CSS：

body {
  font: 100% Helvetica, sans-serif;
  color: red;
}

嵌套

嵌套是一把雙刃劍。雖然它提供了一種減少需要編寫的代碼量的絕佳方法，但如果不仔細執行，它也會導致過度限定的CSS。我們的想法是以一種模仿HTML層次結構的方式嵌套CSS選擇器。

以下顯示了使用嵌套的基本導航樣式：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }}

CSS輸出如下：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

Partials是較小的Sass文件，可以導入到其他Sass文件中。將partials視為代碼片段。使用這些代碼片段，我們的CSS現在可以模塊化并且更易于維護。部分通過使用前導下劃線命名為_partial.scss來指定。

導入（Import）

使用局部模板，在@import指令，可以導入你的部分文件到當前文件，建立一個單一的CSS文件。請注意將為每個導入生成的HTTP請求使用的導入數量。

// _reset.scss

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

// basefile.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

相應的CSS輸出：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

注意：導入partials時，您不需要包含文件擴展名或下劃線。

mixins

使用預處理器的一個優點是能夠采用復雜，冗長的代碼并簡化它。這就是mixins派上用場的地方！

例如，如果您需要包含供應商前綴，則可以使用mixin。看一下border-radius的這個例子：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.box { 
    @include border-radius(10px); 
}

注意頂部的@mixin指令。它的名稱為border-radius，并使用變量$ radius作為參數。此變量用于設置每個元素的半徑值。

稍后，調用@include指令以及mixin名稱（border-radius）和參數（10px）。因此.box {@include border-radius（10px）; }。

生成以下CSS：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

擴展/繼承

該@extend指令被稱為是Sass的最強大的功能之一。看到它在行動后，很明顯為什么。

我們的想法是，使用此指令，您不必在HTML元素上包含多個類名，并且可以保持代碼干燥。您的選擇器可以繼承其他選擇器的樣式，然后在需要時輕松擴展。現在這很強大。

Sass的優點：

能夠在CSS中執行計算，允許我們執行更多的操作，例如將像素值轉換為百分比。我們還可以訪問標準數學函數，如加法，減法，乘法和除法。當然，可以組合這些功能來創建復雜的計算。

此外，Sass還包含一些內置函數來幫助操作數字。像percentage（），floor（）和round（）這樣的函數就是一些例子。

感謝你能夠認真閱讀完這篇文章，希望小編分享使用Sass的方法是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!