Less與sass

時間  2019-12-10
標籤 sass 简体版
原文   原文鏈接

@(less與sass)[less, sass]css

[TOC]html

Less與sass

Less的概念：

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
複製代碼

Less 能夠運行在 Node 或瀏覽器端。web

使用方法：

這裏直接使用VSCode編輯工具，裏面的插件  easy-less，建立一個.less文件，會自動轉化爲.css文件
複製代碼

基於Node數組

語言特性

變量

咱們使用@符號來定義變量，而後再在css代碼中使用，例如：瀏覽器

@color:red;

body {
	background:@color;
}
複製代碼

有的時候，咱們須要使用同一個顏色，數據的次數特別多，因此，定義變量可讓咱們們使用的更流暢。這是一種很經常使用的方式。可是咱們不只僅能夠定義一個變量值，還能夠用在其餘的地方，好比說選擇器,，路徑等：sass

選擇器：bash

// 變量
@mySelector: banner;

// 用法
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
複製代碼

URL：less

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
複製代碼

混合

混合就是一種將一系列屬性從一個規則集引入(「混合」)到另外一個規則集的方式.假設咱們有一個樣式是這樣的ide

.a, #b {
  color: red;
}
複製代碼

若是咱們想要在其餘的地方使用這個樣式，那就可使用混合：函數

.mixin-class {
  .a;
}
.mixin-id {
  #b();
}
複製代碼

這裏不管是使用類（class）名仍是使用id名字都是能夠的。還有就是，調用混合集的時候，加不加括號都是能夠的。

但是，在上面的例子中，.a與#b名字的元素的樣式也會發生改變，若是你不想實現這個效果，那麼能夠在兩個混合集後面添加上一個括號。例如：

.a(){
	color: red;
}
複製代碼

在調用的混合集後面追加 !important 關鍵字，可使混合集裏面的全部屬性都繼承 !important：

例如：

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}
複製代碼

結果爲：

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}
複製代碼

帶參數的混合

混合集也能夠接收參數，在調用的時候傳遞參數便可： 例如：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
複製代碼

調用：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
複製代碼

固然，上面的調用是須要傳遞參數的（因此須要加括號）若是你不想傳遞參數，能夠給混合集一個默認的參數（變量:參數）例如：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
複製代碼

這樣，調用的時候就不須要傳遞參數，因此也不用加括號：

#header {
  .border-radius;
}
複製代碼

也許，你可能須要傳遞多個參數：

.mixin(@color; @padding; @margin: 2) {
  color: @color;
  padding: @padding; 
  margin: @margin @margin @margin @margin;
}
複製代碼

參數之間用分號給開就能夠了，傳遞參數的時候沒必要按照上面的順序。具備特殊意義的值能夠直接傳遞值，例如：

#box {
	.mixin(@padding:10px;red;)
}
複製代碼

具備默認值得屬性能夠不用傳遞參數

或許有時候你會遇到這樣的狀況：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @x @y @blur @color;
     -moz-box-shadow: @x @y @blur @color;
          box-shadow: @x @y @blur @color;
}
複製代碼

若是每一次都是這樣的寫，下面的屬性重複太多，因此，這個時候，你可能須要使用到**@arguments**，接着就是這樣使用：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
複製代碼

還能夠做爲函數使用混合，從mixin中返回變量

全部定義在一個mixin中的變量都是可見的，還能夠用於調用它的做用域中（除非調用它的做用域定義了同名變量）。

示例：

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}
複製代碼

輸出：

.caller {
  width:  100%;
  height: 200px;
}
複製代碼

嵌套規則

若是咱們有這樣的一段樣式：

#header {
	color:red;
}
#header a {
	border: 1px solid lime;
}
#border a:hover {
	color: yellow;
}
複製代碼

那麼在使用less的時候，咱們就能夠這麼來寫：

#header {
	color:red;

    a {
        border: 1px solid lime;

        &:hover {
        	color:yellow;
        }
    }
}
複製代碼

看到上面的 & 符號了麼?這個符號表明全部的父選擇器（而不僅是最近的長輩）。通常的話是用在僞元素以及僞類的時候較多，固然，也能夠用來改變選擇器的順序，例如：

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}
複製代碼

輸出：

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}
複製代碼

運算

任何數值，顏色和變量均可以進行運算。

@h:100px;
#box {
	width:100px + 20px;
	height:@h - 20px;
}
複製代碼

在上面的例子中，咱們能夠看到，width與height的值就是使用的了運算。這裏還要說的一點就是，在運算的幾個數中，只有一個有單位便可。

導入樣式

在其餘的樣式中導入less，與css相同，直接使用import '文件名'便可。例如：

@import "library"; // library.less
@import "typo.css";
複製代碼

對於 less而言，其擴展名無關緊要

其餘

有時候你所寫的東西可能被翻譯，例如：

color:rgb(222,222,111);
width:calc(100% - 100px);
複製代碼

上面的都會被計算，被less編譯，此時若是不想要他們被編譯，則使用~，例如：

color:~ 'rgb(222,222,111)';
width:~ 'calc(100% - 100px)';
複製代碼

前面一個~，後面的內容用引號引發來

less中的函數這裏不作講解，由於使用不到，若是想要了解，查看官網 www.css88.com/doc/less/fu…

Sass

Sass的概念

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目。
複製代碼

Sass的特點

1. 徹底兼容 CSS3
2. 在 CSS 基礎上增長變量、嵌套 (nesting)、混合 (mixins) 等功能
3. 經過函數進行顏色值與屬性值的運算
4. 提供控制指令 (control directives)等高級功能
5. 自定義輸出格式
複製代碼

Sass的語法格式

Sass 有兩種語法格式。

首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行拓展，全部 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特點功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 做爲拓展名。
	另外一種也是最先的 Sass 語法格式，被稱爲縮進格式 (Indented Sass) 一般簡稱 "Sass"，是一種簡化格式。它使用 「縮進」 代替 「花括號」 表示屬性屬於某個選擇器，用 「換行」 代替 「分號」 分隔屬性，不少人認爲這樣作比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可使用 Sass 的所有功能，只是與 SCSS 相比個別地方採起了不一樣的表達方式，具體請查看 the indented syntax reference。這種格式以 .sass 做爲拓展名。
複製代碼

咱們上課使用.scss的格式

Sass的使用

這裏咱們依然使用VScode自帶的編譯工具來進行Sass代碼的學習

Sass的語法

嵌套規則

Sass的嵌套規則與Less的嵌套規則類似，容許將一套 CSS 樣式嵌套進另外一套樣式中，內層的樣式將它外層的選擇器做爲父選擇器，例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
}
複製代碼

編譯爲：

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}
複製代碼

父選擇器

與Less一致，咱們使用&表示一個元素前面的全部子元素，例如：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
複製代碼

編譯爲：

#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red;
}
複製代碼

屬性嵌套

有些 CSS 屬性遵循相同的命名空間 (namespace)，好比 font-family, font-size, font-weight 都以 font 做爲屬性的命名空間。爲了便於管理這樣的屬性，同時也爲了不了重複輸入，Sass 容許將屬性嵌套在命名空間中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
複製代碼

編譯爲：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}
複製代碼

命名空間也能夠包含本身的屬性值。（意思就是上面的font後面能夠設置樣式），例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
複製代碼

編譯爲：

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold;
}
複製代碼

SassScript

變量$

Sass中也有變量，不過他的變量與Less的變量不一樣，他的符號是美圓符$，其使用方法與Less的使用方法基本一致，不過仍是有一些不一樣點：

  1. 變量支持塊級做用域，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換爲全局變量能夠添加 !global 聲明：
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
複製代碼

此時的$width在任何的地方（除了父級）均可以調用。

數據類型

SassScript 支持一下幾種主要的數據類型：

  1. 數字，1, 2, 13, 10px
  2. 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
  3. 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
  4. 布爾型，true, false
  5. 空值，null
  6. 數組 (list)，用空格或逗號做分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  7. maps, 至關於 JavaScript 的 object，(key1: value1, key2: value2)

運算

全部數據類型均支持相等運算== 或 !=，此外，每種數據類型也有其各自支持的運算方式。

數字運算

SassScript支持數字的加減乘除，取整運算（+，-，*，/，%），也支持關係運算（>，<，>=，<=，==，=） 這裏須要注意一下除法運算，只有如下三種狀況/框被視爲除法運算：

1 若是值，或值的一部分，是變量或者函數的返回值
2 若是值被圓括號包裹
3 若是值是算數表達式的一部分
複製代碼

例如：

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2px;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
複製代碼

編譯爲：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}
複製代碼

若是須要使用變量，同時又要確保/ 不作除法運算而是完整地編譯到 CSS 文件中，只須要用 #{} 插值語句將變量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
複製代碼

編譯爲：

p {
  font: 12px/30px;
}
複製代碼

顏色計算

顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值：

p {
  color: #010203 + #040506;
}
複製代碼

計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，而後編譯爲

p {
  color: #050709;
}
複製代碼

意義不大，不作過多說明

字符串運算

+可用於鏈接字符串

p {
  cursor: e + -resize;
}
複製代碼

編譯爲

p {
  cursor: e-resize;
}
複製代碼

注意，若是有引號字符串（位於 + 左側）鏈接無引號字符串，運算結果是有引號的，相反，無引號字符串（位於 + 左側）鏈接有引號字符串，運算結果則沒有引號。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
複製代碼

編譯爲

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}
複製代碼

運算表達式與其餘值連用時，用空格作鏈接符：

p {
  margin: 3px + 4px auto;
}
複製代碼

編譯爲

p {
  margin: 7px auto;
}
複製代碼

在有引號的文本字符串中使用 #{} 插值語句能夠添加動態的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}
複製代碼

編譯爲

p:before {
  content: "I ate 15 pies!";
}
複製代碼

空的值被視做插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
複製代碼

編譯爲

p:before {
  content: "I ate pies!";
}
複製代碼

圓括號

使用圓括號能夠提高運算的順序

插值語句#{}

經過 #{} 插值語句能夠在選擇器或屬性名中使用變量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
複製代碼

編譯爲

p.foo {
  border-color: blue;
}
複製代碼

#{}插值語句也能夠在屬性值中插入 SassScript，大多數狀況下，這樣可能還不如使用變量方便，可是使用 #{} 能夠避免 Sass 運行運算表達式，直接編譯 CSS。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
複製代碼

編譯爲

p {
  font: 12px/30px;
}
複製代碼

變量定義!default

能夠在變量的結尾添加 !default 給一個未經過 !default 聲明賦值的變量賦值，此時，若是變量已經被賦值，不會再被從新賦值，可是若是變量尚未被賦值，則會被賦予新的值。 content: "First content";content: "Second content?" !default; $new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
複製代碼

編譯爲

#main {
  content: "First content";
  new-content: "First time reference";
}
複製代碼

變量是 null 空值時將視爲未被 !default 賦值。

$content: null;
$content: "Non-null content" !default;
#main {
  content: $content;
}
複製代碼

編譯爲

#main {
  content: "Non-null content";
}
複製代碼

@-Rules與指令

@import

這個與Less幾乎無異，都是能夠導入scss與sass格式的文件。若是擴展名字是這個，能夠省略。可是一下的幾種是不會被編譯的：

文件拓展名是 .css；
文件名以 http:// 開頭；
文件名是 url()；
@import 包含 media queries。
複製代碼

例如：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
複製代碼

編譯爲

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
複製代碼

大多數狀況下，通常在文件的最外層（不在嵌套規則內）使用 @import，其實，也能夠將 @import 嵌套進 CSS 樣式或者 @media 中，與平時的用法效果相同，只是這樣導入的樣式只能出如今嵌套的層中。

假設 example.scss 文件包含如下樣式：

.example {
  color: red;
}
複製代碼

而後導入到 #main 樣式內

#main {
  @import "example";
}
複製代碼

將會被編譯爲

#main .example {
  color: red;
}
複製代碼

@media

Sass 中 @media 指令與 CSS 中用法同樣，只是增長了一點額外的功能：容許其在 CSS 規則中嵌套。若是@media嵌套在 CSS 規則內，編譯時，@media將被編譯到文件的最外層，包含嵌套的父選擇器。這個功能讓 @media 用起來更方便，不須要重複使用選擇器，也不會打亂 CSS 的書寫流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
複製代碼

編譯爲

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px;
   }
}
複製代碼

@media 的 queries 容許互相嵌套使用，編譯時，Sass 自動添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
複製代碼

編譯爲

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}
複製代碼

@media 甚至可使用 SassScript（好比變量，函數，以及運算符）代替條件的名稱或者值：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
複製代碼

編譯爲

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}
複製代碼

@extend

在設計網頁的時候經常遇到這種狀況：一個元素使用的樣式與另外一個元素徹底相同，但又添加了額外的樣式。一般會在 HTML 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。假設如今要設計一個普通錯誤樣式與一個嚴重錯誤樣式，通常會這樣寫：

<div class="error seriousError">
  Oh no! You've been hacked! </div> 複製代碼

樣式以下

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
複製代碼

麻煩的是，這樣作必須時刻記住使用.seriousError時須要參考 .error的樣式，帶來了不少不變：好比加劇維護負擔，致使 bug，或者給 HTML 添加無語意的樣式。使用@extend 能夠避免上述狀況，告訴 Sass 將一個選擇器下的全部樣式繼承給另外一個選擇器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
複製代碼

編譯後：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}
複製代碼

上面代碼的意思是將 .error 下的全部樣式繼承給.seriousError，border-width: 3px; 是單獨給.seriousError設定特殊樣式，這樣，使用 .seriousError的地方能夠再也不使用.error。

@extend的做用是將重複使用的樣式 (.error) 延伸 (extend) 給須要包含這個樣式的特殊樣式（.seriousError）。看看下面的例子：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
複製代碼

編譯爲：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.error.intrusion, .intrusion.seriousError {
  background-image: url("/image/hacked.png");
}

.seriousError {
  border-width: 3px;
}
複製代碼

固然，還有許多高級的使用方法，好比延伸，多重延伸，繼續延伸： 延伸：Class 選擇器並非惟一能夠被延伸 (extend) 的，Sass 容許延伸任何定義給單個元素的選擇器，好比 .special.cool，a:hover或者 a.user[href^="http://"]等

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
複製代碼

與

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
複製代碼

都是能夠被編譯的。 多重延伸，同一個選擇器能夠延伸給多個選擇器，它所包含的屬性將繼承給全部被延伸的選擇器：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}
複製代碼

繼續延伸：當一個選擇器延伸給第二個後，能夠繼續將第二個選擇器延伸給第三個

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
複製代碼

@extend-Only

有時，須要定義一套樣式並非給某個元素用，而是隻經過 @extend 指令使用，尤爲是在製做 Sass 樣式庫的時候，但願 Sass 可以忽略用不到的樣式。

若是使用普通的 CSS 規則，最後會編譯出不少用不到的樣式，也容易與其餘樣式名衝突，因此，Sass 引入了「佔位符選擇器」 (placeholder selectors)，看起來很像普通的 id 或 class 選擇器，只是 # 或 . 被替換成了 %。能夠像 class 或者 id 選擇器那樣使用，當它們單獨使用時，不會被編譯到 CSS 文件中。

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
複製代碼

佔位符選擇器須要經過延伸指令使用，用法與 class 或者 id 選擇器同樣，被延伸後，佔位符選擇器自己不會被編譯。

.notice {
  @extend %extreme;
}
複製代碼

編譯爲

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
複製代碼

!optional聲明

若是@extend失敗會收到錯誤提示，好比，這樣寫a.important {@extend .notice}，當沒有.notice選擇器時，將會報錯，只有 h1.notice 包含.notice 時也會報錯，由於 h1 與a衝突，會生成新的選擇器。 意思就是單獨將.notice提出來 若是要求@extend不生成新選擇器，能夠經過 !optional聲明達到這個目的，例如：

a.important {
  @extend .notice !optional;
}
複製代碼

@at-root

讓元素以根目錄輸出，例如：

.parent {
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}
複製代碼

輸出：

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
複製代碼

混合指令

定義混合指令@mixin

混合指令的用法是在 @mixin後添加名稱與樣式，好比名爲 large-text 的混合經過下面的代碼定義：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
複製代碼

混合也須要包含選擇器和屬性，甚至能夠用 & 引用父選擇器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}
複製代碼

引用混合樣式@include

使用@include指令引用混合樣式，格式是在其後添加混合名稱，以及須要的參數（可選）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
複製代碼

編譯爲

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}
複製代碼

也能夠在最外層引用混合樣式，不會直接定義屬性，也不可使用父選擇器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
複製代碼

編譯爲

a {
  color: blue;
  background-color: red;
}
複製代碼

參數

參數用於給混合指令中的樣式設定變量，而且賦值使用。在定義混合指令的時候，按照變量的格式，經過逗號分隔，將參數寫進圓括號裏。引用指令時，按照參數的順序，再將所賦的值對應寫進括號：

使用參數也和less幾乎無

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }
複製代碼

編譯爲

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}
複製代碼

參數變量

有時，不能肯定混合指令須要使用多少個參數，好比一個關於 box-shadow 的混合指令不能肯定有多少個 'shadow' 會被用到。這時，可使用參數變量 … 聲明（寫在參數的最後方）告訴 Sass 將這些參數視爲值列表處理：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
複製代碼

編譯爲

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
複製代碼

參數變量也能夠用在引用混合指令的時候 (@include)，與平時用法同樣，將一串值列表中的值逐條做爲參數引用：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
複製代碼

編譯爲

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}
複製代碼

輸出格式

Sass 默認的 CSS 輸出格式很美觀也能清晰反映文檔結構，爲知足其餘需求 Sass 也提供了多種輸出格式。

Sass 提供了四種輸出格式，能夠經過 :style option選項設定，或者在命令行中使用 --style選項。

:nested

Nested （嵌套）樣式是 Sass 默認的輸出格式，可以清晰反映 CSS 與 HTML 的結構關係。選擇器與屬性等單獨佔用一行，縮進量與 Sass 文件中一致，每行的縮進量反映了其在嵌套規則內的層數。當閱讀大型 CSS 文件時，這種樣式能夠很容易地分析文件的主要結構。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }
複製代碼

:expanded

Expanded 輸出更像是手寫的樣式，選擇器、屬性等各佔用一行，屬性根據選擇器縮進，而選擇器不作任何縮進。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}
複製代碼

:compact

Compact 輸出方式比起上面兩種佔用的空間更少，每條 CSS 規則只佔一行，包含其下的全部屬性。嵌套過的選擇器在輸出時沒有空行，不嵌套的選擇器會輸出空白行做爲分隔符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
複製代碼

:compressed

Compressed 輸出方式刪除全部無心義的空格、空白行、以及註釋，力求將文件體積壓縮到最小，同時也會作出其餘調整，好比會自動替換佔用空間最小的顏色表達方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程