scss CSS片段

Posted 2021-05-17

.grid2x2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 40px);  
  justify-content: center;
  flex-direction: column;
}


.box { margin: 20px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }

//adds 2 borders to each 4 corners of containing div.
@mixin border-corners ($borderColour: white) {
	&:before, 
	&:after, 
	>:first-child:before, 
	>:first-child:after {
	    position:absolute; content:' ';
	    width:80px; 
	    height: 80px;
	    border-color:colour($borderColour); 
	    border-style:solid; 
	}

	&:before {
		top:0;
		left:0;
		border-width: 1px 0 0 1px
	}

	&:after {
		top:0;
		right:0;
		border-width: 1px 1px 0 0
	}

	>:first-child:before {
		bottom:0;
		right:0;
		border-width: 0 1px 1px 0
	}

	>:first-child:after {
		bottom:0;
		left:0;
		border-width: 0 0 1px 1px
	}
}

.container {
  position: relative;
}