sass的@mixin用法

原创于 2019-07-04 11:34:41 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass的@mixin用法

html+css 专栏收录该内容

29 篇文章

订阅专栏

本文深入探讨了SCSS中的Mixins模块，包括无参和带参Mixins的定义及使用方法，通过实例展示了如何利用Mixins实现代码复用和模块化，提高前端开发效率。

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

定义Mixins模块

/* 固定定位下居中 */
@mixin pfb {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateZ(0);
}


使用
.navtap{
 @include pfb; 
}

定义带参数的Mixins模块

/* 宽高 */
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

使用

div{
@include wh(100%,100px);
}