用法说说明
- 声明变量 通过$标识符进行命名及引用
- 混合器 类似vue中的函数 通过 @mixin标识定义 @include 标识调用
- & 父选择器标识
- @extend 进行继承
- 可嵌套
- 可导入 通过 @import '文件位置’ 、进行导入
用法
<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>
效果文章来源：https://www.toymoban.com/news/detail-657086.html
文章来源地址https://www.toymoban.com/news/detail-657086.html
到了这里，关于sass笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
