一些CSS模版

兄弟元素间设置行间距

.block:not(:last-child){
	margin-bottom: 1.5rem;
}

白色盒子带内填充和边框阴影

.box {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
}

包裹容器

/* Less */
.wapper-parent {
	position: relative;
	.wapper {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
}

内外边距简写

/* Scss */
$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
$spacing-horizontal: "x" !default;
$spacing-vertical: "y" !default;
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;

@each $property, $shortcut in $spacing-shortcuts {
	@each $name, $value in $spacing-values {
		//所有方向
		.#{$shortcut}-#{$name} {
			#{$property}: $value !important
		}
		//四个方向
		@each $direction, $suffix in $spacing-directions {
			.#{$shortcut}#{$suffix}-#{$name} {
				#{$property}-#{$direction}: $value !important
			}
		}
		//左右方向
		.#{$shortcut}#{$spacing-horizontal}-#{$name} {
			#{$property}-left: $value !important;
			#{$property}-right: $value !important;
		}
		//上下方向
		.#{$shortcut}#{$spacing-vertical}-#{$name} {
			#{$property}-top: $value !important;
			#{$property}-bottom: $value !important;
		}
	}
}

面包屑

/* Less */
ul.breadcrumb {
    padding-left: 0;
	list-style: none;
    user-select: none;
	&>li {
	    display: inline;
	}
	&>li>a {
	    text-decoration: none;
	}
	&>li:not(:last-child)::after {
	    display: inline;
	    content: "/";
	    padding: 0 .4rem;
	}
}

浮动小工具

/* Less */
.clear{
	margin: 0;
	padding: 0;
	overflow: hidden;
	zoom: 1;
	.float-left{
		float: left;
	}
	.float-right{
		float: right;
	}
}

标签：10,模版,spacing,value,important,rem,一些,property,CSS
来源： https://blog.csdn.net/qq_37284843/article/details/122275349