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>
相关推荐
冰帝海岸4 小时前
01-spring security认证笔记
java·笔记·spring
小二·5 小时前
java基础面试题笔记(基础篇)
java·笔记·python
wusong9998 小时前
mongoDB回顾笔记(一)
数据库·笔记·mongodb
猫爪笔记8 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
Resurgence039 小时前
【计组笔记】习题
笔记
pq113_69 小时前
ftdi_sio应用学习笔记 3 - GPIO
笔记·学习·ftdi_sio
爱米的前端小笔记10 小时前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘
寒笙LED12 小时前
C++详细笔记(六)string库
开发语言·c++·笔记
岳不谢13 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
红色的山茶花15 小时前
YOLOv8-ultralytics-8.2.103部分代码阅读笔记-block.py
笔记·深度学习·yolo