設定を部品化して組み込んでいくためのミックスイン

クラス

共通部分をクラスとして部品化
▼/styles.less

// minxin



.my-mixin{

	border: 5px solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin();

}

▼/styles.css

.my-mixin {

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h1 {

  font-size: 24px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

---

id

共通部分をidとして部品化
▼/styles.less

// minxin



#my-mixin{

	border: 5px solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	#my-mixin;

}

h2{

	font-size: 18px;

	#my-mixin();

}

▼/styles.css

#my-mixin {

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h1 {

  font-size: 24px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

---

設定非表示

コメントアウトとは異なり、設定自体は反映されるが、自身は非表示
▼/styles.less

// minxin



.my-mixin(){

	border: 5px solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin();

}

▼/styles.css

h1 {

  font-size: 24px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}