Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Less Mixin 的骚操作, 减少重复代码 #16

Open
yinxin630 opened this issue Jun 12, 2019 · 0 comments
Open

Less Mixin 的骚操作, 减少重复代码 #16

yinxin630 opened this issue Jun 12, 2019 · 0 comments
Labels

Comments

@yinxin630
Copy link
Owner

想要实现一个换肤功能, 样式如下:

@a: red;
@b: blue;
@c: green;

.skin-a {
  .title {
    color: @a;
  }
  .content {
    color: @a;
  }
}

.skin-b {
  .title {
    color: @b;
  }
  .content {
    color: @b;
  }
}

.skin-c {
  .title {
    color: @c;
  }
  .content {
    color: @c;
  }
}

写起来很冗余是不是? 可以利用 mixin 来简化操作

@a: red;
@b: blue;
@c: green;

.skin(@color) {
  .title {
    color: @color;
  }
  .content {
    color: @color;
  }
}

.skin-a {
  .skin(@a);
}
.skin-b {
  .skin(@b);
}
.skin-c {
  .skin(@c);
}

带括号的 mixin 是不会输出的

参考

https://www.html.cn/doc/less/features/#mixins-feature-not-outputting-the-mixin-

@yinxin630 yinxin630 added the css label Jun 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant