scss中不常用的冷知识

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

色值颜色的介绍

  1. HEX 常用在代码中表示颜色,HEX 的参数是通过十六进制表示法连接三个字节形成,顺序如下,字节 1:红色值(颜色类型红色),字节 2:绿色值(颜色类型为绿色),字节 3:蓝色值(颜色类型蓝色),一个字节表示 00 到 FF 范围内的数字。

  2. RGB 色彩模式是工业界的一种颜色标准,红 (Red) 、绿 (Green) 、蓝 (Blue) 是色光三原色,三者本身就是一种色光。

hex.png
  1. HSB或者HSV 包含是色相 (H)、饱和度 (S) 和明度 (B)
hsb.png
  1. 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条变量规则

  1. 变量以美元符号$开头,后面跟变量名
  2. 变量名是不以数字开头的可包含字母、数字、下划线、横线(连接符)
  3. 通过连接符-与下划线_定义的同名变量为同一变量
  4. 变量一定要先定义,后使用
  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%)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,186评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,858评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,620评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,888评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,009评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,149评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,204评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,956评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,385评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,544评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,185评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2 351

推荐阅读更多精彩内容