css编译工具Sass中混合宏，继承，占位符分别在什么时候使用_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css编译工具Sass中混合宏，继承，占位符分别在什么时候使用_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2113字，纯文字阅读大概需要4分钟。

内容图文

//SCSS中混合宏使用@mixin mt($var){  margin-top: $var;  }.block {  @include mt(5px);  span {    display:block;    @include mt(5px);  }}.header {  color: orange;  @include mt(5px);  span{    display:block;    @include mt(5px);  }}

1、上面是sass混合宏方法编写的sass代码，下面是编译出来的css代码

.block {  margin-top: 5px;}.block span {  display: block;  margin-top: 5px;}.header {  color: orange;  margin-top: 5px;}.header span {  display: block;  margin-top: 5px;}

上面代码中可以看出，sass混合宏编写不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是无法忍受的一件事情。不过他并不是一无事处，他可以传参数；比如

@mixin br($rad){    border-radius:$rad;    -webkit-border-radius:$rad;    -moz-border-radius:$rad;    -ms-border-radius:$rad;}.md{    @include br(20px);}

2、下面是Sass中的继承

//SCSS 继承的运用.mt{  margin-top: 5px;  }.block {  @extend .mt;  span {    display:block;    @extend .mt;  }}.header {  color: orange;  @extend .mt;  span{    display:block;    @extend .mt;  }}

下面是编译出来的css代码

.mt, .block, .block span, .header, .header span {  margin-top: 5px;}.block span {  display: block;}.header {  color: orange;}.header span {  display: block;}

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是我们期望看到。但是他不能传变量参数。所以如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

3、占位符

%mt{  margin-top: 5px;  }.block {  @extend %mt;  span {    display:block;    @extend %mt;  }}.header {  color: orange;  @extend %mt;  span{    display:block;    @extend %mt;  }}

占位符编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

内容总结

以上是互联网集市为您收集整理的css编译工具Sass中混合宏，继承，占位符分别在什么时候使用_html/css_WEB-ITnose全部内容，希望文章能够帮你解决css编译工具Sass中混合宏，继承，占位符分别在什么时候使用_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端