也是因为项目中写到了 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语法还有很多详细的知识，还需要继续学习。以后有新的进展再补充。
