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>
相关推荐
寻月隐君1 小时前
告别 Vec!掌握 Rust bytes 库,解锁零拷贝的真正威力
后端·rust·github
山野万里__1 小时前
C++与Java内存共享技术:跨平台与跨语言实现指南
android·java·c++·笔记
寻丶幽风3 小时前
论文阅读笔记——VGGT: Visual Geometry Grounded Transformer
论文阅读·笔记·transformer·三维重建·3dgs·vggt
天水幼麟4 小时前
python学习笔记(深度学习)
笔记·python·学习
you45804 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
笑衬人心。4 小时前
初学Spring AI 笔记
人工智能·笔记·spring
UQI-LIUWJ5 小时前
计算机组成笔记:缓存替换算法
笔记·缓存
DKPT5 小时前
Java设计模式之结构型模式(外观模式)介绍与说明
java·开发语言·笔记·学习·设计模式
编程小白gogogo5 小时前
Spring学习笔记
笔记·学习·spring
qq_527887875 小时前
【学习笔记】Python中主函数调用的方式
笔记·学习