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