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>
相关推荐
努力变厉害的小超超2 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
aloha_7896 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
hikktn7 小时前
如何在 Rust 中实现内存安全:与 C/C++ 的对比分析
c语言·安全·rust
睡觉谁叫~~~7 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
音徽编程7 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
dsywws7 小时前
Linux学习笔记之vim入门
linux·笔记·学习
A-超9 小时前
vue3展示pag格式动态图
笔记
u01015265810 小时前
STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器
笔记·stm32·学习
weixin_5182850510 小时前
深度学习笔记10-多分类
人工智能·笔记·深度学习
丘狸尾10 小时前
ubuntu【桌面】 配置NAT模式固定IP
笔记