less-Variable Interpolation（变量插值）

￡神魔★判官ぃ 2022-06-14 10:23 339阅读 0赞

1、选择器

  1. 编辑less：
  3. // Variables
  4. @my-selector: banner;
  6. // Usage
  7. .@{ my-selector} {
  8.   font-weight: bold;
  9.   line-height: 40px;
  10.   margin: 0 auto;
  11. }
  13. 输出css：
  15. .banner { font-weight: bold; line-height: 40px; margin: 0 auto; }

2、URL

  1. 编辑less：
  3. // Variables
  4. @images: "../img";
  6. // Usage
  7. body {
  8.   color: #444;
  9.   background: url("@{images}/white-sand.png");
  10. }
  12. 输出css：
  14. body { color: #444; background: url("../img/white-sand.png"); }

3、导入语句

  1. 编辑less：
  3. // Variables
  4. @themes: "../../src/themes";
  6. // Usage
  7. @import "@{themes}/tidal-wave.less";

4、属性

  1. 编辑less：
  3. @property: color;
  5. .widget {
  6.   @{ property}: #0ee;
  7.   background-@{ property}: #999;
  8. }
  10. 生成css：
  12. .widget { color: #0ee; background-color: #999; }

5、变量名

  1. 编辑less：
  3. @fnord: "I am fnord.";
  4. @var: "fnord";
  6. .contain:after{ content: @@var; }
  8. 生成css：
  10. .contain:after { content: "I am fnord."; }

发表评论

表情：
评论列表 （有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读