sass

基础概念

sass是脚本语言,通过预处理生成css文件,语法有两种分别是.scss和.sass,scss和css的语法相同 用{}表示代码块,sass使用缩进表示代码块,语法和python相似

编译命令 scss style.scss style.css
scss和sass的不同语法区别

安装

在vue3中 npm install sass -S
如果想全局安装 npm install -g sass

变量

以$开头,生成的css是会被替换

嵌套

让css像html一样拥有层级概念,分层后的scss在处理后生成的css是父子关系.

嵌套关系中& 可以代表父标签样式,就是字符串拼接的原理,实现hover 等伪类有用

同时相同的属性也可以嵌套,子属性会以父属性进行字符串拼接

.nav2{
    border: 1px solid red{
       left: 0px;
        right: 10px
    };
    
}

分片 导入

• scss按功能和模块划分
• 分片文件名以_开头 如果scss文件名以_开头,表示是一个分片文件,则不会对分片单独编译产生css文件
• 单独的分片文件不能生成css文件
• 引入分片DartSass使用@use 其他都用@import,引入时不要带后缀和_

导入步骤

1. vue的style写入lang="scss",如果是全局导入则在main.js 导入编译后的css
2. @import "test" 此时如果文件名是_开头的 则需要省略_和它的后缀名
   

mix模块

• mix模块形式的声明语法
• 使用@mixin声明一个函数,在其他类选择器中调用这个函数
• 可以传参

@mixin setPadding($padding:10px){
    padding: $padding
}

.container{
    @include setPadding($padding:30px)
}

传参形式除了位置传参,也可以指定形参传参,具体语法见示例

@mixin alert($text-color,$background){
color:$text-color;
backgound-color:$background;
}

.alert-warning{
    @include alert(#ffff, #fcf8fc)
}

.alert-info{
    @include alert($background:rgba(255, 19, 19, 0.2), $text-color:#fc0afc)
}

自定义函数

自定义函数中必须要有个@return
语法

@use "sass:map" as map;

$color:(light:#ffffff,dark:#0f0f0f);

@function getcolor($key){
    @return map.get($color,$key)
}

.mycolor{
    color: getcolor(light);
}


输出结果

.mycolor {
  color: #ffffff;
}/*# sourceMappingURL=main.css.map */

还可以在里面添加@warn在控制台自定义输出提示信息

扩展/继承

• 使用%声明基类
• 在css选择使用@extend 基类名来继承基类中的属性
• 如果基类没有被任何选择器继承,预处理后的css文件不会包含这个基类

%base{
    color:red
}

.container{
    @extend %base;
    padding:10px;
}

注释

运算

• 通过引入@use "sass:math";可以在scss中进行算术运算 按照官方要求推荐用as重命名一下 @use "sass:math" as math;
• 支持的算术运算包含 + - * math.div() %

数据类型

数字类型

边框的宽高等数据就是数字类型,单位一般是px,em %等等,在sass的交互模式中可以测试发现 加减乘可以用普通的 +-*进行计算

但是8/2 会输出8/2 是因为/在里面属于特殊字符,官方推荐1.3版本以上使用calc(8/2) 或者math.div(8,2)的写法进行计算,

另外我们可以带上单位计算 比如

>> 18px -20px
>> (18px -20px)
>> 18px - 15px
>> 3px
>> 18px - 20px
>> -2px
10px + 2
>> 12px
20px * 3
>> 60px
>> calc(18px / 3)
>> 6px
>>
>> @use "sass:math"
>> math.div(9,3)
>> 3

内置数字函数

abs round max min等等

ceil在新版本中需要使用math.ceil,同样的还有floor

>> abs(10)
>> 10
>> abs(3px)
>> 3px

>> abs(-3px)
>> 3px

>> round(3.5)
>> 4

>> round(3.2)
>> 3

>> min(1,2,4)
>> 1
>> max(3,1,5.5)
>> 5.5

颜色类型

常见的有rbg,rbga,hsl(色相,饱和度,明度),hsla

Hsla 色相中 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色,定义饱和度; 0% 为灰色， 100% 全色,定义亮度 0% 为暗, 50% 为普通, 100% 为白

内置颜色函数

需要先导入 @use 'sass:color';

$color: #3498db;

$new-color: adjust-hue($color, 40deg); 调整色相 针对hsl颜色

$new-color: saturate($color, 20%);   增加颜色的饱和度。

$new-color: lighten($color, 10%);   增加颜色的亮度。

$new-color: darken($color, 10%);   降低颜色的亮度。

$new-color: fade-in($color, 20%); // 增加透明度
 opacity() 用于直接设置不透明度。
fade-in() 和 fade-out() 用于增大或减少透明度（改变 alpha 值）。

字符串类型

字符串拼接 常见的用+实现

>> ning - hao
>> ning-hao

>> "ni" + ao
>> "niao"

>> ni + "ao"
>> niao

内置字符串函数

新版本需要提前导入 @use "sass:string"

>> string.length("Dadada")
>> 6

>> string.to-upper-case("dadada")
>> "DADADA"

>> string.to-lower-case("Dadada")
>> "dadada"

>> string.index("hello xiao hai","xiao")
>> 7

>> string.insert("www.baidu",".com",-1)
>> "www.baidu.com"

列表类型

列表类型的数据一般是用于多个配置参数项上的,一般会和for循环会搭配使用

border: 1px solid black;
padding: 0,0,0,10px;

内置的列表函数
@use "sass:list"

list.length(10px 20px)
2

list.nth(10px 20px,2)
20px

list.index(10px solid black, solid)
2

list.append(10px 20px 30,40px)
(10px 20px 30 40px)

list.join(10px 20px 30,40px 50px)
(10px 20px 30 40px 50px)

list.append(10px 20px 30,40px 50px)
(10px 20px 30 (40px 50px))

list.join(10px 20px 30,40px 50px,comma)
(10px, 20px, 30, 40px, 50px)

布尔值

>> 5 > 3
>> true

>> 10px > 20px
>> false

>> (10px > 3px) and (3px > 10px)
>> false
>> (10px > 3px) and (13px > 10px)
>> true

>> (10px > 3px) or (3px > 10px)
>> true

>> not (3px > 10px)
>> true

map

类似就是字典获取键值对的
导入@use "sass:map"
map的内置函数

>> $color:(light:#ffffff,dark : #0000)

>> list.length($color)
>> 2

>> map.get($color,light)
>> #ffffff

>> map.keys($color)
>> (light, dark)

>> map.values($color)
>> (#ffffff, rgba(0, 0, 0, 0))

>> map.has-key($color,light)
>> true

>> map.merge($color,(gray:#e5e5e5))
>> (light: #ffffff, dark: rgba(0, 0, 0, 0), gray: #e5e5e5)


>> map.remove($color,light,gray)
>> (dark: rgba(0, 0, 0, 0))

字符串格式化拼接

用#{}进行拼接

控制指令

if

语法格式

@if 条件{

}@else if 条件{

}@else{

}

for

语法格式

@for $var from <开始值> to <结束值>{
    
}

each

语法

$range: (2 3 4);

@each $i in $range {
    .col2-#{$i}{
        border: #{$i}px;
        background-image: url("../..#{$i}.png");
    }
}

while

语法

$ret: 4;
@while $ret >=1 {
    .color {
        font-size: #{$ret}px;
    }
    $ret: $ret - 1;  // 注意这里的减号左右都要有空格,否则不能正常计算
}