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}{
        100% / $columns * $i
    }
}
.col-1{
     25%;
}
.col-2{
     50%;
}
.col-3{
     75%;
}
.col-4{
     100%;
}

@for $i from 1 to $columns {
    .col-#{$i}{
        100% / $columns * $i
    }
}
.col-1{
     25%;
}
.col-2{
     50%;
}
.col-3{
     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}{
        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;
}

注释三种情况：

/*多行注释 不会出现在压缩的编译情况下*/

// 单行注释 所有的编译模式都不会出现

/*!

强制注释 ，出现在所有的编译模式下

*/