webstorm，scss转换成css

1、webstorm监听scss

File =>> setting =>>Tools =>> File Watchers =>> +scss

1)Program:

Ruby安装位置C:\Ruby26-x64\bin\sass.bat

$FileParentDir表示的是scss文件所在的文件夹的父级文件夹
2)Arguments:

可以选择压缩方式
–no-cache –update -t compressed $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

无压缩方式
–no-cache –update –sourcemap –watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

3)Output paths to refresh:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

4)其他注意事项

@charset “UTF-8”; ?//记得添加这句使得支持中文

// 宽度百分比的书写方式
@each $percent in 5, 10, 15, 20, 25{
????.percent-#{$percent}{width: $percent * 1%};
}

2、监听css/js文件生成压缩文件

File =>> setting =>>Tools =>> File Watchers =>> +YUI Compressor CSS/YUI Compressor JS =>>Programs选择下载的yui compressor 的jar包的路径，其他默认不改

香港vps

30179866