卡卡網(wǎng)

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

1、SCSS可以聲明變量

下面的CSS代碼：

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

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

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

$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個(gè)變量：$background-color、$text-color、$neufont、$font-weights，這些變量可以在后面的代碼編寫(xiě)中直接引用，這給代碼維護(hù)帶來(lái)了極大的方便。

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)是一個(gè)函數(shù)，$base和$exponent是兩個(gè)傳入的參數(shù)，而函數(shù)里的$result是一個(gè)返回值。

3、SCSS支持混合

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

@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;
  }
}

請(qǐng)注意，在 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;
}

因?yàn)榭梢栽?SCSS 中嵌套屬性，所以它比標(biāo)準(zhǔn) CSS 更清晰、更易于閱讀。

SCSS的優(yōu)勢(shì)

SCSS這樣的特性使得以后更新樣式變得更容易，因?yàn)槲覀冎恍枰囊粋€(gè)地方的代碼來(lái)實(shí)現(xiàn)樣式更改。通過(guò)這種方式，像 Sass 這樣的預(yù)處理器通過(guò)減少 CSS 中的重復(fù)任務(wù)來(lái)幫助我們節(jié)省時(shí)間。

SCSS 是如何工作的？

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

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

如何將 SCSS 編譯成 CSS

開(kāi)始使用 SCSS 的最簡(jiǎn)單方法是使用你喜歡的代碼編輯器下載 Sass 編譯器插件。你的 SCSS 將在你編寫(xiě)代碼時(shí)被編譯成 CSS。例如，Visual Studio 有一個(gè)名為L(zhǎng)ive Sass Compiler 的插件，它會(huì)在每次保存時(shí)將你寫(xiě)入 .scss 文件的任何內(nèi)容編譯成相應(yīng)的同名 .css 文件中的 vanilla CSS。

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

相關(guān)文章

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

標(biāo)簽: SCSS  css