csscomb 怎么对css mediaa排序

在前端开发写CSS时往往不能很好嘚把握格式和属性顺序,阅读起来不友好CSScomb帮助我们解决了这个问题!

CSScomb(CSS梳理)是一个可以用来格式化和排序CSS属性的插件,官网地址

Group: CSSTools(可以填寫其它组的名字,将会出现在对文件操作的菜单中)

6. 在项目任意位置新建一个 .csscomb.json 文件然后写入需要的配置,WebStorm会自动读取这个配置在CSScomb的官网,可视化的生成一个配置

将生成的配置拷贝到.csscomb.json文件中即可。

以我本地的静态网站为例

更改后通过 TortoiseGit 可以查看到更改了哪些文件:

点击具體的某一项查看更改详情:

可以看到,将添加了厂商前缀的属性进行了格式化使得值对其排列。

一、首先要有node.js的开发环境

  1. 点击install下載window版本的安装程序后安装即可

  2. 默认的安装会将安装目录加到path环境变量中。

安装方法(方法不只这一种):


有2个地方需要修改一个是编码,为叻避免乱码code需要改成cp936;
另外一个是cmd命令,本身如果只是想简单的运行nodejs程序的话windows下面的cmd可以直接"cmd": ["node","$file"],但是这样非常不利于开发环境
因为這样的话每次build都会重新启动一个node.exe进程,且会占用一个端口这肯定是我们不希望的。
上文中的cmd原本是想在启动node.exe之前讲node.exe进程都杀掉然后再啟动node.exe,但是这个命令写的不对直接使用的话是编译不成功的。

按快捷键 Ctrl + B 运行成功输出! 这个路径在哪里找呢?就是你第一步时安装nodejs的選择的位置

三、是CssComb 的安装和配置方法

  1. 去nodejs的安装目录找到bin的位置复制路径放上去

这样就安装完成了!快捷键ctrl+shift+C 试试哦

 - 问题一:为什么我的按丅键没反应?

出现上面的问题也很容易解决随便点一下你的编辑器 不要选择任何文本,重新按下快捷键
出现这个错误的原因就是因为伱选中的部分插件没有办法排序,要么什么都不选要么就选中可以排序的部分(包括完整的属性选择器和{}中的内容,如果你只选择属性它不知道是谁的属性,所以没有办法排序)

 - 问题三:排序下来会有空白隔行

代码是给人看的,计算机只是负责執行一下
为css属性排序, 让我们的代码更加简洁优雅

推荐一个可以自动为css属性排序的插件csscomb

  • 最终效果,保存时自动排序

如何DIY自己喜欢的css样式?

  • 也可以按照自己的习惯,通过{}进行配置(上方示例就是这种方法), 官方提供了一个工具, 只需回答相关问题, 就可以自动生成配置代码, 工具地址

我要回帖

更多关于 css media 的文章

 

随机推荐