卡卡網(wǎng)

CSS是一種樣式表語言，網(wǎng)頁設計師使用CSS以減少設置頁面樣式所需的重復編碼量。SCSS是 Sassy CSS 的縮寫，是CSS 預處理器 Syntactically Awesome Style Sheets (Sass)可用的兩種語法之一。用 SCSS 編寫的文件以 .scss 擴展名保存。今天要說的是SCSS與CSS的幾大區(qū)別及優(yōu)點。

1、SCSS可以聲明變量

下面的CSS代碼：

body {
  background: #6fda44;
  color: #ffffff;
}

.navbar {
  font: Neuemontreal, sans-serif;
  color: #ffffff;
 font-weight: 600;
}

可以使用SCSS，聲明變量，寫出相同的樣式：

$background-color: #6fda44;
$text-color: #ffffff;
$neufont: Neuemontreal, sans-serif;
$font-weights: (
  "regular": 300,
  "bold": 600,
  "large": 800
);

body {
  background: $background-color;
  color: $text-color;
}

.navbar{
  font: $neufont;
  color: $text-color;
  font-weight: map-get($font-weights, bold);
}

該SCSS定義了4個變量：$background-color、$text-color、$neufont、$font-weights，這些變量可以在后面的代碼編寫中直接引用，這給代碼維護帶來了極大的方便。

2、SCSS支持函數(shù)

SCSS支持函數(shù)，它可以接受參數(shù)和返回值。

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

pow(arg1, arg2)是一個函數(shù)，$base和$exponent是兩個傳入的參數(shù)，而函數(shù)里的$result是一個返回值。

3、SCSS支持混合

SCSS支持混合，它可以用來定義樣式表中要重用的樣式。

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

4、SCSS支持嵌套

SCSS允許你以與HTML相同的方式嵌套CSS選擇器，如：

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

請注意，在 SCSS 中，ul、 li和a選擇器嵌套在nav選擇器中。

而在 CSS 中，規(guī)則是一條一條定義的（不是嵌套的）：

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

因為可以在 SCSS 中嵌套屬性，所以它比標準 CSS 更清晰、更易于閱讀。

SCSS的優(yōu)勢

SCSS這樣的特性使得以后更新樣式變得更容易，因為我們只需要更改一個地方的代碼來實現(xiàn)樣式更改。通過這種方式，像 Sass 這樣的預處理器通過減少 CSS 中的重復任務來幫助我們節(jié)省時間。

SCSS 是如何工作的？

SCSS 不能直接放到HTML文檔里使用，SCSS 只是 CSS 預處理器 Sass 可用的兩種語法之一。與任何預處理器一樣，Sass 的工作原理是將其編譯為可在任何瀏覽器上運行的本機 CSS 代碼。

當開發(fā)人員可以編寫簡潔的 SCSS 代碼并編譯成更長的 CSS 代碼時，真正節(jié)省時間的魔力就會在開發(fā)人員端發(fā)揮作用。通過這種方式，SCSS 使開發(fā)人員能夠事半功倍，而不會影響與 Web 的兼容性。

如何將 SCSS 編譯成 CSS

開始使用 SCSS 的最簡單方法是使用你喜歡的代碼編輯器下載 Sass 編譯器插件。你的 SCSS 將在你編寫代碼時被編譯成 CSS。例如，Visual Studio 有一個名為Live Sass Compiler 的插件，它會在每次保存時將你寫入 .scss 文件的任何內(nèi)容編譯成相應的同名 .css 文件中的 vanilla CSS。

你也可以用在線工具，如SCSS編譯為CSS最好用的在線工具，把SCSS代碼編譯成CSS代碼，然后放在HTML代碼里使用。

相關文章

• 純CSS創(chuàng)建圓形旋轉(zhuǎn)圖像滑塊(輪播)【演示/代碼下載】
• CSS 3D 隨機立方體滑塊【演示/代碼下載】
• CSS 3D立方滑塊，垂直和水平無限循環(huán)滾動
• CSS 3D滑塊動畫效果(水平或垂直方向無限循環(huán)滾動)
• 一組精致好看的CSS表單樣式：checkbox、radio、text等
• 純CSS+SVG創(chuàng)建有趣的動畫復選框checkbox
• 一個具有鼠標懸停動畫效果的SVG復選框checkbox
• 8款SVG創(chuàng)建的動畫checkbox多選框和radio單選框
• CSS示例：漂亮的切換開關（toggle switches）樣式
• 純CSS：兩個非常漂亮的checkbox和radio按鈕樣式

標簽: SCSS  css