Sass學習筆記-Sass快速入門03

一、字符串函數

在Sass中有一些函數可以處理字符串類型的數據。

1.1 to-upper-case() 全部轉爲大寫

在這裏我們先定義了一個變量 $greeting,然後把該變量作爲to-upper-case()函數的參數，可以發現，該字符串的英文全部轉化爲大寫了。

PS F:\Node.js\Node_project\ninghao-sass> sass -i
>> $greeting:"hello,world"
"hello,world"
>> $greeting
"hello,world"
>> to-upper-case($greeting)
"HELLO,WORLD"
>>

1.2 to-lower-case() 全部轉爲小寫

用法同上。

PS F:\Node.js\Node_project\ninghao-sass> sass -i
>> $greeting:'Hello,World'
"Hello,World"
>> to-upper-case($greeting)
"HELLO,WORLD"
>> to-lower-case($greeting)
"hello,world"
>>

1.3 str-length() 返回字符串長度

用法同上。

>> str-length($greeting)
11
>>

1.4 str-index() 返回指定字符在字符串中首次出現的位置

注意：索引是從1開始的

>> $greeting:'Hello,World'
>
>> str-index($greeting,'world')
null
>> str-index($greeting,'World')
7
>>

1.5 str-insert() 插入字符串

語法: str-insert(要往那個字符串插入，插入的是什麼，插入的位置)

>> str-insert($greeting,',Good morning',12)
"Hello,World,Good morning"

你也可以在str-insert函數中嵌套使用其他函數，比如:

>> str-insert($greeting,',Good morning',str-length($greeting)-5)
"Hello,Good morning,World"
>>

二、顏色

在css裏邊表示顏色的方式有很多種，
例如：
#FF0000 16進制
rgb(255,0,0) RGB方式 紅，綠，藍
還有一些常用的字符類型的 比如 red black white blue

2.1 顏色函數 RGB與RGBA

rgb(紅，綠，藍)
rgba(紅，綠，藍，透明度(0-1));
a:完全透明-完全不透明

body{
    background-color: rgba(255, 255, 0,1);
}

2.2 顏色函數 hsl與hsla

hsl語法:色相，飽和度，明度
色相：0°-360°
飽和度：0-100%
明度：0-100%
hsla語法:基本同上，和rgba差不多

2.3顏色函數 adjust-hue

adjust-hue(),可以調整色相的值。
語法:adjust-hue(要調整的對象，參數)

2.4 顏色函數 lighten與darken

lighten與darken可以改變顏色的明度
lighten可以讓顏色更白，越大越接近白色
darken可以讓顏色更黑，越大越接近黑色

2.5 顏色函數saturate與desaturate

saturate 增加顏色的純度，也就是飽和度
desaturate 減少顏色的純度。

2.6 顏色函數 opacify與transparentize 透明度

opacify：增加不透明度
opacify語法:opacify(要設置的對象,增加多少不透明度)
transparentize：減少不透明度
transparentize語法:基本同上

2.6 list 列表類型數據

sass裏邊的list可以使用空格、逗號、括號()、等分隔開
例如:

border:1px solid #000;
font-family: Courier, Lucida Console", monospace
padding:(5px 10px)(5px 0)

列表裏邊可以包含其他列表，比如：
padding裏邊是一個列表包含了兩個列表。

padding:5px 10px,5px 0

2.7 列表函數

2.7.1 length() 返回列表項目個數

length()用於返回列表裏有多少個項目:
例如:

PS F:\Node.js\Node_project\study> sass -i
>> length(5px 10px)
2
>> length(5px 10px 5px 0)
4

2.7.2 nth() 得到對應序號裏邊的數據

nth()用於得到指定位置的列表項目

PS F:\Node.js\Node_project\study> sass -i
>> nth(5px 10px,2)
10px

2.7.3 index()判斷指定項目在列表裏的位置

index() 用於判斷指定項目在列表裏的位置

>> index(1px solid red,solid)
2

2.7.4 append() 向列表追加項目

>> append(5px 10px,5px)
(5px 10px 5px)

這個函數還有第三個參數，用於指定列表的分隔符
例如:

>> append(5px 10px,5px,comma)
(5px, 10px, 5px)

2.7.5 join() 組合列表

join()用於組合列表

>> join(5px 10px,5px 5px)
(5px 10px 5px 5px)

這個函數也有第三個參數，用於指定分隔符 例如：

>> join(5px 10px,5px 5px,comma)
(5px, 10px, 5px, 5px)