sass笔记

灰太狼大王灬

已于 2023-09-13 13:51:01 修改

阅读量751

点赞数

文章标签： sass 笔记 rust

于 2023-08-17 10:16:45 首次发布

本文链接：https://blog.csdn.net/regretTAT/article/details/132334855

版权

本文详细介绍了在CSS中使用Vue类似的语法，如声明变量、mixin函数、include调用、继承以及导入，通过实例展示了如何在模板中应用这些功能并展示了实际效果。

摘要由CSDN通过智能技术生成

用法说说明

声明变量通过$标识符进行命名及引用
混合器类似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>