sass介紹及使用

tomato 發(fā)布于2019-08-30 15:56 / 3825人閱讀

摘要：生產(chǎn)環(huán)境當(dāng)中，一般使用最后一個選項(xiàng)?；旧?，局部變量只會在局部范圍內(nèi)覆蓋全局變量?；旧?，沒有理由聲明一個永遠(yuǎn)不需要更新或者只在單一地方使用變量。在屬性中取值需要使用的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。

SASS 官網(wǎng)（中文）

SASS 官網(wǎng)（英文）

SASS 是什么

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass 是成熟、穩(wěn)定、強(qiáng)大的 CSS 擴(kuò)展語言。

SASS 的特點(diǎn)

兼容 CSS 語法、功能豐富、成熟

I. SASS 簡介

是 CSS 的擴(kuò)展，是 CSS 的預(yù)處理。提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時間，使得 CSS 的開發(fā)，變得簡單和可維護(hù)。

sass 文件有兩種文件名后綴，分別是 .sass 和 .scss，.sass 是嚴(yán)格的嵌套縮進(jìn)規(guī)則，而 .scss 的則是跟寫 css 代碼類似的大括號，分號這樣的語法規(guī)則。

CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了很多種不同的 CSS 預(yù)處理器語言，比如說：

Sass（SCSS）

LESS

Stylus

Turbine

Swithch CSS

CSS Cacheer

DT CSS

到目前為止，在眾多優(yōu)秀的 CSS 預(yù)處理器語言中就屬 Sass、LESS 和 Stylus 最優(yōu)秀，討論的也多，對比的也多。

Sass 和 SCSS 區(qū)別

Sass 和 SCSS 其實(shí)是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點(diǎn)：

文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名

語法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語法規(guī)則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

body
  font: 100% $font-stack
  color: $primary-color

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

II. SASS 的使用 安裝方法

npm install sass -g

使用方法

sass test.scss [test.css]

sass 在線轉(zhuǎn)換

sass 編譯風(fēng)格的選項(xiàng)

SASS 提供四個編譯風(fēng)格的選項(xiàng)：

nested：嵌套縮進(jìn)的 css 代碼，它是默認(rèn)值。

expanded：沒有縮進(jìn)的、擴(kuò)展的 css 代碼。

compact：簡潔格式的 css 代碼。

compressed：壓縮后的 css 代碼。

生產(chǎn)環(huán)境當(dāng)中，一般使用最后一個選項(xiàng)。

sass --style compressed test.sass test.css

你也可以讓 SASS 監(jiān)聽某個文件或目錄，一旦源文件有變動，就自動生成編譯后的版本。

sass --watch input.scss:output.css // watch a file
sass --watch app/sass:public/stylesheets // watch a directory

基本用法

1.數(shù)據(jù)類型

Sass 和 JavaScript 語言類似，也具有自己的數(shù)據(jù)類型，在 Sass 中包含以下幾種數(shù)據(jù)類型：

數(shù)字: 如，1、 2、 13、 10px；

字符串：有引號字符串或無引號字符串，如，"foo"、 "bar"、 baz；

顏色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；

布爾型：如，true、 false；

空值：如，null；

值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

字符串

有引號字符串 (quoted strings)，如 "Lucida Grande" 、"http://sass-lang.com"；

無引號字符串 (unquoted strings)，如 sans-serifbold。

使用 #{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

2.變量

SASS 允許使用變量，所有變量以$開頭。

$blue: #1875e7;
div {
  color: $blue;
}

如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

$side: left;
.rounded {
  border-#{$side}-radius: 5px;
}

普通變量和默認(rèn)變量

sass 的默認(rèn)變量一般是用來設(shè)置默認(rèn)值，然后根據(jù)需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認(rèn)變量之前重新聲明下變量即可。

默認(rèn)變量的價值在進(jìn)行組件化開發(fā)的時候會非常有用。

$fontSize: 14px;
$fontSize: 12px !default;
body {
  font-size: $fontSize;
}
/*普通變量與默認(rèn)變量*/
body {
  font-size: 14px;
}

局部變量和全局變量

從 3.4 版本開始，Sass 已經(jīng)可以正確處理作用域的概念

$color: orange !default; //定義全局變量(在選擇器、函數(shù)、混合宏...的外面定義的變量為全局變量)
.block {
  color: $color; //調(diào)用全局變量
}
em {
  $color: red; //定義局部變量
  a {
    color: $color; //調(diào)用局部變量
  }
}
span {
  color: $color; //調(diào)用全局變量
}

.block {
  color: orange;
}

em a {
  color: red;
}

span {
  color: orange;
}

全局變量的影子

當(dāng)在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個已經(jīng)存在于全局范圍內(nèi)的變量時，局部變量就成為了全局變量的影子?；旧?，局部變量只會在局部范圍內(nèi)覆蓋全局變量。

同上一個例子

什么時候聲明變量？

該值至少重復(fù)出現(xiàn)了兩次；

該值至少可能會被更新一次；

該值所有的表現(xiàn)都與變量有關(guān)（非巧合）。

基本上，沒有理由聲明一個永遠(yuǎn)不需要更新或者只在單一地方使用變量。

基本用法

3.計(jì)算功能

加減乘除都不允許不同單位進(jìn)行運(yùn)算

body {
  margin: (14px/2);
  top: 50px + 100px;
}

加法 + 減法

攜帶不同類型的單位時，在 Sass 中計(jì)算會報錯

.box {
  width: 20px + 1em;
}

$full-width: 960px;

.content {
  width: $full-width - 1em;
}
// Incompatible units: "em" and ‘px".”

乘法

能夠支持多種單位（比如 em ,px , %）

乘法運(yùn)算時，兩個值單位相同時，只需要為一個數(shù)值提供單位即可

.box {
  width: 10px * 2;
  // width: 10px * 2px 錯誤;
}

除法

在 Sass 中做除法運(yùn)算時，直接使用“/”符號做為除號時，將不會生效，編譯時既得不到我們需要的效果，也不會報錯。

這樣的結(jié)果對于大家來說沒有任何意義。要修正這個問題，只需要給運(yùn)算的外面添加一個小括號()

"/" 符號被當(dāng)作除法運(yùn)算符時有以下幾種情況：

如果數(shù)值或它的任意部分是存儲在一個變量中或是函數(shù)的返回值。

如果數(shù)值被圓括號包圍。

如果數(shù)值是另一個數(shù)學(xué)表達(dá)式的一部分。

p {
  font: 10px/8px; // 純 CSS，不是除法運(yùn)算
  height: (16px/8px);
  $width: 1000px;
  width: $width/2; // 使用了變量，是除法運(yùn)算
  width: round(1.5) / 2; // 使用了函數(shù)，是除法運(yùn)算
  height: (500px/2); // 使用了圓括號，是除法運(yùn)算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運(yùn)算
}

p {
  font: 10px/8px;
  height: 2;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}

除法運(yùn)算時，如果兩個值帶有相同的單位值時，除法運(yùn)算之后會得到一個不帶單位的數(shù)值。

顏色運(yùn)算

所有算數(shù)運(yùn)算都支持顏色值，并且是分段運(yùn)算的。也就是說，紅、綠和藍(lán)各顏色分段多帶帶進(jìn)行運(yùn)算。

p {
  color: #010203 + #040506; // 01+04 02+05 03+06
  // 考慮顏色函數(shù) 未來版本不支持
}

字符運(yùn)算

在 Sass 中可以通過加法符號“+”來對字符串進(jìn)行連接?？梢赃B接變量和和字符

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

div {
  cursor: "e" + -resize;
  position: re + "lative";
}

.box:before {
  content: " HelloSass! ";
}

div {
  cursor: "e-resize";
  position: relative;
}

基本用法

4.嵌套

div {
  hi {
    color: red;
  }
}

sass 的嵌套分為 3 種：選擇器嵌套、屬性嵌套、偽類嵌套

選擇器嵌套

& 有 2 種用法：1.替換空格 2.選擇父類

nav {
  a {
    color: red;
    .b {
      & .c {
        font-size: 12px;
      }
      &:hover {
        color: green;
      }
    }
    head & {
      color: green;
    }
  }
}

nav a {
  color: red;
}
nav a .b .c {
  font-size: 12px;
}
nav a .b:hover {
  color: green;
}
head nav a {
  color: green;
}

屬性嵌套

CSS 有一些屬性前綴相同，只是后綴不一樣，比如：border-top/border-right，與這個類似的還有 margin、padding、font 等屬性。

.box {
  font: {
    size: 12px;
    weight: bold;
  }
}

.box {
  font-size: 12px;
  font-weight: bold;
}

偽類嵌套

.box {
  &:before {
    content: "偽元素嵌套";
  }
}

選擇器嵌套最大的問題是將使最終的代碼難以閱讀，我們應(yīng)該盡可能避免選擇器嵌套。

基本用法

5.注釋

SASS 共有兩種注釋風(fēng)格。

標(biāo)準(zhǔn)的 CSS 注釋 /_ comment _/ ，會保留到編譯后的文件。

單行注釋 // comment，只保留在 SASS 源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通?？梢杂糜诼暶靼鏅?quán)信息。

css 代碼的重用

1.繼承

SASS 允許一個選擇器，繼承另一個選擇器。比如，現(xiàn)有 class1：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

要繼承 .btn，就要使用@extend 命令：

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-default {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器：

.btn,
.btn-primary,
.btn-default {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-default {
  background-color: orange;
  color: #fff;
}

css 代碼的重用

2.Mixin(混合宏)

需要重復(fù)使用大段的樣式時，使用變量就無法達(dá)到我們目目的，這時候可以使用@mixin，定義一個代碼塊。

@mixin left {
  float: left;
  margin-left: 10px;
}

使用@include 命令，調(diào)用這個 mixin。

div {
  @include left;
}

使用的時候，根據(jù)需要加入?yún)?shù)：

div {
  @include left(20px);
}

下面是一個 mixin 的實(shí)例，用來生成瀏覽器前綴。

// 在屬性中取值需要使用 #{}
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li {
  @include rounded(top, left);
}

#footer {
  @include rounded(top, left, 5px);
}

mixin 的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

混合宏除了能傳一個參數(shù)之外，還可以傳多個參數(shù)

@mixin center($width, $height) {
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px, 300px);
}

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

有一個特別的參數(shù)“…”。當(dāng)混合宏傳的參數(shù)過多之時，可以使用參數(shù)來替代，如：

@mixin box-shadow($shadows...) {
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000, 0.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000, 0.5), 0 0 2px rgba(#000, 0.2));
}

.box1 {
  @include box-shadow();
}

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

.box1 {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

混合宏的不足

混合宏在實(shí)際編碼中給我們帶來很多方便之處，特別是對于復(fù)用重復(fù)代碼塊。但其最大的不足之處是會生成冗余的代碼塊。比如在不同的地方調(diào)用一個相同的混合宏時。

@mixin border-radius {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  @include border-radius;
  margin-bottom: 5px;
}
.btn {
  @include border-radius;
}

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。

css 代碼的重用

3.占位符%placeholder

他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因?yàn)?%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼。

%mt5 {
  // 沒有被@extent調(diào)用就不會被編譯到css中
  margin-top: 5px;
}
%pt5 {
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

通過 @extend 調(diào)用的占位符，編譯出來的代碼會將相同的代碼合并在一起。

混合宏 VS 繼承 VS 占位符

css 代碼的重用

3.函數(shù)

自備了一系列的函數(shù)功能。其主要包括：

字符串函數(shù)

數(shù)字函數(shù)

列表函數(shù)

顏色函數(shù)

Introspection 函數(shù)

三元函數(shù)等

字符串函數(shù)

unquote($string) : Removes quotes from a string.

quote($string) : Adds quotes to a string.

to-lower-case($string) : Converts a string to lower case.

數(shù)字函數(shù)

round($number) : Rounds a number to the nearest whole number.

ceil($number) : Rounds a number up to the next whole number.

floor($number) : Rounds a number down to the previous whole number.

列表函數(shù)

join($list1, $list2, [$separator, $bracketed]) : Joins together two lists into one.

append($list1, $val, [$separator]) : Appends a single value onto the end of a list.

Map 函數(shù)

map-keys($map) : Returns a list of all keys in a map.

map-values($map) : Returns a list of all values in a map.

map-has-key($map, $key) : Returns whether a map has a value associated with a given key.

顏色函數(shù)

.test {
  text: to-upper-case(aaaaa);
  text: to-lower-case(aA-aAAA-aaa);
}

.footer {
  width: round(12.3px);
}

.footer1 {
  width: index(1px solid red, red);
}

$social-colors: (
  dribble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);
.btn-dribble {
  color: map-get($social-colors, facebook);
}

4.插入文件

@import 命令，用來插入外部文件。

@import "path/filename.scss";

如果插入的是.css 文件，則等同于 css 的 import 命令。

@import "foo.css";

sass 高級用法

1.條件語句

@if lightness($color) >30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

2.循環(huán)語句

for 循環(huán)

@for $i **from** start **through** end || **@for** $i from start to end

區(qū)別是關(guān)鍵字 through 表示包括 end 這個數(shù)，而 to 則不包括 end 這個數(shù)。

@for $i from 1 to 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
@for $i from 1 through 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-3 {
  border: 3px solid blue;
}

@for 應(yīng)用在網(wǎng)格系統(tǒng)生成各個格子 class 的代碼：

//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i} {
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }
}

while 循環(huán)

$i: 6;
@while $i>0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

each 循環(huán)

@each 循環(huán)就是去遍歷一個列表，然后從列表中取出對應(yīng)的值。

$list: adam john wynn mason kuroir; //$list 就是一個列表

@mixin author-images {
  @each $author in $list {
    .photo-#{$author} {
      background: url("/images/avatars/#{$author}.png") no-repeat;
    }
  }
}

.author-bio {
  @include author-images;
}

sass 高級用法

3.自定義函數(shù)

SASS 允許用戶編寫自己的函數(shù)。

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

II. SASS @規(guī)則

@media

Sass 中的 @media 指令和 CSS 的使用規(guī)則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規(guī)則中。有點(diǎn)類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。來看一個簡單示例：

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

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

@at-root

@at-root 從字面上解釋就是跳出根元素。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }
}

.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

@debug

@debug 在 Sass 中是用來調(diào)試的，@debug 指令之后，在命令終端會輸出你設(shè)置的提示 DEBUG:

@warn

@mixin error($x) {
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @warn "你需要將#{$x}值設(shè)置在10以內(nèi)的數(shù)";
  }
}

.test {
  @include error(15);
}

@error

@mixin error($x) {
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設(shè)置在10以內(nèi)的數(shù)";
  }
}

.test {
  @include error(15);
}

III. vue 中引入 sass

安裝相關(guān)依賴包

npm install --save-dev sass-loader
//sass-loader依賴于node-sass
npm install --save-dev node-sass

在 build 文件夾下的 webpack.base.conf.js 的 rules 里面添加配置

{
  "test": /.sass$/,
  "loaders": ["style", "css", "sass"]
}

在*.vue 中修改 style 標(biāo)簽

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

sass介紹及使用

字符串

普通變量和默認(rèn)變量

局部變量和全局變量

全局變量的影子

什么時候聲明變量？

加減乘除都不允許不同單位進(jìn)行運(yùn)算

加法 + 減法

乘法

除法

除法運(yùn)算時，如果兩個值帶有相同的單位值時，除法運(yùn)算之后會得到一個不帶單位的數(shù)值。

顏色運(yùn)算

字符運(yùn)算

選擇器嵌套

屬性嵌套

偽類嵌套

混合宏的不足

混合宏 VS 繼承 VS 占位符

字符串函數(shù)

數(shù)字函數(shù)

列表函數(shù)

Map 函數(shù)

顏色函數(shù)

for 循環(huán)

while 循環(huán)

each 循環(huán)

@media

@at-root

@debug

@warn

@error

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

sass介紹及使用

字符串

普通變量和默認(rèn)變量

局部變量和全局變量

全局變量的影子

什么時候聲明變量？

加減乘除都不允許不同單位進(jìn)行運(yùn)算

加法 + 減法

乘法

除法

除法運(yùn)算時，如果兩個值帶有相同的單位值時，除法運(yùn)算之后會得到一個不帶單位的數(shù)值。

顏色運(yùn)算

字符運(yùn)算

選擇器嵌套

屬性嵌套

偽類嵌套

混合宏的不足

混合宏 VS 繼承 VS 占位符

字符串函數(shù)

數(shù)字函數(shù)

列表函數(shù)

Map 函數(shù)

顏色函數(shù)

for 循環(huán)

while 循環(huán)

each 循環(huán)

@media

@at-root

@debug

@warn

@error

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

除法運(yùn)算時，如果兩個值帶有相同的單位值時，除法運(yùn)算之后會得到一個不帶單位的數(shù)值。