sass的继承，混合宏，占位符的用法总结

SCSS中混合宏使用

@mixin mt($var){
margin-top: $var; 
}

.block {
@include mt(5px);

span {
display:block;
@include mt(5px);
}
}

　　

@extend如何工作

 

  .icon {
            transition: background-color ease .2s;
            margin: 0 .5em;
        }

        .error-icon {
            @extend .icon;
            /*错误图标指定的样式... */
        }

        .info-icon {
            @extend .icon;
            /* 信息图标指定的样式... */
        }

　　sass编译成css

 .icon,
        .error-icon,
        .info-icon {
            transition: background-color ease .2s;
            margin: 0 .5em;
        }

        .error-icon {
            /*错误图标指定的样式... */
        }

        .info-icon {
            /* 信息图标指定的样式... */
        }

　　

使用选择器占位符%placeholder

　　以上代码编译后

   .error-icon,
        .info-icon {
            transition: background-color ease .2s;
            margin: 0 .5em;
        }

        .error-icon {
            /*错误图标指定的样式... */
        }

        .info-icon {
            /* 信息图标指定的样式... */
        }

　　编译出来的CSS代码中将不再包括.icon了。

转载于:https://www.cnblogs.com/moonzwt/p/9794403.html