sass笔记

  1. 声明变量 通过$标识符进行命名及引用
  2. 混合器 类似vue中的函数 通过 @mixin标识定义 @include 标识调用
  3. & 父选择器标识
  4. @extend 进行继承
  5. 可嵌套
  6. 可导入 通过 @import '文件位置' 、进行导入
js 复制代码
<style>
//1 声明变量
$name: 15px;
$color: skyblue;

@mixin border-radius($num) {
  //2 类似函数
  border-radius: $num;
}
.aa {
//1 使用变量
  height: $name !important;
  background: $color !important;
  big {
    color: $color;
    font-size: 30px;
    font-weight: 700;
    & {  //3 
      width: 50px;
      background: purple;
    }

    @include border-radius(50%); // 2 调用函数
  }
}
.a2 {
  @extend .aa; //4 继承 
  margin-left: 500px;
}
</style>


<template>
  <div class="aa">
    <big>123</big>
  </div>
  <small class="a2">456</small>
</template>
相关推荐
吴梓穆15 分钟前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
V---scwantop---信1 小时前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体
Moonnnn.1 小时前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程
吴梓穆2 小时前
UE5学习笔记 FPS游戏制作37 蓝图函数库 自己定义公共方法
笔记·学习·ue5
吴梓穆2 小时前
UE5学习笔记 FPS游戏制作41 世界模式显示UI
笔记·学习·ue5
s_little_monster3 小时前
【Linux】进程信号的捕捉处理
linux·运维·服务器·经验分享·笔记·学习·学习方法
杰克逊的黑豹3 小时前
不再迷茫:Rust, Zig, Go 和 C
c++·rust·go
RedMery3 小时前
论文阅读笔记:Denoising Diffusion Implicit Models (4)
论文阅读·笔记
Source.Liu4 小时前
【学Rust写CAD】28 带 Alpha 通道的双线性插值函数(bilinear_interpolation_alpha.rs)
rust
go_bai4 小时前
Linux环境基础开发工具——(2)vim
linux·开发语言·经验分享·笔记·vim·学习方法