scss的内置函数笔记

前言

在前端样式处理中，传统的css书写在一定程度上是有着自己的局限性和代码的臃肿性，为了使代码更加简洁方便从而诞生了css的”预处理器“，一款专门的css编程语言，具有”变量、函数、计算，嵌套关系“等用法。主要有三大样式预处理器” $\color{red}{sass、less、stylus}$ 。而本文章主要讲述的是 $\color{red}{sass}$ 的一些用法

更新记录

点击查看更新记录

更新记录

2022-12-5

• 1.文件命令的规范
• 2.变量的定义
• 3.常用内置函数
• 4.选择器的应用
• 5.@content占位符
• 6.@mixin混合器与@include引入器
• 7.@each…in…的使用
• 8.map-has-key的应用
• 9.map-get的应用
• 10.scssjavascript

文件命令的规范

【_】:下划线

如果我们需要导入scss文件，但又不希望将这些导入的文件将其编译为css，我们只需要在文件命名前添加一个下划线，这样就会告诉scss不要单独编译这些文件，但是引入的时候是不需要添加文件前面的下划线

/**
 *url:表示文件路径
 *corner:自定义名 要调取另一个scss文件中@mixin 的方法前缀
 *1.@forward "url" as corner  为url调用增加前缀 可以调用另一个scss文件的@mixin值 corner.xxx
 *2.@forward "url" with ($background:#123345) 给另一个文件中有$background参数改变它的值（注意另一个文件中定义$background时必须加上 "!default",否则不能改变）
 *3.@use "url" as corner with ($background:#123345) 就是中和了第1条和第2条特性
 */
//分文件
_head.scss
_body.scss
//内容
  $back: #9809ac !default;
  @mixin between{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
_footer.scss
//内容
  $back: #9809ac !default;
  @mixin between{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
//主文件
index.scss
  //引入方式1
  @import "./head.scss"
  //引入方式2
  @forward './body.scss' as corner
  //引入方式3
  @use './footer.scss' as corner with ($back:#30a6e6;)
//内容
@mixin box{
  @include corner.between;
}

变量的定义

变量的定义一般定义在文档的开头位置用,用 $加英文定义，如下

点击查看定义详情

1.单个定义（类似于JavaScript中的基本数据类型）

$color_border:#f00;
$sum: 20;

2.多个list定义 (类似于javaScript中的数组)

// 定义四个值,用逗号隔开
$list1: 245, 234,567,5478;
// 定义四个值，用空格隔开，不能加逗号
$list2: 245 234 567 5478;
// 定义二个值
$list3: 245 bold, 567 solid;

3.定义键值对的方式（类似于JavaScript的引用类型）

$font-weights:('regular':400,'medium':500,'bold':('warpvalue': none))
//移动端中定义二倍图的方式
$breakpoints:(
  'xs-retina':(max-width:768px) and (-webkit-min-device-pixel-ratio:2)
)

4.给定义的值为一个默认值,如果这文件的变量想要在另一个文件中改变，那么一定要在这变量后面加上这个默认标识!default

$back-color: #aac !default;

5.在一个scss文件中，是存在域的有全局域和私有域（私有域其实就是一个大括号内）。而!global（可以将一个私有域中的变量设值为一个全局域的变量）

.warp{
  $warp:bold !global;
}

常用内置函数

改变颜色内置函数

点击查看具体改颜色函数

lighten(颜值,改变的数值)函数、darken(颜值,改变的数值)函数的使用

// 在原色的亮度值基础上增加20%亮度（变亮） 
$back-color: lighten(#E6A23c,20%); //#d09e52
// 在原色的亮度值基础上减少20%亮度（变暗）
$back-color-dar: darken(#e6a23c,20%);

注意：这里改变的是颜色的亮度

desaturate(颜值,改变的数值)函数、saturate(颜值,改变的数值)函数的使用,它的第二个值是在0%到100%直接取值，不能超出

//在原色饱和度上增加20%
$back-desat:desaturate(#E6a23c,20%);
//在原色饱和度下减少20%
$back-sat: saturate(#E6a23c,20%)

注意：这里改变的是颜色色彩饱和度，饱和度越高色彩越纯越浓，饱和度越低则色彩变灰变淡

使用场景：一般用于不想改变原来颜色值然后元素又要做hover/focus的时候例如：

$back-color:#eca;
span{
  color:$back-color;
  &:hover{
    color:lighten($back-color,20%);
  }
}

处理字符串的函数

inspect()函数、unquote()函数quote()函数的使用

• 1.inspect(): 由于maps不能转换为纯css，作为变量的值或者参数传梯给css函数将会导致错误 使用inspect函数以产生输出字符串的复制代码
• 2.unquote():删除字符串中的引号
• 3.quote(): 给字符添加引号
• 4.#{}: 在字符中可以书写scss内置函数

//使用
$border-color:(#caa,#aa1,#cc7);
@mixin backgroundFuc(){
  @each $val in $border-color {
    #{$val}{
      border:1px solid #{$val}
    }
  }
}
// 编译后的结果
#caa{
  border: 1px solid #caa
}
#aa1{
  border: 1px solid #aa1
}
#cc7{
  border: 1px solid #cc7
}

index(list,$val)查找list索引函数($val:某个具体的值)

$list:(23,45,342,12,34);
index($list,342) // 3

注意:index函数只有二个值，第一个值是传入要查询索引的list，第二个值是具体要查询索引的值。其中索引是从1开始的，不是从0开始，这和javascript的区别

nth($list,inx)函数返回的是对应索引的值，具体应用如下

$list1: 245, 234,567,5478; //定义list方式前面有讲述
nth($list1,4) //5478

注意:nth函数只有二个值，第一个值是传入要查询的list，第二个值是具体要查询的索引。其中索引是从1开始的，不是从0开始，这和javascript的不同点

@warn提示函数

// 使用
$ca: none;
$--back-color:red;
@mixin uls($v){
  @if $v == visble{
    background:$--back-color;
  }
  @else{
    @warn "没有#{$v}"
  }
}

选择器的应用

@extend 选择继承器

选择继承器的意思就是说一个选择继承器可以继承另一个选择器定义的所用样式

$yl:#ca0;
%span{
  border:1px solid $yl;
  color: $yl
}
body{
  @extend %span;
}

%选择器占位符

注意：%选择器占位符只能用选择继承器(@extend)调用，否则无法生效

:root{
  --common-color:#f00;
}
// 定义
p%box{
  color:var(--common-color);
}
// 使用
.div_box{
  @extend %box;
}
// 输出的结果
p.div_box{
  color: #f00;
}

@at-root跳出继承器

跳出继承器有一个参数without这个参数有四个具体的值

• 1.all(表示跳出所有的)
• 2.rule（表示跳出常规的，不能跳出media和support。是默认值）
• 3.media（表示可以跳出media媒体查询，不跳出support）
• 4.support（表示可以跳出support，不跳出 media）

单个跳出应用

// 使用
.box_cc{
  div{
    color: #f00;
    @at-root #box_id{
      font-size: 10px;
    }
  }
}
// 编译后的结果
#box_id{
  font-size: 10px;
}
.box_cc div{
  color:#f00
}

多个跳出应用

// 使用
.box_cc{
  #app{
    backdrop-filter:blur(5px) saturate(180%);
    @at-root{
      #box_id1{
        font-size: 10px;
      }
      #box_id2{
        font-size: 20px;
      }
    }
  }
}
// 编译后的结果
.box_cc #app{
  backdrop-filter:blur(5px) saturate(180%);
}
#box_id1{
  font-size: 10px;
}
#box_id2{
  font-size:20px;
}

注意：跳出继承器是不管有多少层多会直接跳出（在设置的参数范围里）

@content占位符

配和@include使用

//定义
@mixin res($col){
  color:$col;
  @content;
}
// 使用
body{
  @include(#f00){
    font-size:18px
  }
}
//编译后的结果
body{
  color:#f00;
  font-size: 18px;
}

@mixin混合器与@include引入器

混合器的定义模式 @mixin name() { … }
@include 的使用模式 @include name(<…arg>){…}

//定义
//如果没有参数可以直接小括号
@mixin between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
// 如果有参数且给它一个默认值
@mixin boxSize($w:100px,$h){
  width: $w;
  height: $h;
  @content;
}
//使用
.div_box{
  @include boxSize(100px,100px){
    box-sizing:border-box;
  }
}
//编译后的结果
.div_box{
  width:100px;
  height: 100px;
  box-sizing:border-box
}

@each…in…的使用

点击查看@each使用详情

映射一对多的使用

//定义
$color_val: #f00,#fa0,#c3a;
@each $col in $color_val {
  .c_#{$col}{
    color:$col;
  }
}
//编译后的结果
.c_#f00{
  color:#f00;
}
.c_#fa0{
  color:#fa0
}
.c_#c3a{
  color: #c3a;
}

多重分配

//定义
$listVal:(aqua,dotted),(red,solid),(green,double);
@each $val1,$val2 in $listVal{
  .#{$val1}{
    border: 1px #{$val2} #{$val1};
  }
}
//编译结果
.aqua{  border:1px dotted aqua;};
.red{ border: 1px solid red};
.green { border:1px double green};

多重分配及映射

// 定义
$bal-common:(head_box1:#cc2,head_box2:#a3f,head_box3:#caa);
@each $val1,$val2 in $bal-common{
  .#{$val1}{
    color: #{$val2};
  }
}
//编译结果
.head_box1{color: #cc2};
.head_box2{color: #a3f};
.head_box3{color: #caa};

map-has-key的应用

map-has-key是遍历定义的键值对类型，如果存在就返回true 不存在就返回false
语法：map-has-key(定义的类型值,这个类型里是否存在的值)

//使用
$font-weights:('samll':400,'medium':500,'bold':600);
map-has-key($font-weights,'samll')// true
map-has-key($font-weights,'body') //false

map-get的应用

map-get是获取键值对类型的具体值
语法：map-get(定义的类型值,类型的键名)

//使用
$font-weights:('samll':400,'medium':500,'bold':600);
map-get($font-weights,'samll') //400

scssjavascript

@fucntion函数指令于@return返回值指令

@function
函数指令类型于js里的函数，这里的函数配合@return使用处理一下复杂的逻辑

语法：@function name(){...}

使用：name()

@return

使用:@function name(){@return xxx;}(注意：必须配合@function使用，不能单独使用)

// 定义
$font-weights:('samll':400,'medium':500,'bold':600);
$class-name:cs_amall,cs_medium,cs_bold;
@function customFuc($n,$val,$fonts:$font-weights){
  @if map-has-key($fonts,$val){
    @each $el in $class-name {
      .#{$el}{
        width: #{map-get($fonts,$val) + $n}px;
      }
    }
  }
  @else {
    @warn 'Undefined points #{$fonts}'
  }
};
// 使用
customFuc(200,'samll',$font-weights);
// @function加return的定义
@function customFuc1($n){
  @return $n*($n+100)
};
// 使用
.box{
  height: customFuc1(100)px;
}

not指令

not表示的就是非

$--i-ce:true;
@if not $--i-ce === @if(!$--i-ce)

@if@elseif@else

@if逻辑判断语句

注意：在scss中除了null和false返回false其它的多是返回true

语法：@if(...){...}@else if(...){...}@else{...}

//定义
@mixin isHeight($value:visible){
  @if $isDigH == visible{
    height: $digH;
  }@else if $isDigH == none{

  }
}
// 使用
body{
  @include isHeight(none);
}

@for循环指令

@for循环指令有二种用法

• 1.@for $i from <start> through <end>其中$i:表示索引，但是和js不同的是，它的索引是[start,end]决定的， start开始end结束
• 2.@for $i from start to <end> 其中$i:表示索引，它的索引是[start,end-1]决定的，start开始end-1结束

@mixin forFuc($vl,$col){
  @for $i from 1 through 3{
    .#{$vl}_#{$i}{
      color:#{$col};
      @content;
    }
  }
}
// 使用
.box{
  @include forFuc(blue,blue){text-align:center;}
}
//编译后的结果
.box .blue_1{color:blue;}
.box .blue_2{color:blue;}
.box .blue_3{color:blue;}

@while指令

@while指令它与js中的while循环语句类似，当条件满足就继续执行，当条件为false的时候就结束循环体

语法:@while $is {...}

//使用
$vi:6;
@while $vi>0{
  .ms-#{$vi}{
    width:2em*$vi;
  }
  $vi: $vi-2; //这个是条件执行体必须要些，不写造成死循环
}

参考网站

SASS官网
菜鸟教程