在編寫css代碼時,使用less能提升咱們編程得效率。
Less 是一門 CSS 預處理語言,它擴充了 CSS 語言,增長了諸如變量、混合(mixin)、函數等功能,讓 CSS 更易維護、方便製做主題、擴充。Less 能夠運行在 Node 或瀏覽器端。
那麼如何在webstorm上使用less且可以自動生成更新css代碼呢?我記錄一下
第一步:安裝koala軟件
koala這個由國人編寫的,用於編譯sass、less、coffee利器,在最近的短短几個月曝光率不亞 於任何其餘的技術。
網盤連接:https://pan.baidu.com/s/1kEzI7DtO1JbK4JEdD2RYdw
提取碼:cnbn
安裝:css
一直next就行了
第二步:新建一個less文件,寫入代碼
web
第三步,打開koala,點擊+號,選擇less所在文件目錄
點擊想要轉換得less文件,注:右邊要勾選autoprefix選項,否則css文件沒法與less文件自動同步
若是有css文件夾,less轉化時css文件的位置默認在css目錄下,沒有的話跟less文件同一目錄
最後,在HTML代碼裏導入less轉換得css文件,再運行編程
<link href="css/first.css" rel="stylesheet">
工做到這裏就完成了。瀏覽器