不要盲目的在專案中使用LESS CSS

2021-09-22 06:17:42 字數 1901 閱讀 8776

如果你還不知道less css是什麼東西,可以看一下這篇文章,是我一朋友寫給新人看的《css——less》

不可否認,less css是個強大的工具,它彌補了css沒有變數、無法運算等一些「先天缺陷」,但它似乎給我一種錯覺,就是為了功能而實現功能

比如它的引用功能

.rounded_corners

#header

#footer

最終編譯後會生成如下**

.rounded_corners

#header

#footer

它似乎彌補上了css的乙個缺陷,但我並沒發現他這樣做的目的是什麼,我完全可以直接這樣一段

.rounded_corners

然後頁面哪需要圓角,直接加上class="rounded_corners",當然,它的引用是可以設定引數的,比如這樣

.margin10(@size:10px)

.test

似乎很高階的樣子,引數可以控制,減少了重複**的書寫,但是否實用呢?我拿之前專案裡的樣式比較了下,發現能拎出來,通過引數設定具體樣式的幾乎沒有,只有幾個css3的屬性用這個功能還是比較ok,比如這段陰影樣式

.box-shadow(@arguments)

因為只要是陰影,就少不了這三句,類似的還有圓角、透明等,就不一一枚舉了。

然後,說說最基本的變數吧,我就一直沒想通css要變數有什麼用

@w100:100px;

@h100:100px;

div

可能會說,我定義好乙個變數,在不同的地方都可以直接呼叫,如果要修改,只需修改一次。但問題是,萬一我只想改其中乙個的樣式,另乙個別動,或者就是兩個同時都需要修改。

就比如我乙個頁面裡有2塊廣告區域,原先寬高是一樣的,現在我要其中乙個區域變大,另乙個變小,這樣我反而覺得定義變數增多了我的工作量。

可能又會說,less css不是支援四則運算嘛,對,我們可以這樣子

@w100:100px;

@h100:100px;

div

甚至還可以更2b青年一點

@w100:100px;

@h100:100px;

div

less css裡的計算功能就像變數一樣讓我無法理解,別忘了,less css是要編譯過你寫的.less檔案的,最終生成的還是標準的css**。換句話說,就是你再怎麼定義變數,再怎麼計算,最終它生成的還是乙個固定的數值,幫我們減少的只是計算這個數值的時間,但我覺得我花時間去寫個運算,還不如心算一下。

當然了,less css也並非一無是處,它的巢狀功能就讓我眼前一亮

通常我們要給上面這三個div寫樣式,無非用2種方法,一種就是定義class/id,一種就是給最外層定義個class/id,然後用繼承去寫。而less css給了我們一種友好閱讀的方式

.test

/*巢狀*/

.test1

} .test1:hover

}

相信這樣的樣式要查詢起來,都會比較輕鬆,哪一層套哪一層都一清二楚,這是我感覺它很贊的功能。

總的來說,less css不是很適合用在專案中,它更適用於**、模板等整體框架固定死的**製作,比如論壇、空間。所以大家在使用less css請先考慮下這個工具是否適用,別盲目的使用,不但效率沒提高,還增加了不必要的工作量。

不要盲目的在專案中使用LESS CSS

如果你還不知道less css是什麼東西,可以看一下這篇文章,是我一朋友寫給新人看的 css less 不可否認,less css是個強大的工具,它彌補了css沒有變數 無法運算等一些 先天缺陷 但它似乎給我一種錯覺,就是為了功能而實現功能。比如它的引用功能?rounded corners head...

不要盲目的在專案中使用LESS CSS

如果你還不知道less css是什麼東西,可以看一下這篇文章,是我一朋友寫給新人看的 css less 不可否認,less css是個強大的工具,它彌補了css沒有變數 無法運算等一些 先天缺陷 但它似乎給我一種錯覺,就是為了功能而實現功能。比如它的引用功能 rounded corners head...

vue專案中使用less正確姿勢

本人在vue專案中引入less外掛程式,但是在使用webpack打包專案的時候發生了報錯 typeerror this.getoptions is not a function,接下來給大家提供乙個解決辦法 因為我們安裝的less 版本過高導致的這個問題,具體原因是 less 8.x版本 更新了配置...