scss 混合指令@mixin与@include的使用

最新推荐文章于 2025-06-15 18:27:52 发布

Strive-x

最新推荐文章于 2025-06-15 18:27:52 发布

阅读量943

点赞数 9

CC 4.0 BY-SA版权

文章标签： scss 前端 css

本文链接：https://blog.csdn.net/2301_76742166/article/details/136212145

这篇文章介绍了如何在SCSS中使用mixins来实现居中对齐（flex-center）和等间距布局（flex-row-col），展示了在`.body_content`选择器中应用这些混合样式的代码示例。

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

<style scoped lang="scss">
	@mixin flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	@mixin flex-row-col{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
    // 利用@include混入@mixin写的样式
	.body_content {
		@include flex-row-col;
	}
</style>