今天早上正式开始做前端页面。我们家rocky决定用bootstrap,再用上less稍做改动编译,以适用于本项目。昨天百度了一下less的用法,今天捣鼓了一会儿,仿佛领会到一点了。
暂时来说,我总结适用less有两大好处。
第一,可以使用变量。
我们可以将网站的主色调和辅色调定义为less变量,在样式中使用这些变量。
如果网站的这些色调做出了更改,只需要更改变量值并重新编译css即可。
当然,我们也可以查找这个颜色值替换,不过这样很容易把不应该改的地方也改了。不过还会出现另一种情况,如果有多个地方的颜色值都使用同一个变量,而只有一部分改,变量反而成了麻烦。所以在使用变量前,应先组织好。
可以将不同的颜色值用变量表示,可将颜色分为若干个色系,每个色系的主色调大概给一个等级,以自己方便记忆为宜,例如:
@gray-l1:#BBBBBB;
@gray-l10:#CCCCCC;
@gray-l20:#AAAAAA;
然后再根据使用类型不同来引用这些颜色,同一种颜色可以被多个不同变量引用,例如:
@title:@gray-l10;
@article:@gray-l10;
如果所有引用到@gray-l10颜色的地方都要更改,则更改@gray-l10,否则,逐个变量更改即可,因为已经根据内容来分类,更改时更加灵活。