scss 模块命名mixins

Posted 2021-05-18

.foo {
  margin: auto;
}

.foo--bar {
  padding: 20px;
}
  
.foo--baz {
  padding: 50px;
}
  
@media screen and (min-width: 46.875em) {
  .foo--baz {
    padding: 20px;
  }
}

.foo.is-active {
  background-color: green;
}

@include component('foo') {
	margin: auto;

	@include modifier('bar') {
		padding: 20px;
	}

	@include modifier('baz') {
		padding: 50px;

		@include respond-min($bp-single-col) {
			padding: 20px;
		}
	}

	@include state('active') {
		background-color: green;
	}
}