Less-命名空间和循环的使用

也是因为项目中写到了 less，之前没有太多需要用到太多 less 语法的地方，也就是最基本的嵌套语法的使用，由于这次写到了很多重复的代码,，考虑到代码的精简性，打算用 less 语法重构一下，于是就有了这篇文章。我们先看看最初的代码。我们忽略图片中的汉字名字，这是不好的做法...这个不是重点。

@images: '../../../../assets/hipsQuestionaire';
.singleBtn {
    padding-left: 30px !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    background-position: 10px center !important;
    background-image: url('@{images}/单选-未选中@2x.png');
    &:hover {
      background-image: url('@{images}/单选-选中@2x.png');
    }
    &:focus {
      background-image: url('@{images}/单选-选中@2x.png');
    }
  }
  .multipleBtn {
    padding-left: 30px !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    background-position: 10px center !important;
    background-image: url('@{images}/多选-未选中@2x.png');
    &:hover {
      background-image: url('@{images}/多选-选中@2x.png');
    }
    &:focus {
      background-image: url('@{images}/多选-选中@2x.png');
    }
  }

当时的业务场景是页面上有多个按钮，鼠标移上按钮和点击按钮时，切换背景图片，我只列出了两个按钮的代码，实际情况是，这样的按钮至少有10多个，可以想象，重复代码会有多少，虽然写代码不过是复制粘贴的事情，但如果某一天你需要去修改样式... ...,嗯，会增加很多不必要的工作量。

使用命名空间

我们先用命名空间进行将公共的样式抽取出来.

#questionaireSurveyContentPublic {
  // 有图标按钮的公共样式
  .buttonHasIcon {
    padding-left: 30px !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    background-position: 10px center !important;
  }
}
.singleBtn {
    #questionaireSurveyContentPublic > .buttonHasIcon;
    background-image: url('@{images}/单选-未选中@2x.png');
    &:hover {
      background-image: url('@{images}/单选-选中@2x.png');
    }
    &:focus {
      background-image: url('@{images}/单选-选中@2x.png');
    }
  }
  .multipleBtn {
    #questionaireSurveyContentPublic > .buttonHasIcon;
    background-image: url('@{images}/多选-未选中@2x.png');
    &:hover {
      background-image: url('@{images}/多选-选中@2x.png');
    }
    &:focus {
      background-image: url('@{images}/多选-选中@2x.png');
    }
  }

这样就精简了一部分,看起来顺眼了那么一点, 然后接下来我们进一步精简它。

使用循环

为了方便循环，我们先将图片的名字都改成下面的样子

#questionaireSurveyContentPublic {
  // 有图标按钮的公共样式
  .buttonHasIcon {
    padding-left: 30px !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    background-position: 10px center !important;
  }
}
.singleBtn {
    #questionaireSurveyContentPublic > .buttonHasIcon;
    background-image: url('@{images}/single_unselect.png');
    &:hover {
      background-image: url('@{images}/single_select.png');
    }
    &:focus {
      background-image: url('@{images}/single_select.png');
    }
  }
.multipleBtn {
    #questionaireSurveyContentPublic > .buttonHasIcon;
    background-image: url('@{images}/multiple_unselect.png');
    &:hover {
      background-image: url('@{images}/multiple_select.png');
    }
    &:focus {
      background-image: url('@{images}/multiple_select.png');
    }
  }

我们现将能按钮的类型名称定义成一个数组,这样以后需要添加按钮的时候,只需要往这个数组变量里面添加新的类型就行了, 而不需要再去写重复的代码.

@btnTypes: single, multiple;

#questionaireSurveyContentPublic {
  // 有图标按钮的公共样式
  .buttonHasIcon {
    padding-left: 30px !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    background-position: 10px center !important;
  }
}
// 循环的定义
.backgrounds(@list, @i: 1) when (@i <= length(@list)) {
  // extract the right color from the list
  @type: extract(@list, @i);
  // apply the background to the selector
  .@{type}Btn {
    #questionaireSurveyContentPublic > .buttonHasIcon;
    background-image: url('@{images}/@{type}-unselected.png');
    &:hover {
      background-image: url('@{images}/@{type}-selected.png');
    }
    &:focus {
      background-image: url('@{images}/@{type}-selected.png');
    }
  }
  // 回调
  .backgrounds(@list, @i + 1);
}

这样看效果也许不太明显，但按钮很多的时候，就能看出精简了，嗯！是我们想要的效果！less语法还有很多详细的知识，还需要继续学习。以后有新的进展再补充。