scss 模块命名mixins

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 模块命名mixins相关的知识，希望对你有一定的参考价值。

.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;
	}
}

以上是关于scss 模块命名mixins的主要内容，如果未能解决你的问题，请参考以下文章