css中的mixin及其用法

最新推荐文章于 2024-09-03 20:18:13 发布

原创最新推荐文章于 2024-09-03 20:18:13 发布 · 1.6w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#mixin #css #scss #less

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS预处理语言中mixin的概念及用法，通过一个具体示例详细展示了如何定义和使用mixin来提高代码复用性和简洁性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、mixin是什么？

@mixin是一种简化代码的方法，能够提高代码的重复使用率。

二、mixin的用法

mixin定义（使用@mixin定义）：

@mixin hexagon-generator($hexagon-width, $factor, $border-radius){
  display: inline-block;
  border-radius: 50%;
  width: ($hexagon-width + $border-radius) * $factor;
  height: ($hexagon-width + $border-radius) * $factor;
  display: flex;
  align-items: center;
  justify-content: center;
}

mixin使用（使用@include引用）：

.hexagon-shape {
    @include hexagon-generator(88rpx, 1, 8rpx);
}

编译后的css：

.hexagon-shape {
    display: inline-block;
    border-radius: 50%;
    width: (88rpx + 8rpx) * 1;
    height: (88rpx + 8rpx) * 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

css中的mixin，其实是less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用。