來問項目-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,否則,逐個變量更改即可,因爲已經根據內容來分類,更改時更加靈活。

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