来问项目-less文件的组织

    今天早上正式开始做前端页面。我们家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,否则,逐个变量更改即可,因为已经根据内容来分类,更改时更加灵活。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章