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 分钟前
【计算机组成原理】-CPU章节学习篇—笔记随笔
笔记·单片机·学习·考研·计算机组成原理
岑梓铭2 小时前
计算机网络第九章——数据链路层《局域网》
网络·笔记·计算机网络·考研·408
njsgcs3 小时前
cad_recognition 笔记
笔记
HXR_plume5 小时前
【计算机网络】王道考研笔记整理(1)计算机网络体系结构
网络·笔记·计算机网络
笑鸿的学习笔记5 小时前
qt-C++语法笔记之Stretch与Spacer的关系分析
c++·笔记·qt
巴伦是只猫6 小时前
【机器学习笔记Ⅰ】3 代价函数
人工智能·笔记·机器学习
ZZZS05166 小时前
stack栈练习
c++·笔记·学习·算法·动态规划
Bruce_Json7 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
AI视觉网奇8 小时前
rag学习笔记
笔记·学习
teeeeeeemo10 小时前
http和https的区别
开发语言·网络·笔记·网络协议·http·https