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>
相关推荐
红尘散仙13 分钟前
四、WebGPU 基础入门——Uniform 缓冲区与内存对齐
前端·rust·gpu
宁酱醇1 小时前
各种各样的bug合集
开发语言·笔记·python·gitlab·bug
DKPT1 小时前
正则表达式
java·数据库·笔记·学习·正则表达式
zhuyixiangyyds2 小时前
day36图像处理OpenCV
图像处理·笔记·学习
Mr__Miss2 小时前
JVM学习笔记
jvm·笔记·学习
freexyn2 小时前
Matlab自学笔记五十一:(推荐)输入参数的数量和可变数量的输入
笔记·算法·matlab
灏瀚星空3 小时前
从单机工具到协同平台:开源交互式模拟环境的技术演进之路
经验分享·笔记·python·开源·oneapi
我的golang之路果然有问题3 小时前
给git配置SSH(github,gitee)
经验分享·笔记·git·学习·gitee·ssh·github
大卫小东(Sheldon)3 小时前
魔方求解器桌面版(层先法,基于Tauri实现)
rust
MrsBaek3 小时前
前端笔记-Axios
前端·笔记