sublime必备:less2css,sass2css,开启服务器,浏览器预览,px2rem,etc...

大致快5月份开始用sublime , 因为上面的讲师说，北上广大多用的都是sublime，其实之前用的是hbuilder，既然上面有需求，所以就花了半天时间学了一下，发现挺好用，也把这些研发到了当时的课件里面，后来越来越看不上别的编辑器了，在此，把我这半年下的好用的神器或者插件分享与大家：

• emmet,
• sublimecodeIntel,
• autofilename
• colorpicker
• less,
• colorhighighter（高亮颜色）
• silderEnhancements（增强侧边栏菜单）
• sublimeServer（开启本地服务器）
• livereload(需要配合谷歌浏览器，安装livereload扩展程序)
  
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}

  有人说不能生效，是因为在Sublime Text里没有启动LiveReload，每次重新打开Sublime都需要启动，启动方法：Ctrl+Shift+P ==> LiveReload ==> enable/disable plug-ins ==> simple reload即可
• html5
• brackethighlighter

• 自带的代码对齐

  {"keys": ["ctrl+shift+r"], "command": "reindent" , "args":
  {"single_line": false}}

  • 格式化/压缩css,js,svg,html
    
    1. node安装：
       npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo
    2. pci-输入Minify,安装。
    3. 用法
       用sublime打开一个 .css or .htm or .html or .js or .json or .svg 文件
       使用ctrl + alt + m 压缩文件
       使用ctrl + alt + shift + m 格式化文件

• openinbrower:

  { "keys": ["f12"], "command": "side_bar_files_open_with",
  "args": {
  "paths": [],
  "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
  "extensions":".*" //any file with extension
  } },
  { "keys": ["ctrl+f12"], "command": "side_bar_files_open_with",
  "args": {
  "paths": [],
  "application": "D:\\firefox.exe",
  "extensions":".html" //any file with extension
  } },

• 实时编译less为css, less2css
  
  1. ctrl+shift+p>install Package搜索Less2Css，按Enter就可以安装了
  2. Less2Css插件依赖lessc这个工具，less.js-windows-master文件夹，把文件夹拷贝到D盘，或者其他盘。
     然后把目录地址加入到环境变量,用户变量PATH的中，如D:\less2css;
  3. window+r lessc…即可。
  4. 在css文件夹下，创建1.less，ctrl+s保存，即生成1.css文件。
     在preferences-package-settings-less2css-setting-default, 里面是less2css的默认设置，其中，minify:true为压缩css,改为false为不压缩css。
• 实时编译sass为了css
  
  • 首先sass依赖rubby环境，安装环境安装sass：
    
    1. sass依赖rubby环境，安装rubby
    2. 安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby,设置淘宝镜像，会快一些gem sources -a http://gems.ruby-china.org
    3. 安装sass:然后直接在命令行中输入:gem install sass
    4. 使用sass -v,检测是否安装成功。
  • 第1种，不用sublime(推荐，比较快)
    
    • 如果要在命令行中运行 Sass ,只要输入:sass input.scss output.css
    • 你还可以命令 Sass 监视文件的改动并更新 CSS ：
      sass --watch input.scss:output.css
    • 如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：
      sass --watch app/sass:public/stylesheets
    • 写完项目以后，想格式化sass编译后的css,它提供四个编译风格的选项：
      
      • 生产环境当中，一般使用compressed 选项。
        sass --style compressed test.sass test.css
      • nested：嵌套缩进的css代码，它是默认值。
        
      • expanded：无缩进、扩展的css代码。
        
      • compact：每个css选择器是一行。
        
      • compressed：压缩后的css代码。
        
    • 使用 sass-convert 命令行工具，就可以将一种语法转换为另一种语法：
    • 将 Sass 转换为 SCSS
      
      • sass-convert style.sass style.scss
    • 将 SCSS 转换为 Sass
      
      • sass-convert style.scss style.sass
    • 使用 sass --help 可以列出完整的帮助文档。
  • 第2种,使用sublime
    
    1. 回到sublime,pci,安装sass,sass build这两个插件。
    2. 安装好后重启sublime 然后，建立1.scss(scss比sass更强悍)，写一些scss,ctrl+b编译，自动生成1.css（1.map不用管）文件。
• css2rem
  
  • git clone https://github.com/yunlulu/cssrem
  • 一些设置
    
{
"px_to_rem": 100, //基础大小
"max_rem_fraction_length": 6, //小数点保留几位
"available_file_types": [".css", ".less", ".sass",".html"]
} //支持的类型


相关网站

• sublime注码，列表中第一个就行
• 相关快捷键：
  
  • 快捷键1
  • 快捷键2
• emmet：
  
  • 常用快捷的写法
  • emmet官方文档