#### 1.6 占位符%placeholder **注意:开头是以%开始,不是用点号(.)。用占位符%声明的代码,在不被@extend调用的情况下,编译成css时是不会产生任何代码的** 列:scss样式 ~~~ %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } ~~~ 转化成css样式 ~~~ .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } ~~~ **有时占位符不是写在开头,而是写在其他的位置。** 列2 scss样式 ~~~ #meng %long a { color: blue; font-weight: bold; font-size: 2em; } .notice { @extend %long; } ~~~ 转化成css样式 ~~~ #meng .notice a { color: blue; font-weight: bold; font-size: 2em; } ~~~ 列3:scss样式 ~~~ #meng a %long { color: blue; font-weight: bold; font-size: 2em; } .notice { @extend %long; //转化成则是把上面的%long换成.notice } ~~~ 转化成css样式 ~~~ #meng a .notice { color: blue; font-weight: bold; font-size: 2em; } ~~~