scss 创建响应方块

Posted 2021-05-17

<div class="square">
	<span>Lorem ipsum</span>
</div>

.square {
	width: 100%;
	
	&.option_1 {
		height: 0;
		padding-bottom: 100%;
	}
	
	&.option_2 {
		position: relative;
		
		&:after {
		    content: "";
		    display: block;
		    padding-bottom: 100%;
		}
		
		.content {
			position: absolute;
		    height: 100%;
		    width: 100%;
		}
	}
}