css 预处理

CSS 预处理是一种在 CSS 开发中使用的技术，它允许开发者使用变量、嵌套规则、混合等功能，从而更高效地编写和维护 CSS。

css 预处理

sass

变量

声明变量

$higiligt-color:#f00

引用变量

嵌套

支持像俄罗斯套娃一样写样式 同时 也会同样规则进行解析

父选择器标识符 &

一般用于伪类元素

在父类之前添加选择器

群组选择器

组合选择器

子组合

>

同层组合

+(同层相邻) ~(同层所有)

注意：该定义只对后续元素有效

嵌套属性

导入sass

与css 不同点:css 执行到@import 就加载 @import sass 文件导入

混合器

大段的重用样式的代码 ，解决重用问题 @mixin

定义：@mixin @mixin rounded-corners{ }

使用 @include

混入 传参 @minix link-colors($normal,$hover,$visited){ color:$normal: &:hover{color:$hover} &:visited{color:$visited} }

使用 混入传参

随意定义参数顺序

默认参数值

定义

@minxi link-colors( $normal, $hover:blue, $vistited:red ){ color:$normal; &:hover{color:$hover} &:visited{color:$visited} }

使用

@include link-color(pink)

继承

定义类

.error{ border:1px solid red: background-color:red } .showState{ @extends error border-width:2px; }

导入

导入文件

新版：@use 3.8 以上 @use "xxxx" as Btn

Btn,$变量名

旧版本 @import “xxxxxx”

使用 $变量名

导入部分文件

创建 _ 开头的文件名称 带入时无需 带 _

函数

less

变量

@

选择器名称

@my-selector:banner // usage .@{my-selector}{ font-weight:bold; line-height:40px }

Url

@images:"./img" body{ background:url("@{images}/white-sand.png") }

import

@themes:"../../src/theme" @import "@{themes}/light.less"

属性名

@prop:color .widget{ @{prop}:'#000' background-@{prop}:"#999" }

@@

@prop:blue .section{ @color:@prop .element{ color:@@color } }

新特性 属性作为变量

.widget{ color:"#efefef" background-color:$color }

嵌套

&

.link

混合

定义

.a,#b{ color:red } .mixin-class{ .a() } .minix-id{ #b() }

.a,#b{ color:red } .mixin-class{ .color：red } .minix-id{ .color：red }

命名空间

#outer{ .inner{ color:red } } .c{ #outer.inner() }

关键字

在调用mixin后 将其继承的所有属性均标记为：!important

参数

.border-radius(@radius:3px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header{ .border-radius(4px) }

运算

函数

if

if（2>1,true,false）

boolean

返回 true/false 可以配合if 使用

参数：true/false 运算

lighten、darken

调整颜色亮度

sturate() desturate()

调整饱和度

fadein() fadeout()

调整颜色透明度

lightness()

获取颜色亮度

自定义函数

less-loader 设置javascriptEnabled :true

导入

@import