SASS第六篇混合

最新推荐文章于 2024-08-29 08:58:34 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-08-29 08:58:34 发布

阅读量492

点赞数

分类专栏： SASS

本文链接：https://blog.csdn.net/qq_37805832/article/details/107829478

版权

SASS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
	</title>
	<style>
		/* SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
    SASS中混合调用: @include 混合名称; 或者 @include 混合名称();*/
    /*@mixin center()
    {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    .father
    {
    	width: 300px;
    	height: 300px;
    	background: red;
    	@include center();//混合的在这里显示的名称
    	.son
    	{
    		width: 200px;
    		height: 200px;
    		background: blue;
    		@include center();//混合的在这里显示的名称
    	}
    }*/
   /*编译后的css文件*/
   .father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
	</style>
</head>
<body>
	<div class="father"><div class="son"></div>	</div>
</body>
</html>