第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

ElvisYang · 更新于 2020-08-31

Sass 函數(shù)

1. 前言

本節(jié)教程來講解 Sass 中的函數(shù)，這在 Sass 中是比較強大的一個功能，同時使用場景和語法也比較多，所以本節(jié)內(nèi)容篇幅較長，但你一定要好好學習， Sass 函數(shù)很重要！在 Sass 中函數(shù)中幾乎可以用到前面你學的所有章節(jié)的內(nèi)容，所以說函數(shù)包括萬象同時功能也非常強大，本節(jié)我們將詳細講解 Sass 中各種函數(shù)的功能和用法。

2. 什么是函數(shù)？

函數(shù)是一段可以被另外的程序或代碼調(diào)用的“子程序”，一個函數(shù)由稱為函數(shù)體的一系列代碼語句組成，并且函數(shù)也可以接收值，在大多數(shù)語言中函數(shù)都是這樣的，Sass 中的函數(shù)也是一樣。

3. Sass 函數(shù)簡介

Sass 為我們提供了很多內(nèi)置模塊，其中就包含了很多函數(shù)（包括一些指令），我們可以通過 @use 去加載它們，然后我們就可以調(diào)用了，當然還有一些函數(shù)可以直接在 CSS 語句中調(diào)用，在 Sass 中常用的函數(shù)有：

  • 字符串函數(shù)
  • 數(shù)字函數(shù)
  • 列表函數(shù)
  • Introspection函數(shù)
  • 條件函數(shù)
  • Map 函數(shù)
  • 顏色函數(shù)

上面這些函數(shù)為我們提供了強大而豐富的功能來更高效地編寫樣式，下面我們來詳細講解 Sass 函數(shù)。

4. 語法示例

我們先來看一段 Sass 函數(shù)的代碼來直觀感受一下：

$list: [1,2,4,5];
$string: 'string';
$substring: 'str';

.box {
  font-size:length($list); // 列表函數(shù)
  font: quote($string); // 字符串函數(shù)
  font: str-index($string, $substring); // 字符串函數(shù)
  color: adjust-hue(#6b717f, 60deg); // 顏色函數(shù)
  border-width: ceil(4.2); // 數(shù)字函數(shù)
  width: percentage(.7); // 數(shù)字函數(shù)
  font: type-of(#676767); // Introspection函數(shù)
}

上面的示例代碼中我們舉了幾種函數(shù)的例子，在實際開發(fā)中并不會這么寫，這里把它們作為屬性值只是為了直觀的展示，所以先不要在意屬性；可以從上面的例子看出，函數(shù)的使用就像 javascript 中的函數(shù)一樣，通過函數(shù)名來調(diào)用，然后在括號中傳參，最后會得到函數(shù)的返回結(jié)果，那上面示例中這些函數(shù)的返回結(jié)果是什么呢？轉(zhuǎn)換為 CSS 的代碼如下：

.box {
  font-size: 4;
  font: "string";
  font: 1;
  color: #796b7f;
  border-width: 5;
  width: 70%;
  font: color;
}

可以看到上面轉(zhuǎn)換為 CSS 的代碼中的屬性值就是函數(shù)的返回結(jié)果，可能在這里你還不是很懂，沒關(guān)系下面我們開始詳細講解 Sass 提供的這些函數(shù)！在這里你要知道 Sass 中的函數(shù)也是通過函數(shù)名調(diào)用并傳參，最后 Sass 會為你返回函數(shù)的執(zhí)行結(jié)果。

5. 使用場景

在上面的語法示例中你已經(jīng)感受了 Sass 函數(shù)，下面我們開始詳細的來講解它。

5.1 字符串函數(shù)

字符串函數(shù)主要提供了字符串類型的相關(guān)操作，就像在 javascript 中一樣，Sass 提供的字符串函數(shù)可以獲取字符串的長度，字符串的下標以及字符串中的大小寫字母轉(zhuǎn)換等等。

5.1.1 quote ($ string) 和 unquote($ string)

這兩個函數(shù)我們放在一起講解，它們都接收 1 個參數(shù)，參數(shù)是字符串類型，quote($string) 函數(shù)的返回結(jié)果是 以帶引號的形式返回你傳入的字符串，反之 unquote($string) 函數(shù)的返回結(jié)果是以不帶引號的形式返回你傳入的字符串，我們舉例看下：

string.quote(aaa) //=> "aaa"
unquote("bbb")  //=> bbb

5.1.2 str-index($string, $substring)

str-index($string, $substring) 函數(shù)接收 2 個參數(shù)，返回 $substring 在 $string 中的第一次出現(xiàn)的索引，如果在 $string 中不包含 $substring 則返回 null ，我們舉例看下：

str-index("abcde", "a") //=> 1
str-index("abcde", "c") //=> 3

5.1.3 str-insert($string, $insert, $index)

看見 insert 這個詞我們就能猜到，這個函數(shù)是用于字符串的插入，str-insert($string, $insert, $index) 函數(shù)接收 3 個參數(shù)，第 1 個參數(shù)是一個字符串，第 2 個參數(shù)是要插入的字符串，第 3 個參數(shù)是插入的位置，返回結(jié)果是插入后的字符串：

str-insert("abcde", "j", 1)  //=> "jabcde"
str-insert("abcde", "j", 4)  //=> "abcjde"
str-insert("abcde", "j", 100)  //=> "abcdej"
str-insert("abcde", "j", -20)  //=> "jabcde"

從上面的例子我們可以看到，當?shù)?3 個參數(shù)大于 $string 的長度，將會插入到，末尾；反之，如果小于 $string 長度的負值，則會插入到開始位置。

5.1.4 str-length($string)

這個函數(shù)用于獲取傳入的字符串的長度，只接收一個字符串參數(shù)，返回值是它的長度，返回值是 number 類型，我們舉例看下：

str-length("abcde")  //=> 5

5.1.5 str-slice($string, $start-at, $end-at)

這個函數(shù)用于字符串的截取，str-slice($string, $start-at, $end-at) 函數(shù)接收 3 個參數(shù)，第 1 個參數(shù)是一個字符串，第 2 個參數(shù)是要截取的開始位置，第 3 個參數(shù)是要截取的結(jié)束位置，返回結(jié)果是截取到的字符串；要記住 Sass 的字符串截取函數(shù)返回的字符串是包含截取的開始和結(jié)束位置字符的，我們舉例看下：

str-slice("abcde", 1, 2)  //=> "ab"
str-slice("abcde", 2, 4)  //=> "bcd"

5.1.6 to-upper-case($string) 和 to-lower-case($string)

這兩個函數(shù)我們放在一起來講解，它們都接收 1 個字符串參數(shù)；to-upper-case($string) 函數(shù) 將傳入的字符串轉(zhuǎn)換為大寫并返回，to-lower-case($string) 函數(shù)將傳入的字符串轉(zhuǎn)換為小寫并返回：

to-upper-case("abcde") //=> "ABCDE"  轉(zhuǎn)為大寫
to-upper-case("Abc")  //=> "ABC"  轉(zhuǎn)為大寫
to-lower-case("ABC")  //=> "abc"  轉(zhuǎn)為小寫
to-lower-case("Abc")  //=> "abc"  轉(zhuǎn)為小寫

5.1.7 unique-id()

unique-id() 函數(shù)會返回一個隨機的字符串，并且這個字符串在 Sass 編譯中是唯一的，這個我們用得不多，不過當你需要生成一個唯一的字符串標識的時候你可以使用它：

unique-id()  //=> urgdjis

上面我們講解了字符串函數(shù)，字符串函數(shù)可以讓你方便地操作字符串，還為你提供了對字符串的增刪改查功能，下面我們來講解數(shù)字函數(shù)。

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

Sass 提供了很多數(shù)字函數(shù)來提供計算和數(shù)值轉(zhuǎn)換等功能，在 Sass 中我們也稱之為 Math 函數(shù)，就像 javascript 中提供的 Math 函數(shù)一樣，為我們提供了很多數(shù)學上的計算，首先我們先舉例看一下簡單的僅有數(shù)學計算意義的數(shù)字函數(shù)：

math.$e  //=> 2.7182818285  返回數(shù)學常數(shù) e 的值
math.$pi //=> 3.1415926536  返回數(shù)學常數(shù) π 的值
ceil(4.2)  //=> 5  向上取整
floor(4.8)  //=> 4  向下取整
round(4.3)  //=> 4  四舍五入取近似值
round(4.7)  //=> 5  四舍五入取近似值
abs(-10px)  //=> 10px  取絕對值
math.cos(100deg)  //=> -0.1736481777 返回余弦值，單位必須與deg兼容或無單位
math.sin(100deg) //=> 0.984807753  返回正弦值，單位必須與deg兼容或無單位
math.tan(100deg) //=> -5.6712818196  返回正切值，單位必須與deg兼容或無單位
math.acos(0.5) //=> 60deg  返回反余弦值，傳入的參數(shù)不可帶單位
math.asin(0.5) //=> 30deg  返回反正弦值，傳入的參數(shù)不可帶單位
math.atan(10) //=> 84.2894068625deg  返回反正切值，傳入的參數(shù)不可帶單位
random()  //=> 返回一個 0~1 之間的隨機數(shù)
percentage(0.2)  //=> 20%  將無單位的小數(shù)轉(zhuǎn)換為百分比數(shù)

5.2.1 math.log($number, $base)

這個函數(shù)用于計算對數(shù)，它會返回 $number 相對于 $base 的對數(shù)，這兩個參數(shù)是不可以帶有單位的。

math.log(10)  //=> 2.302585093
math.log(10, 10)  //=> 1

5.2.2 math.pow($base, $exponent)

math.pow($base, $exponent) 函數(shù)用于計算 $base 的 $exponent 次冪，是用于冪運算的。

math.pow(10, 2)  //=> 100

5.2.3 math.sqrt($number)

math.sqrt($number) 函數(shù)返回傳入?yún)?shù)的平方根。

math.sqrt(100)  //=> 10

5.2.4 comparable($number1, $number2)

comparable($number1, $number2) 用來判斷兩個數(shù)值的單位是否兼容，它的返回結(jié)果是布爾值，這個在你需要對單位進行要求的時候很有用，我們舉例看下：

comparable(10px, 10)  //=> true
comparable(10px, 10px)  //=> true
comparable(10px, 10em)  //=> false

5.2.5 unitless($number)

unitless($number) 用于判斷傳入的數(shù)值是否沒有單位，返回結(jié)果是布爾值，如果沒帶單位返回 true，帶單位則返回 false。

unitless(100)  //=> true
unitless(100px)  //=> false

5.2.6 unit($number)

unit($number) 函數(shù)會返回傳入數(shù)值的單位，并且是將單位以字符串的形式返回的，我們來看下：

unit(8)  //=> ""
unit(8px)  //=> "px"
unit(8em)  //=> "em"

5.2.7 max(KaTeX parse error: Expected 'EOF', got '和' at position 12: number...) 和? min(number…)

這兩個函數(shù)分別接收以逗號分隔的數(shù)值，并且分別返回其中最大的值和最小的值。

math.max(8, 4)  //=>  8
math.min(8, 4)  //=>  4

上面我們講了 Sass 中數(shù)字函數(shù)，這些函數(shù)是輔助你來對數(shù)字類型的值進行一些操作，很像 javascript 中提供的 Math 函數(shù)，你不需要死記硬背，這些函數(shù)需要用到的時候再查也可以。

5.3 列表函數(shù)

在前面的數(shù)據(jù)類型我們講過，在 Sass 中有一種數(shù)據(jù)類型是列表類型，那么列表函數(shù)就是用來操作列表的功能，下面我們一起來看下 Sass 提供了哪些列表函數(shù)。

5.3.1 append($list, $val, $separator)

append($list, $val, $separator) 函數(shù)用于向一個列表的末尾插入元素，它接收 3 個參數(shù)，第 1 個參數(shù)是一個列表（以空格或者逗號分隔），第 2 個參數(shù)是要插入的值（也可以是一個列表），第 3 個參數(shù) $separator 表示返回的列表是否使用與 $list 相同的分隔符，這個默認是 auto （ 使用與$list相同的分隔符），這個函數(shù)的返回值也是一個列表。我們舉例看下：

append(10 11 12, 13)  //=> 10 11 12 13
append((10,11,12), 13)  //=> 10, 11, 12, 13

這里需要注意的是，如果第 1 個參數(shù)你是使用逗號分隔的列表，那么你要將這個列表使用括號括起來！

5.3.2 join($list1, $list2, $separator, $bracketed)

join($list1, $list2, $separator, $bracketed) 函數(shù)用于連接兩個列表，上面我們講到向列表默認插入元素，如果插入的元素是一個列表，那么請你使用 join 函數(shù)。

這個函數(shù)接收 4 個參數(shù)，第 1 個參數(shù)是一個列表，第 2 個參數(shù)是要插入的列表，第 3 個參數(shù)是返回列表的分隔符，默認是 auto （列表將使用與$list1相同的分隔符（如果有分隔符），否則使用與$list2相同的分隔符，或者使用空格。不允許使用其他值），第 4 個參數(shù)是布爾值，用來設(shè)置返回的列表是否包含方括號。我們舉例來看下：

join(5 6, 7 8)  //=> 5 6 7 8
join((5,6), (7,8))  //=> 5, 6, 7, 8
join(5 6, 7 8, $bracketed: true)  //=> [5 6 7 8]

這里需要注意的是，如果列表類型的參數(shù)是使用逗號分隔的列表，那么你要將這個列表使用括號括起來！

5.3.3 index($list, $value)

index($list, $value) 函數(shù)用于返回 $value 在列表 $list 中的索引，如果在 $list 中沒有 $value 則返回 null。

index(a b solid, b)  //=> 2
index(a b solid, solid)  //=> 3

5.3.4 length($list)

這個函數(shù)比較簡單，就是返回列表的長度。返回的值是 number 類型。

length(a b solid)  //=> 3
length("")  //=> 1

5.3.5 list-separator($list)

這個函數(shù)用來返回列表的分隔符，如果沒有分隔符就返回空格 space 。

list-separator(a b)  //=> space
list-separator((a,b))  //=> comma

5.3.6 nth($list, $n)

nth($list, $n) 這個函數(shù)用于通過索引在列表中取元素，第 1 個參數(shù)是一個列表，第 2 個參數(shù) $n 是索引位置，如果 $n 為負數(shù)，則從列表的末尾開始計數(shù)。如果索引 $n 處沒有元素，則引發(fā)錯誤。

nth(a b c d, 2)  //=> b

上面講解了一些比較常見的列表函數(shù)，它很像 javascript 中提供的一些數(shù)組方法，在 Sass 中你可以對列表類型的數(shù)據(jù)使用各種各樣的列表函數(shù)來滿足你的需求。

5.4 Introspection函數(shù)

Introspection函數(shù)實際在樣式中寫的非常少，一般用于代碼的調(diào)試以及做一些判斷。這里我們只舉幾個例子來看下：

type-of(10px)  //=> number 用于判斷數(shù)據(jù)的類型，返回數(shù)據(jù)的類型
type-of(10px 20px 30px) //=> list 用于判斷數(shù)據(jù)的類型，返回數(shù)據(jù)的類型
variable-exists("a") //=> false  用于判斷當前范圍中一個變量是否存在，這里是判斷變量 $a 是否存在
meta.module-variables($module)  //=> 用于返回一個模塊中定義的所有變量
call($function, $args...)  //=> 使用 $args 調(diào)用 $function，這個很像 javascript 中的 call

上面舉了幾個 Introspection函數(shù)的例子，這類函數(shù)一般很少直接用到樣式中，入門實戰(zhàn)你只需要了解有這類函數(shù)就可以，剛開始很少會直接應(yīng)用。

5.5 條件函數(shù)

if($condition, $if-true, $if-false) 函數(shù)是 Sass 中的條件函數(shù)，它接收 3 個參數(shù)，第 1 個參數(shù)是一個判斷條件或者布爾值，第 2 個參數(shù)是當判斷條件為真時的返回值，第 3 個參數(shù)是當判斷條件為假時的返回值。我們舉例看下：

if(true, 18px, 16px)  //=> 18px
if(true, 18px, 16px)  //=> 16px

5.6 Map 函數(shù)

還記得我們在 Sass 數(shù)據(jù)類型章節(jié)講到的 Maps 類型嗎，Map 函數(shù)就是提供了很多操作 Maps 類型數(shù)據(jù)的功能。

5.6.1 map-get($map, $key)

map-get($map, $key) 函數(shù)是從 $map 中取出 key 為 $key 的值，第 1 個參數(shù)是 Maps 類型的數(shù)據(jù)，我們舉例看下：

$val_map: ("a": 1, "b": 2, "c": 3); // 定義 maps 類型的數(shù)據(jù)
map-get($val_map, "a")  //=> 1
map-get($val_map, "b")  //=> 2

這個函數(shù)就很像 javascript 中從 object 數(shù)據(jù)取值，它的功能也很單一，只是取值。

5.6.2 map-has-key($map, $key)

map-has-key($map, $key) 這個函數(shù)返回在 $map 中是否有 $key，返回的值是布爾類型。

$val_map: ("a": 1, "b": 2, "c": 3); // 定義 maps 類型的數(shù)據(jù)
map-has-key($val_map, "b")  //=> true
map-has-key($val_map, "e")  //=> false

5.6.3 map-keys($map)

map-keys($map) 函數(shù)返回傳入的 map 中所有的 key，并且會以逗號分隔為一個列表返回。

$val_map: ("a": 1, "b": 2, "c": 3); // 定義 maps 類型的數(shù)據(jù)
map-keys($val_map)  //=> "a","b","c"

5.6.4 map-merge($map1, $map2)

map-merge($map1, $map2) 函數(shù)用于合并兩個 maps 類型的數(shù)據(jù) $map1 和 $map2，并且會返回一個新的 map，如果 $map1 和 $map2 中有相同的 key ，那么 $map2 中的數(shù)據(jù)會覆蓋 $map1 中的這條數(shù)據(jù)，這個函數(shù)和 javascript 中合并兩個對象的方法很類似。我們舉例看下：

$val_map1: ("a": 1, "b": 2);
$val_map2: ("c": 3, "d": 4);
map-merge($val_map1, $val_map2)
// => 返回的數(shù)據(jù)
// (
//   "a": 1,
//   "b": 2,
//   "c": 3,
//   "d": 4
// )

5.6.5 map-remove($map, $keys…)

看到 remove 我們就知道這個是用來刪除的，map-remove($map, $keys…) 函數(shù)用來刪除 $map 中的一個或多個與 $keys 關(guān)聯(lián)的值，并且返回刪除后的 map。

$val_map: ("a": 1, "b": 2, "c": 3); // 定義 maps 類型的數(shù)據(jù)

map-remove($val_map, "a", "b")  //=> ("c": 3)

5.6.6 map-values($map)

前面講到一個函數(shù)可以返回 map 中所有的 key ，map-values($map) 這個函數(shù)與其類似是用來返回 map 中所有的 value，同樣會以逗號分隔為一個列表返回。

$val_map: ("a": 1, "b": 2, "c": 3); // 定義 maps 類型的數(shù)據(jù)
map-values($val_map)  //=> 1,2,3

到這里我們講了 Map 函數(shù)，你可以使用各種 Map 函數(shù)來對 Maps 數(shù)據(jù)類型進行操作和增刪改查。

5.7 顏色函數(shù)

Sass 中提供了非常非常多的顏色函數(shù)用來處理顏色值，它們很多需要你具有專業(yè)的調(diào)色及配色知識才能發(fā)揮出作用，所以本節(jié)我們不講的那么復雜，本節(jié)內(nèi)容中我們只講幾種常見的、比較簡單的顏色函數(shù)，其他特別復雜的用于調(diào)色的函數(shù)在以后你可以再慢慢研究。

5.7.1 用于獲取通道色值的函數(shù)

Sass 提供了可以獲取一個色值中紅色通道、綠色通道和藍色通道色值的函數(shù)，它們分別是 red($color) 、green($color) 和 blue($color)。你可能還不太了解這三種通道是什么，不要緊，只要知道這三種函數(shù)和它的使用就可以。我們舉例看下：

blue(#BA55D3)  //=> 211
red(#BA55D3)  //=> 186
green(#BA55D3)  //=> 85

5.7.2 saturate($color, $amount)

saturate($color, $amount) 函數(shù)用于調(diào)整 $color 的飽和度，第 1 個參數(shù) $color 是一個顏色值，第 2 個參數(shù)是 0% ～ 100% 之間的百分數(shù)，其返回值也是一個顏色值。

saturate(#BA55D3, 20%)  //=> #c740e8

5.7.3 scale-color(…)

這是一個非常強大的顏色函數(shù)，它接收很多個參數(shù)，可以調(diào)整一個色值的很多屬性，包括這個顏色的紅、綠、藍通道，以及亮度等等，我們只能舉例來直觀的看下：

scale-color(#BA55D3, $red: 15%)  //=> #c455d3  調(diào)整紅色通道
scale-color(#BA55D3, $blue: 15%)  //=> #ba55da  調(diào)整藍色通道
scale-color(#BA55D3, $lightness: -10%, $saturation: 10%)  //=> #b338d2 調(diào)整亮度和飽和度
scale-color(#BA55D3, $alpha: -30%)  //=> rgba(186, 85, 211, 0.7)  調(diào)整不透明度

通過上面的例子可以看到顏色函數(shù)提供了非常強大的用于調(diào)色的函數(shù)，駕馭它的前提是你要有非常豐富的調(diào)色知識以及一定的美術(shù)基礎(chǔ)。在實際的項目中我們非常少的用到顏色函數(shù)，因為一般都是由公司的 UI 設(shè)計師來進行調(diào)色，所以作為入門教程，你只需要了解 Sass 中的顏色函數(shù)就好。

6. 實戰(zhàn)經(jīng)驗

上面用了非常長的篇幅講解了 Sass 提供的函數(shù)，基本都覆蓋了，那在實際的項目中我們是怎么應(yīng)用的這些函數(shù)呢？哪些比較有用哪些不是很常用呢？一起來看下在我的項目中對 Sass 函數(shù)的應(yīng)用：一般來說我們的項目中會有一個 function.scss 文件來單獨維護各種各樣的函數(shù)，我將我項目中 function.scss 文件中部分代碼粘貼出來：

// 截取字符串的后半部分
@function middleStr($str) {
  $leng: str-length($str);
  $start: $leng / 2;
  @return str-slice($str, $start, $leng);
}

// 判斷class長度范圍
@function classLong($class, $max) {
  $leng: str-length($class);
  @if $leng > $max {
    @return true;
  } @else {
    @return false;
  }
}

// 大小寫轉(zhuǎn)換
@function upperOrLower($str, $type) {
  @if type-of($str) == "string" {
    @if $type == "upper" {
      @return to-upper-case($str);
    } @else {
      @return to-lower-case($str)
    }
  }
}

上面的代碼中看出，一般我們使用 函數(shù)指令 @function 來定義我們自己的函數(shù)，這個自定義函數(shù)我們在后面的章節(jié)會單獨講解，在我的各種自定義函數(shù)中，我用到了本節(jié)內(nèi)容所講的 Sass 提供的一些函數(shù)，這其中包括對字符串的操作等等，你可以從上面這段代碼中找出來，一般來說在項目中只有封裝一些通用的函數(shù)或指令的時候，會用到 Sass 提供的這些函數(shù)來輔助我們！

7. 小結(jié)

本節(jié)內(nèi)容我們講了 Sass 提供的各種各樣的函數(shù)，基本覆蓋到了比較常用的、常見的函數(shù)，它們分別是：

  • 字符串函數(shù)
  • 數(shù)字函數(shù)
  • 列表函數(shù)
  • Introspection函數(shù)
  • 條件函數(shù)
  • Map 函數(shù)
  • 顏色函數(shù)

我在這里列出 Sass 函數(shù)的一張長圖，這里基本涵蓋了常見的常用的函數(shù)，可以方便你復習和查閱 Sass 中的函數(shù)：
圖片描述

你需要多練習多使用這些函數(shù)，慢慢的就會記住它們了，我認為函數(shù)其實就是一系列的工具，多加使用，熟能生巧！