如何使用SASS編寫可重用的CSS

時間  2020-01-08
標籤 如何 使用 sass 編寫 重用 css 欄目 CSS 简体版
原文   原文鏈接

做者：Obinna Ekwunocss

譯者：前端小智html

來源：proqsolutions前端

點贊再看，養成習慣
css3


本文 GitHub：github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。git

Sass 是一個CSS預處理程序，至今使用普遍，它之因此流行，是由於它修復了幾個CSS缺陷：github

Sass 也是 Bootstrap 4 運行的基礎。這意味着爲了理解如何操做引導代碼而學習Sass是很是有幫助的，而不是覆蓋代碼(這是大多數開發人員的定製方法)。理解Sass能夠更好地理解源代碼級別的工具。web

當使用CSS時，咱們常常在一個全局環境設置，這樣可能會錯誤地設置元素的樣式。面試

自定義CSS(即便有CSS變量)仍然是很是冗餘的。CSS不是爲咱們今天所擁有的那種複雜的架構設計的，咱們遇到了在另外一個樣式表中導入一個樣式表的問題，這可能會致使一個很是大的樣式庫，沒有適當的文檔可能沒法理解它。npm

在本文中，咱們將重點討論爲何預處理程序很重要，並特別強調SASS及其將規則組合在一塊兒的能力。使用Sass爲設計現代web組件提供了一種更合理的方法。bootstrap

咱們還將經過演示示例來了解爲何要使用這些預處理程序，演示如何將樣式劃分爲更小的特定組件，而沒必要強迫用戶下載大量不須要的CSS文件。

安裝 sass

sass 的安裝方式有不少種，能夠查看這個地址，這裏咱們使用 npm 安裝：

npm install -g sass
複製代碼

CSS 存在哪些問題？

在則開始學習前端基礎知識時，咱們會接觸到傳統的 CSS，涉及到使用類或id之類的標識符來處理和操做HTML元素。

在使用CSS的時候，咱們常常須要修改樣式來實現預期的要求。 組織大型樣式表確實很壓力。 保持類的做用域以免意外地設置樣式有時候有的很累。

即便引入了 CSS 變量以減小聲明的重複，但使用預處理器仍能夠解決變量的一些問題。 例如：較長的變量名。

即便有了CSS3，咱們仍然須要依賴一些技巧來設計用戶界面的樣式，在編寫 HTML 時，嵌套和可視化層次結構樣式有助於理解，但這是常規 CSS 作不到。

CSS 預處理器是什麼？

能夠把預處理器看做是一個加工的機器，一端容許咱們編寫獨特的語法，另外一端，預處理器幫咱們生成對應的常規的 CSS。CSS 預處理程序一般會增長一些純CSS中不存在的特性，好比 mixin、嵌套選擇器、繼承選擇器。同時也給了咱們以結構化的方式來編寫樣式。CSS 預處理程序有 LESS, stylus, Sass, PostCSS。如前所述，本文主要關注做爲預處理器的 Sass。

SASS 仍是 SCSS ？

SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

1.文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名

2.語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

先來看一個示例：

Sass語法：

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
複製代碼

Scss語法：

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}
複製代碼

在上面的代碼示例中，咱們注意到 Sass 和 SCSS 編寫樣式的不一樣。 請注意，它們都使用$來聲明變量。

SCSS 中的概念

嵌套和做用域

當設計 HTML文件的樣式時，SCSS 使咱們可以在樣式表中擁有相同的 HTML 視覺層次結構，這樣咱們就能夠以一種更容易理解的方式來設計樣式。例如，設計這個index.html的樣式

<nav class = 'sidebar'>
  <ul>
    <li> <a> </a></li>
  </ul>
</nav>
複製代碼

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;
}
複製代碼

SCSS:

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
複製代碼

從上面的 CSS 代碼示例能夠看出，咱們可以推斷 HTML 文件的結構，同時保持實現的簡短。這樣作的另外一個好處是，它有助於避免拼寫錯誤，並且還能夠看到，咱們已經肯定了一些規則的做用域，所以這些樣式只用於nav。

後代樣式規則適用於 SCSS，例如：

.container{
  .left-area{
    ...
  }
}
複製代碼

這意味着，具備class = "left-area" 的container類的全部後代都將受到規則的影響。基本的CSS 選擇器仍然適用於 SCSS，好比：

** > 選擇器**

.container{
  > .left-area{
   ...
 }
}
複製代碼

如今，只有類爲container的直接子類纔會得到樣式。

css 中「>」是 css3 中特有的選擇器**，A > B** 表示選擇 A 元素的全部子B元素，與A B不一樣的是，A B 選擇全部後代元素，爲A > B只選擇一代。

父選擇器(&)

若是咱們想經過添加一個類來修改一個類，咱們可使用父選擇器，它主要用於添加輔助樣式改變元素樣式的狀況，這也會起到修飾符的做用，& 在 scss中表示自身的意思。

.container{
  &.right-area{
   background-color : #0000
 }
}
複製代碼

上述代碼等同於

.container.right-area {
  background-color : #0000
}
複製代碼

咱們還可使用父選擇器將角色限定在另外一個類中，就像這樣

在代碼示例中，因爲父選擇器的緣由，color:#fff只適用於.theme-dark類。

變量

一般，在 CSS 中，咱們經過使用@import將不一樣的樣式表連接到主 CSS 中，這意味着必須下載額外的CSS文件。

若是有一種方法可使用 SCSS 將全部這些輸入解析爲一個 CSS 文件，該怎麼辦。 CSS 中變量的概念來自 JS 方法。

請注意，SCSS中的@import用於將部份內容獲取到其餘SCSS文件中，但它們不會成爲 CSS 文件，名稱前用_表示。

使用 scss 變量

SCSS中的變量以美圓符號$開頭。

$color: #f002
.color{
  $text_color: #ddd;
  background-color: $color;
  color: $text_color;
  text-shadow:0 0 2px darken($text_color, 40%);
}
複製代碼

從上面的代碼中，咱們注意到$text_color只能在代碼塊內訪問。

Mixins

SCSS 的另外一個了不得的特性是它可以將可重用的樣式打包在一塊兒，並容許根據須要將樣式導入到另外一個樣式塊中，從而減小代碼中的冗餘。

聲明

建立mixin很是簡單，只需在樣式塊以前添加@mixin和mixin名稱，以下所示

@mixin {insert name} {
     //write CSS code here
}
複製代碼

示例：

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}
複製代碼

因爲歷史緣由，連字符和下劃線被認爲是相同的，也就是說@mixin mixin-name { } 和 @mixin mixin_name { } 是同樣的。

用法

要在代碼塊中使用mixin，咱們必須使用@include，而後接mixin的名稱。

.button-green {  
    @include button;  
    background-color: green;  
}
複製代碼

這裏經過@include調用我以前建立名爲button的mixin模塊，那麼解析後的CSS就以下所示：

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background-color: green;  
}
複製代碼

使用mixin的另外一種方法是使用參數，就像 JS 中的函數同樣，咱們能夠聲明一個全局變量並將其設置爲mixin的一個參數，這裏更新了上面的button模塊，增長了名爲background的參數並將其傳遞給模塊。

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}
複製代碼

注意到參數被設置爲一個變量併成爲backround屬性的值。若是咱們想建立一個綠色的按鈕，那麼就可使用如下代碼：

.button-green {  
    @include button(green);  
}
複製代碼

你可能會好奇若是在定義mixin時定義了參數，可是在@include調用時沒有傳遞參數會發生什麼。這種狀況下你會收到一個編譯錯誤的提示。同時我相信這種狀況必定不是你想看到的。你能夠經過在mixin中定義參數的時候給它設置一個默認值，從而來避免這種錯誤。

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}
複製代碼

如今若是你在調用的時候忘記傳遞參數值:

.button-green {  
  @include button;  
}
複製代碼

你的代碼將會使用你設置的參數默認值來解析，在這個例子中也就是green這個值。

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}
複製代碼

函數

SCSS 中的函數是 SASS 功能的重要組成部分，它們容許咱們定義可在整個樣式表中重用的複雜操做。有不少內置的 Sass 函數可供咱們使用，查看文檔瞭解更多信息。

這裏列出了一些經常使用的函數：

咱們也能夠定義本身的 Sass 函數，要實現函數的聲明和返回內容咱們須要使用function和return兩個指令，相似於其餘語言中的關鍵字。

@function 函數名(形參) {
  @return;
}
複製代碼

使用時時直接使用 函數名便可:

@function getWidth($w) {
  @return $w * 2;
}

.main{
  max-width: #{getWidth(20)}px;
}
複製代碼

編譯後:

.main {
  max-width: 40px;
}
複製代碼

具備控制流的條件樣式

if()

if() 是 Sass 的一個內建函數，與之類似的 @if 則是一個內建指令。if() 用來作條件判斷並返回特定值，示例以下：

@mixin test($condition) { 
  $color: if($condition, blue, red); 
  color:$color 
}
  
.firstClass { 
  @include test(true); 
} 
 
.secondClass { 
  @include test(false); 
}
複製代碼

編譯結果：

.firstClass {
  color: blue; 
} 
.secondClass { 
  color: red; 
}
複製代碼

在上例中，if() 函數內的三個參數分別表明：測試條件，測試成功返回值，測試失敗返回值（除了 false 和 null 以外的全部測試條件都被視爲測試成功）。若是使用數字做爲上述示例的條件，一樣會返回測試成功的值：

.firstClass { 
  @include test(1); 
}
複製代碼

@if

@if 後跟一個表達式，若是表達式的結果爲 true，則返回特定的樣式，示例以下：

@mixin txt($weight) { 
  color: white; 
  @if $weight == bold { font-weight: bold;} 
} 

.txt1 { 
  @include txt(none); 
} 

.txt2 { 
  @include txt(bold); 
}
複製代碼

編譯結果：

.txt1 { 
  color: white; 
} 
.txt2 { 
  color: white; 
  font-weight: bold; 
}
複製代碼

@for

@for 指令經常使用於循環輸出。@for 有兩種使用方式：from start through end 和 from start to end，二者的區別在於，前者遍歷的範圍是 [start, end], 然後者的遍歷範圍是 [start, end-1]。在 @for 循環中使用一個固定變量來替代遍歷到的元素。若是你想實現從大到小的遍歷，只需讓 start 大於 end 便可。下面是 @for 的一個簡單示例：

@for $i from 1 through 4 { 
  .col-#{$i} { 
    width: 100/4 * $i + %;
  } 
}
複製代碼

使用上面的這個例子，咱們能夠建立一套簡單的柵格系統，編譯結果以下:

.col-1 { 
  width: 25%; 
} 
.col-2 { 
  width: 50%; 
} 
.col-3 { 
  width: 75%; 
} 
.col-4 { 
  width: 100%; 
}
複製代碼

總結

在本文中，咱們試圖瞭解使用SCSS編寫功能CSS的基本知識，而且還大體瞭解了一些Sass/SCSS原理。 我但願咱們將這些實踐用於爲咱們的應用程序編寫更輕鬆，更優化的樣式。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：www.proqsolutions.com/creating-re…

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。

clipboard.png
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程