Web/Css 预处理语言的 Less 的使用 04

2021 年 12 月 12 日
本文字数：1472 字
阅读完需：约 5 分钟

loop 循环

通过 Loop，可以设置递归次数，循环调用

// 编译前.loop(@counter) when (@counter > 0) {  .loop((@counter - 1));    // next iteration  width: (10px * @counter); // code for each iteration}

div {  .loop(5); // launch the loop}

// 编译后div {  width: 10px;  width: 20px;  width: 30px;  width: 40px;  width: 50px;}

复制代码

// 编译前.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {  .column-@{i} {    width: (@i * 100% / @n);  }  .generate-columns(@n, (@i + 1));}

// 编译后.column-1 {  width: 25%;}.column-2 {  width: 50%;}.column-3 {  width: 75%;}.column-4 {  width: 100%;}

复制代码

Merge 合并

通过 + 或者 +- 将不同位置的两个相同属性名的语句，可以进行合并

+ 符号合并后，会通过 , 进行分割

+- 符号合并后，会通过 space 空格进行分割

// 编译前.mixin() {  // 通过+号标记合并  box-shadow+: inset 0 0 10px #555;}.myclass {  .mixin();  // 通过+号标记合并  box-shadow+: 0 0 20px black;}

// 编译后.myclass {  box-shadow: inset 0 0 10px #555, 0 0 20px black;}

复制代码

Selectors 符号

&: 符号(生成伪类选择器）

// 编译前a {  color: blue;  &:hover {    color: green;  }}// 编译后a {  color: blue;}



a:hover {  color: green;

复制代码

&- : 符号（类名链接）

// 编译前.button {  &-ok {    background-image: url("ok.png");  }  &-cancel {    background-image: url("cancel.png");  }

  &-custom {    background-image: url("custom.png");  }}// 编译后.button-ok {  background-image: url("ok.png");}.button-cancel {  background-image: url("cancel.png");}.button-custom {  background-image: url("custom.png");}

复制代码

&& 多种变换

// 编译前.link {  & + & {    color: red;  }

  & & {    color: green;  }

  && {    color: blue;  }

  &, &ish {    color: cyan;  }}

//  编译后.link + .link {  color: red;}.link .link {  color:green;}.link.link {  color:blue;}.link, .linkish {  color: cyan;}

复制代码

// 编译前// 父子嵌套.grand {  .parent {    & > & {      color: red;    }
    & & {      color: green;    }
    && {      color: blue;    }
    &, &ish {      color: cyan;    }  }}// 编译后.grand .parent > .grand .parent {  color: red;}.grand .parent .grand .parent {  color: green;}.grand .parent.grand .parent {  color: blue;}.grand .parent,.grand .parentish {  color: cyan;}

复制代码

& 改变选择器的顺序

// 编译前.header {  .menu {    border-radius: 5px;    // 通过在.no-borderraidus 加入& 符号    .no-borderradius & {      background-image: url('images/button-background.png');    }  }}

// 编译后.header .menu {  border-radius: 5px;}

.no-borderradius .header .menu {  background-image: url('images/button-background.png');}

复制代码

& +& 相邻选择组合

// 编译前p, a, ul, li {  border-top: 2px dotted #366;  & + & {    border-top: 0;  }}

// 编译后p,a,ul,li {  border-top: 2px dotted #366;}p + p,p + a,p + ul,p + li,a + p,a + a,a + ul,a + li,ul + p,ul + a,ul + ul,ul + li,li + p,li + a,li + ul,li + li {  border-top: 0;}

复制代码

发布于: 3 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/13b0d404a7cc69b39b9d15f74】。未经作者许可，禁止转载。

Jeannette

关注

一位小码农…… 2019.07.19 加入

科学技术是第一生产力

发布

暂无评论

创作场景

Web/Css 预处理语言的 Less 的使用 04

loop 循环

Merge 合并

Selectors 符号

&: 符号(生成伪类选择器）

&- : 符号（类名链接）

&& 多种变换

& +& 相邻选择组合

Jeannette

评论