scss WordPress Gutenberg专栏SCSS样式

Posted 2021-05-17

@import "breakpoints"; // for bp mixin see https://snippets.cacher.io/snippet/fc10ef4581746c8e4b96
$margin-right: 4.7619%; /* this is % equiv of 40px/2.5rem, but it could be anything. */

.wp-block-columns {
	$wrap: &;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	margin:0 -#{$margin-right} 0 0;
	
	.wp-block-column {
		$col: &;
		margin:0 0 0 0;
		margin-right: $margin-right;
		flex-grow:1;
		
		@at-root .has-2-columns#{&} {
			@include bp(tablet) {
				width:50%;
				max-width: calc(50% - #{$margin-right});	
			}
		}

		@at-root .has-3-columns#{&} {
			@include bp(tablet) {
				width:33.333%;
				max-width: calc(33.333% - #{$margin-right});	
			}
		}

		@at-root .has-4-columns#{&} {
			@include bp(phablet) {
				width:50%;
				max-width: calc(50% - #{$margin-right});
			}
			@include bp(tablet) {
				width:25%;
				max-width: calc(25% - #{$margin-right});
			}
		}
		@at-root .has-5-columns#{&} {
			@include bp(phablet) {
				width:50%;
				max-width: calc(50% - #{$margin-right});
			}
			@include bp(tablet) {
				width:20%;
				max-width: calc(20% - #{$margin-right});
			}
		}
		@at-root .has-6-columns#{&} {
			@include bp(phablet) {
				width:50%;
				margin-right : $margin-right;
				max-width: calc(50% - #{$margin-right});
			}
			@include bp(tablet) {
				width:25%;
				margin-right : $margin-right;
				max-width: calc(16.666% - #{$margin-right});
			}
		}
	}
}