自動 foo mes ogl width small 封裝 編程 :after

CSS 預編譯語言概述

CSS 作為一門樣式語言，語法簡單，易於上手，但是由於不具備常規編程語言提供的變量、函數、繼承等機制，因此很容易寫出大量沒有邏輯、難以復用和擴展的代碼，在日常開發使用中，如果沒有完善的編碼規範，編寫的 CSS 代碼會非常冗余且難以維護。

為了解決上述問題，出現了很多 CSS 預編譯語言，CSS 預編譯語言是基於 CSS 語言的語法擴展，除了能解決上述缺乏語言特性帶來的問題之外，還支持嵌套書寫，減少重復輸入父級選擇器（可理解為 CSS 中的繼承機制），提高了代碼的可讀性和編寫效率，常見的預編譯語言有 Less、Sass 等。

Sass 與 Less 等其它預編譯語言不存在優劣之分，一般來說，Sass 的功能更加強大或者說 Sass 的語言層面更接近於一門完整的編程語言，而 Less 則更接近於 CSS 語法，所以我們在 Vue 中通常會使用 Sass 編寫樣式代碼（參考我們在 API 項目教程中的配置 JavaScript 和 Sass 這篇教程），Laravel 默認提供的樣式代碼也是 scss

結尾的，也是使用的 Sass 語言。所以我們來了解下 Sass 的安裝和使用，非常簡單，即學即用。

Sass 簡介和安裝

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。它允許你使用變量、嵌套規則、混合、導入等眾多功能，並且完全兼容 CSS 語法。

Sass 具有兩種不同的後綴名分別對應兩套語法，最早 Sass 使用的是縮進式語法，使用縮進來區分代碼塊，並通過分號將具體樣式分開，這種語法以 .sass 作為後綴；另一種使用了和 CSS 一樣的塊語法，這種語法以 .scss 作為後綴。後者更加兼容原生 CSS 語法，所以我們通常使用後者，接下來的教程我們也使用這種語法。

編寫好 Sass 文件後，需要將其編譯為 CSS 文件才能在項目中使用，為此我們需要安裝相應的編譯工具，Sass 官方解釋器通過 Ruby 編寫，同時也有其他語言實現的版本，最常見的就是 C 語言實現的 libSass，NPM 擴展包 node-sass

就封裝了對 libSass 的實現，所以我們可以通過安裝這個前端擴展包來編譯 Sass 文件，不過在 Laravel 項目中，開箱提供了 Laravel Mix 進行前端資源的編譯，當我們通過 npm install 安裝 laravel-mix 的過程中，系統會自動安裝 laravel-mix 聲明的依賴，其中就包括了編譯 Sass 所需要的 node-sass，我們無需再額外安裝這個擴展包，這些事情 Laravel Mix 在底層默默幫我們完成了。

Sass 使用語法

Sass 提供了變量、嵌套、混合、導入、循環等功能，不過作為有其他編程語言功底的我們來說，學習起來非常簡單，花個一個小時就熟悉了，下面我們逐一來介紹這些功能。

變量

和 PHP 一樣，Sass 的變量通過 $ 作為標識符，Sass 支持的數據結構包括數字、字符串、數組、顏色、布爾值、null、List、Map、函數引用（如果你不了解 Python 或 Java 這類編程語言，也不熟悉 Redis 中的數據結構，可以將 List 理解為 PHP 中未指定鍵名的索引數組，將 Map 理解為以字符串作為鍵名的關聯數組）：

// 簡單變量
$primary-color: #333;

// 引用變量
body {
    color: $primary-color;
}

// List
$font-stack: (‘Helvetica‘, ‘Arial‘, sans-serif);

body {
    font: 100% nth($font-stack, 1);  // 獲取 List 的值，索引從1開始，不是0！
}

// Map
$breakpoints: (
    small: 767px,
    medium: 992px,
    large: 1200px
);

// 變量作為插入變量需要通過 #{} 引入，通過 map_get 函數從 Map 中獲取值
@media (min-width: #{map-get($breakpoints, small)}) {

}

$name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: #44b336; }

有兩個需要註意的地方，和一般編程語言數組或列表索引從 0 開始不同，Sass 中的 List 索引從 1 開始；另外，變量作為插入變量，即作為選擇器或屬性名的時候需要用 #{} 引入，PHP也有類似概念，只不過是通過 {} 引入的。

嵌套

Sass 的嵌套語法也很實用，在此之前，我們只能通過多個 CSS 樣式定義來解決嵌套問題：

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

  li { display: inline-block; }

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

相信我不用過多解釋，你也能理解這段代碼的含義，以及在樣式代碼編寫過程中，帶來的效率提升。

混合（Mixin）

有的時候，我們可能有一段 CSS 樣式代碼需要在多個地方使用，這可以通過 Sass 提供的混合（Mixin）功能來實現，定義混合代碼的時候需要在選擇器前面加上 @mixin 標識，引用混合代碼的時候需要通過 @include 來引入：

// 清除浮動
@mixin clearfix {
    zoom: 1;
    &:before,
    &:after { content: ""; display: table; }
    &:after {
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
    }
}

div { @include clearfix; }   // 使用 mixin

函數

函數和混合有點類似，不過函數更加強大，可以傳入參數並實現運算功能，函數通過 @function 標識聲明，函數名允許出現短劃線 -，函數體內可以使用在函數聲明之前定義的所有變量，同時計算時會帶上變量聲明時的單位：

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

使用函數時直接調用函數即可：

#sidebar { width: grid-width(5); }

控制結構

與 Blade 模板類似，Sass 為控制結構提供了各種指令，如 @if、@else、@for、@each、@while 等：

$type:sass;
// 條件判斷，根據不同條件定義不同的樣式
p {
    @if $type == less {
        color: green;
    } @else if $type == sass {
        color: red;
    } @else {
        color: black;
    }
}

// 循環，定義多個樣式
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

// 遍歷，類似 foreach，也是定義多個樣式，用於遍歷 Map 結構
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
        font-size: $size
    }
}

需要註意的是 @for $i from start through end 還可以改寫成 @for $i from start to end，不同之處在於前者包括 end，後者不包括，另外如果要實現逆序的話，可以將 start 和 end 的值倒過來。

導入

Sass 支持通過 @import 指令導入其它 Sass 文件，既可以導入本地開發文件，也可以導入前端依賴庫中的文件，還可以導入網絡字體文件，以 Laravel 自帶的 resources/sass/app.scss 為例：

// Fonts
@import url(‘https://fonts.googleapis.com/css?family=Nunito‘);

// Variables
@import ‘variables‘;

// Bootstrap
@import ‘~bootstrap/scss/bootstrap‘;

在導入 Sass 文件的時候，可以省略文件後綴。

繼承

Sass 還支持樣式繼承，我們通過 % 前綴指定用於繼承的樣式，然後在需要繼承的地方提供 @extend 指令繼承相應的父類樣式：

// 以%開頭的父類不會渲染
%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.message {
    @extend %message-shared;
}

.success {
    @extend %message-shared;
    border-color: green;
}

.error {
    @extend %message-shared;
    border-color: red;
}

.warning {
    @extend %message-shared;
    border-color: yellow;
}

操作符

和其他常規編程語言一樣，Sass 支持對變量進行+、-、*、/、%操作。

結語

好了，通過以上語法的介紹相信你已經具備了編寫 Sass 樣式文件的能力，在基於 Laravel + Vue.js 驅動的項目中，我們通常會在兩個地方編寫樣式代碼，一個是 resources/sass
目錄下獨立的 .scss 文件，另一個是 Vue 組件中的 <style lang="scss"></style> 中，我們在屬性中設置 lang="scss" 表示這裏面是 Sass 代碼，需要 Laravel Mix 編譯的時候將其編譯到指定的 CSS 文件中。

聲明：本教程只是 Sass 快速入門教程，不代表 Sass 的全部功能特性，更多語法請參考官方文檔。

laravel 中CSS 預編譯語言 Sass 快速入門教程