10分鐘學會Less開發環境搭建與初體驗

2022-01-16 09:26:46 字數 1272 閱讀 8588

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數、混合(mixin)、函式等功能,讓 css 更易維護、方便製作主題、擴充。

今天看一下,10分鐘能不能手把手快速教會你less環境搭建以及使用入門。

less環境搭建:

1)、安裝nodejs。開啟命令提示符(win+r),分別輸入node -v以及npm -v如果返回版本號說明你安裝成功了

2)、安裝less。在「命令提示符」下執行命令「npm install less -g」

3)、配置webstorm,點選「file」> "settings" 彈出設定介面,在左側導

航找到「tool">"file watchers" 點選「+」號按鈕找到less檔案選項點選新增。

4、配置less

programs:c:\program files\nodejs\lessc.cmd

arguments,--no-color--source-map=$filenamewithoutextension$.css.map $filename$

outputpaths to refresh

$filenamewithoutextension$.css:$filenamewithoutextension$.css.map

less使用示例:

1、檔案結構

4、less生成的css

對你有幫助,感謝推薦:)

10分鐘 深入less

三種方式引用less 瀏覽器引用 less.js link type text lesss node中使用 工程中使用 變數 key value在js中,條件語句中 可以使用 if,else,switch定義,less中語句中跟switch中case比較像。less 沒有像js中這樣的關鍵字,但是也...

10分鐘學會Google Map API

前幾天玩了玩google的map api,感覺還不錯,很簡單。但凡有過任何程式設計經驗的同學,看完以下的教程,都可以在10分鐘內掌握它的主要功能。另外我還做了個簡單的小例子,有興趣的話,請參見 第一步 去 申請乙個keyid 第二步 在html的之間加上對mapapi函式庫的引用,第三步 在html...

十分鐘學會less

譯者 wleonardo 我們都知道在大型的專案中,當css有數千行 的時候,css的編寫有一些麻煩。我們經常會出現複製相同的 到不同的地方或者通過我們的編輯器來替換所有相同的顏色。這需要我們費很大的力氣去保持css的可維護性。但是其實我們並不是一定要這樣。幸運的是,web開發社群已經解決了這個問題...