在編寫css代碼時傻咖,使用less能提高我們編程得效率。
Less 是一門 CSS 預處理語言券敌,它擴充了 CSS 語言唾戚,增加了諸如變量、混合(mixin)待诅、函數(shù)等功能叹坦,讓 CSS 更易維護、方便制作主題卑雁、擴充募书。Less 可以運行在 Node 或瀏覽器端。
那么如何在webstorm上使用less且能夠自動生成更新css代碼呢测蹲?我記錄一下
第一步:安裝koala軟件
koala這個由國人編寫的锐膜,用于編譯sass、less弛房、coffee利器,在最近的短短幾個月曝光率不亞 于任何其他的技術而柑。
網盤鏈接:https://pan.baidu.com/s/1kEzI7DtO1JbK4JEdD2RYdw
提取碼:cnbn
安裝:
一直next就好了
第二步:新建一個less文件文捶,寫入代碼
第三步,打開koala媒咳,點擊+號粹排,選擇less所在文件目錄
點擊想要轉換得less文件,注:右邊要勾選autoprefix選項涩澡,不然css文件無法與less文件自動同步
如果有css文件夾顽耳,less轉化時css文件的位置默認在css目錄下,沒有的話跟less文件同一目錄
最后,在HTML代碼里導入less轉換得css文件射富,再運行
<link href="css/first.css" rel="stylesheet">
工作到這里就完成了膝迎。