Webstorm中使用less編寫css

less中文網：點我

less.bootcss：點我

使用方法

1 . 安裝less

npm install -g less

2 . 新建HTML文件和Less文件

• 新建Less文件的方法
  • 創建新文件
    
  • 選擇Less File
    

創建后：

3 . 編寫HTML代碼和Less代碼

使用Less中文網的快速入門中的例子
Less文件：

代碼：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

HTML文件：

4 . 寫好后在Less文件當前目錄下執行編譯(cmd)

代碼

lessc less文件名.less > 你想要的css文件名.css

5 . 掛載css文件到HTML中

編譯后的文件

掛載css到HTML