Scss 與 Sass 入門學習小記 (二) 【scss的數據類型以及內置函數】

ScssScript 支持 6 種主要的數據類型：

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

type-of方法用於檢測數據類型

數字的基本運算

2+8  10
8/2  8/2
(8/2)  4
5px + 5px   10px
5px * 2  10px
5px * 5px  25px*px
(10px / 2px)  5 
(10px / 2)  5px
混合運算
3 + 2 * 5px  13px

關於數字的函數運算

abs()  絕對值
round()  四捨五入
cell() 向上取整
floor() 向下取整
percentage() 轉換%  percentage(650px / 100px) => 65%
min()
max(1,2,3)  3

字符串的基本運算

 "ni" + hao   "nihao"
 ni-hao       "ni-hao"
 ni / hao     "ni/hao"

字符串的函數運算

to-upper-case()
to-lower-case()
str-length() 
str-index(a,b)  a是被查找的字符串 b是指要查找的字符  索引從 1 開始 
str-index("nihao","i")   2
str-insert(a,b,c)  
str-insert("nihao","hyh",6)  nihaohyh

顏色的函數運算

$a: hsl(0,100%,50%, 0.5)
HSL(a)  色相H 0-360deg 飽和度S 0-100% 明度L 0-100%  a透明度 0-1
adjust-hue(a, b)  調整色相  a 要調整的顏色  b 要調整的值  185deg
lighten(a, b)     加亮調整明度  a 要調整的顏色  b 要增長的值  30%  => 80%
darken(a, b)      下降明度     a 要調整的顏色  b 要減小的值  30%   => 20%
saturate(a, b)   加亮飽和度       同上
desaturate(a, b) 下降飽和度
opacify           增長透明度的值      0.3   => 0.8
transparentize     下降透明度的值    0.3  => 0.2

數組 (list)

$list-data:1px solid #000;
length($list-data)    3
nth($list-data, 1)  => 1px  獲取指定序號的值
index($list-data,solid)  2
append($list-data,10px)  1px solid #000 10px
join(5px 10px, 10px 1px,[comma]) => 5px 10px 10px 1px  comma指定各項的分隔符 默認空格

Map運算

$map:(key1:value1,key2:value2)
length($map)   2
map-get($map,key1)   value1
map-keys($map)   (key1,key2)
map-values($map)  (value1,value2)
map-has-key($map,key1)  true
map-merge($map,(key3:value3)   =>  (key1:value1,key2:value2,key3:value3)
$map2 = map-merge($map,(key3:value3)
map-remove($map2,key3,key2)    => (key1:value1)

Boolean運算

< > >= <= == and(&&) or(||)   not(!) 

Interpolation 插入

定義變量
$name : "info";
$atrr : "border";

// 使用形式   #{$name}
/* 註釋中也能夠使用 #{$name} */
.alert-#{$name} {
    #{$atrr}-color:#ccc;
}

控制語句

// if else 語句

$theme : "dark";
.theme{
    @if $theme == "dark"{
        background-color: #000;
    } @else if $theme == "light"{
        background-color: #fff;
    } @else {
        background-color: #666;
    }
}

@for語句

@for $var from <開始值> through <結束值>{ }    包含結束值的循環

@for $var from <開始值> to <結束值>{ } 不包含結束值的循環

$columns : 4;
@for $i from 1 through $columns {
    .col-#{$i}{
        width:100% / $columns * $i
    }
}
.col-1{
    width: 25%;
}
.col-2{
    width: 50%;
}
.col-3{
    width: 75%;
}
.col-4{
    width: 100%;
}

@for $i from 1 to $columns {
    .col-#{$i}{
        width:100% / $columns * $i
    }
}
.col-1{
    width: 25%;
}
.col-2{
    width: 50%;
}
.col-3{
    width: 75%;
}

@each 遍歷數組

$icons : success error warning;

@each $icon in $icons{
    .icon-#{$icon} {
        background-image: url(./image/#{$icon}.png)
    }
}

@while

@while 條件 {}

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

@function

$colors:(light:#fff,dark:#000);
@function color ($key) {
    @return map-get($colors, $key);
}

// 錯誤信息提示

// @error 在打包文件中提示

// @warn 在控制檯提示

$colors:(light:#fff,dark:#000);
@function color ($key) {
    @if not map-has-key($map: $colors, $key: $key){
        @warn "在 $colors 裏面沒有找到 #{$key} 這個key"
    }
    @return map-get($colors, $key);
}

@import 和 Partials

Partials 是指一個scss文件，命名規則是以 _ 開頭，例如 _base.scss

引入該文件，不會建立一個http請求，而是會編譯進當前的scss文件，輸出

一個css文件，在引入的過程當中，只須要 @import "base"; 不須要_ 不一樣目錄須要相對路徑

// 例如：
// 文件1 _base.scss
body{
    margin: 0;
    padding: 0;
}
// 文件2 style.scss
@import "base";
div{
    color: #000;
}
// 編譯爲一個文件 style.css
body{
    margin: 0;
    padding: 0;
}
div{
    color: #000;
}

註釋三種狀況：

/*多行註釋 不會出如今壓縮的編譯狀況下*/

// 單行註釋 全部的編譯模式都不會出現

/*!

強制註釋 ，出如今全部的編譯模式下

*/