scss中不常用的冷知识

主题简介：利用scss中的函数方法取代js的部分工作

色值颜色的介绍

HEX 常用在代码中表示颜色，HEX 的参数是通过十六进制表示法连接三个字节形成，顺序如下，字节 1：红色值（颜色类型红色），字节 2：绿色值（颜色类型为绿色），字节 3：蓝色值（颜色类型蓝色），一个字节表示 00 到 FF 范围内的数字。
RGB 色彩模式是工业界的一种颜色标准，红 (Red) 、绿 (Green) 、蓝 (Blue) 是色光三原色，三者本身就是一种色光。

hex.png

HSB或者HSV 包含是色相 (H)、饱和度 (S) 和明度 (B)

hsb.png

HSL与HSB色彩模式非常相似，HSL即色相（Hue）、饱和度（Saturation）、亮度（Lightness），二者的饱和度是相同的，而在亮度上表现的方式不一样。

hsl.jpeg

// 浏览器支持的形式为 hex  rgb  hsl
.box{
    color:#ff0000;
    color:rgb(255,0,0);
    color:hsl(0,100%,50%);
}

scss 基础规范部分

scss 5条变量规则

变量以美元符号$开头，后面跟变量名
变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）
通过连接符-与下划线_定义的同名变量为同一变量
变量一定要先定义，后使用
变量名和值之间用冒号:分隔

2种变量作用域

变量作用域分为「全局变量域」和「局部变量域」

全局变量：声明在最外层的变量，可在任何地方使用
局部变量：嵌套规则内定义的变量只能在嵌套规则内使用 , 将局部变量转换为全局变量可以添加!global声明

$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}

常规用法

@extend实现样式复用

//@extend  继承的使用 

a:hover {
  text-decoration: underline;
}
.hoverlink {
  @extend a:hover;
}
// 编译后为
a:hover, .hoverlink {
  text-decoration: underline; 
}

@mixin 实现更为强大的复用 ,

@mixin语法糖可以简写成=

@include语法糖可以简写成+

// @mixin的简单的使用
@mixin backgroundColor($color){
    background-color:$color;
}
.box{
    // @include 使用需要结合mixin
    @include backgroundColor('#ff0000');
}
// 编译后结果
.box{
    background-color:#ff0000;
}

@content 起到一个占位符的作用，与 Vue 中 slot 作为预留空间的作用一样

// @content 支持类似vue插槽slot的功能
@mixin box {
  .title {
    @content;
  }
}
@include box {
  .text {
    font-size:14px;
  }
}

//编译后结果
.title .text{
    font-size:14px;
}

总结：静态的复用上@extend更适合，灵活的扩展上 @mixin更适合

@at-root放弃当前嵌套功能

// 示例
.bar {
    @at-root .foo {
        color: red;
    }
}

//编译后
.bar {}
.foo {
    color: red;
}

scss判断处理，方法使用部分

function，if，each部分区别于js需要以@开头

if else 判断部分

$width: 100;
$height: 200;
$last: false;
.div{
    @if ($width>50 and $height<300) {} @else {}
    @if (not $last){} @else{}
    @if ($width>500 or $height<300) {} @else {}
}

@mixin backgroundColor($color,$important: false){
    background-color:if($important, $color!important, $color);
}

for循环部分

$class-slug: for !default;// 用于设置默认值
@for $i from 1 through 4 {
    .#{$class-slug}-#{$i}{ width: 60px + $i; }
}// 编译后为 1 2 3

@for $i from 1 to 4 {
    .#{$class-slug}-#{$i}{ width: 60px + $i; }
}// 编译后为 1 2 3 4

each循环部分

//scss 定义常规的list
$list: adam john wynn;
@mixin author-images { 
    @each $author in $list { 
        .photo-#{$author} { 
            background: url("/images/avatars/#{$author}.png") no-repeat; } 
    } 
} 
.author-bio { @include author-images; }
// 编译后css
.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; } 
.author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; }


//scss 对义对象形式的list
$template1: (
  color1: 'red',
  color2: 'green',
);
$template2: (
  color1: 'red',
  color2: 'green',
);

$templates: (
    template1: $template1,
    template2: $template2,
);

@function convertThemes() {
  $t: ();
  @each $templateName, $template in $templates {
    $t: map-merge($t, $template);
  }
  @return $t
}

while循环判断部分

// scss 执行部分
$types: 4; 
$type-width: 20px; 
@while $types > 0 { 
    .while-#{$types} { 
        width: $type-width + $types; 
    } 
    $types: $types - 1; 
}

// css编译后
.while-4 { width: 24px; } 
.while-3 { width: 23px; } 
.while-2 { width: 22px; } 
.while-1 { width: 21px; }

内置模块

`maps`的基础函数

// 引入map相关方法
@use "sass:map";
// 示例说明
$colorList:(
    color1:red,
    color2:blue,
    color3:green,
)
@function getColor($list,$key){
    @return map.get($list,$key); // 使用当前方式是依靠sass_map.scss实现的
    @return map-get($list,$key); // 使用的当前方式是依靠sass_function.scss 实现的
    // 下方文档关于用法区别不在单独描述
}
.div{
    color:getColor($colorList,'color1')
}

map.get( $map,$ key)：根据给定的 key值，返回 map 中相关的值。
map.merge( $map1,$ map2)：将两个 map合并成一个新的map。
map.remove( $map,$ key)：从 map 中删除一个 key，返回一个新 map。
map.keys($map)：返回 map中所有的 key。
map.values($map)：返回 map 中所有的 value。
map.has-key( $map,$ key)：根据给定的key 值判断 map是否有对应的 value值，如果有返回 true，否则返回 false。

更多map设置详细文档的请查看地址：https://sass-lang.com/documentation/modules/map

`list`的基础函数

// 引入list相关方法
@use "sass:list";
// 示例说明
$colorList:10px 20px;

@function appList($width){
    $colorList:list.append($colorList,$width)
}
appList(30px 40px)
// 输出 10px 20px 30px 40px

** list.append( $list1,$ val, [ $separator]):**在List的未尾添加一个值。如果没有指定$ separator分隔符参数，当List只有一个值是，结果会用空格分开，否则用List本来的分隔符。
**list.index( $list,$ value): **返回List中一个值的位置
**list.is-bracketed($list): **判断一个列表是否使用了方括号
list.join( $list1,$ list2, [ $separator,$ bracketed]): 把风两个List合并为一个List
**list.length($list): **返回列表元素的个数。对于一个map数据，返回的是键值对的个数
list.separator($list): 返回一个列表的分隔符，如果列表的元素小于2个，则返回space
list. nth( $list,$ n): 取得列表中指定位置的元素
**list. set-nth( $list,$ n, $value):** 修改$ list指定 $n位置元素的值为$ value
list. zip($lists…): 把多个List组合成一个多维List。返回结果的第n个值是把每个参数列表的第n个值拿来用逗号分隔组成其值。如果有一个列表参数此位置无值，则不组合。

更多list设置详细文档的请查看地址：https://sass-lang.com/documentation/modules/list

`color`的基础函数

// 引入color相关方法
@use "sass:color";
// 示例说明
$colorDefault:#ff0000;

//color.adjust(#6b717f, $red: 15); // #7a717f

@function tranColor($col,$alpha){
    color: rgba(color.red($col),color.green($col),color.blue($col),$alpha);
}
.div{
    color:tranColor($colorDefault,0.5);
}

color.red($color) 用于获取颜色的红色通道。
color.green($color) 用于获得颜色的绿色通道
color.blue($color)用于获取颜色的蓝色通道。
color.hue($color)用于获得颜色的色调。
color.saturation($color)用于获得颜色的饱和度。
color.lightness($color)以获得颜色的亮度。
color.alpha($color)返回颜色的透明度
color.adjust( $color,$ red: null, $green: null,$ blue: null,
$hue: null,$ saturation: null, $lightness: null,$ whiteness: null, $blackness: null,$ alpha: null) $color按固定量增加或减少的一项或多项属性。
color.change( $color,$ red: null, $green: null,$ blue: null,
$hue: null,$ saturation: null, $lightness: null,$ whiteness: null, $blackness: null,$ alpha: null) 将颜色的一个或多个属性设置为新值。
```
// 示例：
color.change(#6b717f, $red: 100); // #64717f
```
更多color设置详细文档的请查看地址：https://sass-lang.com/documentation/modules/color

`math`的基础函数

// 引入math相关方法
@use "sass:math";
// 示例说明
math.ceil(4.2); // 4
math.ceil(4.9); // 5

**math.ceil( $number)** 四舍五入`$ number`到下一个最大的整数
**math.floor( $number)** 向下舍入`$ number`到下一个最小的整数
math.max($number...) 返回一个或多个数字中的最大值
math.abs($number)返回的绝对值

更多math设置详细文档的请查看地址：https://sass-lang.com/documentation/modules/math

`meta`的基础函数

// 引入meta相关方法
@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)
    
// 输出css
pre span.stx-string {
  color: #080;
}
pre span.stx-comment {
  color: #800;
}
pre span.stx-variable {
  color: #60b;
}

meta.keywords($args) 返回传递给接受任意参数的 mixin 或函数的关键字
**meta.type-of( $value)** 返回 `$ value的类型number,string等`
**meta.variable-exists( $name)** 返回当前作用域中是否存在名为`$ name`（不带$）的变量

@debug meta.variable-exists("var1"); // false
$var1: value;
@debug meta.variable-exists("var1"); // true
h1 {
  // $var2 is local.
  $var2: value;
  @debug meta.variable-exists("var2"); // true
}

更多meta设置详细文档的请查看地址：https://sass-lang.com/documentation/modules/meta

`selector`的基础函数---选择器

// 引入selector相关方法
@use "sass:selector";

@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false

selector.is-superselector( $super,$ sub) 返回选择器是否匹配选择器$super匹配的所有元素$sub

selector.append($selectors...)名称组合器

@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image");
// .accordion__copy, .accordion__image

更多selector设置详细文档的请查看地址：https://sass-lang.com/documentation/modules/selector

`string`的基础函数---字符串处理

// 引入string相关方法
@use "sass:string";

@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"

string.index( $string,$ substring) 返回存在的第一个索引
string.insert( $string,$ insert, $index)返回插入到指定位置的文本，如果index大于长度添加到最后，如果小于字符串的负长度则添加到开头
string.length($string) 返回string 中的字符数量
string.slice( $string,$ start-at, $end-at: -1)返回字符串start到end切片后的字符串
string.to-upper-case($string) 字符串转变为大写返回

更多string地址：https://sass-lang.com/documentation/modules/string

实际项目开发中常用的关于色彩计算方法

// 加深减淡主要是针对l亮度进行计算，0最暗 100%最亮
lighten(hsl(0, 0%, 0%), 30%) => hsl(0%, 0%, 30%)

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)

// 针对饱和度s进行计算  0-100%
saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)

desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%)

// 设置色相的值  0-360度
adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)

scss中不常用的冷知识

主题简介：利用scss中的函数方法取代js的部分工作

色值颜色的介绍

scss 基础规范部分

常规用法

scss判断处理，方法使用部分

内置模块

maps的基础函数

list的基础函数

color的基础函数

math的基础函数

meta的基础函数

selector的基础函数---选择器

string的基础函数---字符串处理