├── RemConverter.sublime-settings ├── .gitignore ├── Default.sublime-keymap ├── RemConverter.sublime-commands ├── LICENSE.txt ├── README_zh.md ├── Main.sublime-menu ├── README.md └── RemConverter.py /RemConverter.sublime-settings: -------------------------------------------------------------------------------- 1 | { 2 | "remUnit": 20 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.pyc 3 | *.sublime-project 4 | *.sublime-workspace -------------------------------------------------------------------------------- /Default.sublime-keymap: -------------------------------------------------------------------------------- 1 | [ 2 | { "keys": ["alt+z"], "command": "rem_converter", "args":{"toRem":true} }, 3 | { "keys": ["alt+x"], "command": "rem_converter", "args":{"toRem":false} } 4 | ] 5 | -------------------------------------------------------------------------------- /RemConverter.sublime-commands: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | { "caption": "CSS: toggle px to rem values", "command": "rem_converter", "args":{"toRem":true} }, 4 | { "caption": "CSS: toggle rem to px values", "command": "rem_converter", "args":{"toRem":false} } 5 | 6 | ] 7 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | (The MIT License) 2 | 3 | Copyright (c) 2016 Hoipo Cheung 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | 'Software'), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 | RemConverter 2 | ------------- 3 | 4 | 一个CSS的px值和rem值相互转换的Sublime Text插件。 5 | 只支持Sublime Text 3，支持HTML,CSS,LESS,SCSS和SASS。 6 | 7 | 这个插件可以在HTML代码中解析出style标签中的CSS，然后把px值转成rem值，或者是rem转px。(*^__^*) 8 | 9 | ## 安装 10 | 11 | 因为功能还不完善，暂且不想提交给package control.暂时只能下载我的项目源码来安装 12 | * 下载我的项目, 比如. `git clone https://github.com/hoipo/RemConverter.git` 或者直接在github主页下载zip包 13 | * 进入`packages`目录: Sublime Text -> Preferences -> Browse Packages... 14 | * 复制`RemConverter`文件夹到 `packges`目录 15 | * 可能你要重启一下你的Sublime Text 16 | 17 | ## 使用方法 18 | 19 | * 按 `alt+z` 把px转换成rem. 20 | * 按 `alt+x` 把rem转换成px. 21 | 22 | 如果你不想你的px或rem被这个插件转换了，那就用大写的`PX`或`REM`吧，插件会跳过他们的,比如: 23 | 24 | ```css 25 | margin-top:30PX; 26 | ``` 27 | 28 | ## 配置 29 | 30 | 配置文件：Sublime Text -> Preferences -> Package Settings -> remConverter 31 | 32 | * `remUnit` - 一个rem等于多少个px,默认值 20px. 33 | 34 | 快捷键配置：Sublime Text -> Preferences -> Key Bingdings 35 | 36 | 把以下配置复制到Key Bingdings即可更改快捷键: 37 | 38 | ```js 39 | [ 40 | { "keys": ["alt+z"], "command": "rem_converter", "args":{"toRem":true} }, 41 | { "keys": ["alt+x"], "command": "rem_converter", "args":{"toRem":false} } 42 | ] 43 | ``` 44 | 45 | # 协议 46 | 47 | Copyright (c) 2016 Hoipo Cheung 48 | 49 | Licensed under the MIT license. 50 | 51 | See LICENSE for more info. 52 | 53 | -------------------------------------------------------------------------------- /Main.sublime-menu: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "preferences", 4 | "children": 5 | [ 6 | { 7 | "caption": "Package Settings", 8 | "id": "package-settings", 9 | "children": 10 | [ 11 | { 12 | "caption": "remConverter", 13 | "children": 14 | [ 15 | { 16 | "command": "open_file", 17 | "args": { 18 | "file": "${packages}/remConverter/RemConverter.sublime-settings" 19 | }, 20 | "caption": "Settings – Default" 21 | }, 22 | { 23 | "command": "open_file", 24 | "args": { 25 | "file": "${packages}/User/RemConverter.sublime-settings" 26 | }, 27 | "caption": "Settings – User" 28 | }, 29 | { "caption": "-" } 30 | ] 31 | } 32 | ] 33 | } 34 | ] 35 | } 36 | ] 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | RemConverter 2 | ------------- 3 | 4 | A tools for converting px to rem OR rem to px automatically. 5 | 6 | Just ONLY support ST3 ! 7 | 8 | this is the version 1.0, it not only work for Sublime Text 3 width HTML file,but also the CSS, LESS, SCSS or SASS files. 9 | 10 | This plugin can parse you css in the style tag which in your HTML code and converter the unit to px or rem.Just enjoy it. (*^__^*) 11 | 12 | ### [中文文档](https://github.com/hoipo/RemConverter/blob/master/README_zh.md) 13 | 14 | ## Installation 15 | 16 | * download the code, eg. `git clone https://github.com/hoipo/RemConverter.git` or download the zip file 17 | * goto the `packages` directory: Sublime Text -> Preferences -> Browse Packages... 18 | * copy the `RemConverter` directory which you just download to `packges` 19 | * restart your Sublime Text 20 | 21 | ## Usage 22 | 23 | * press `alt+z` to converter px to rem by default. 24 | * press `alt+x` to converter rem to px by default. 25 | 26 | *of course, you could change the keyboard shortcuts just you like* 27 | 28 | if you don't want to converter the unit at some where,you could use the uppercase to write `PX` or `REM`,eg: 29 | 30 | ```css 31 | margin-top:30PX; 32 | ``` 33 | 34 | ## setting 35 | 36 | setting file：Sublime Text -> Preferences -> Package Settings -> remConverter 37 | 38 | * `remUnit` - the unit of 1 rem, 20px by default. 39 | 40 | keymap setting：Sublime Text -> Preferences -> Key Bingdings 41 | 42 | adding this following setting to change the keyboard shortcuts: 43 | 44 | ```js 45 | [ 46 | { "keys": ["alt+z"], "command": "rem_converter", "args":{"toRem":true} }, 47 | { "keys": ["alt+x"], "command": "rem_converter", "args":{"toRem":false} } 48 | ] 49 | ``` 50 | 51 | # License 52 | 53 | Copyright (c) 2016 Hoipo Cheung 54 | 55 | Licensed under the MIT license. 56 | 57 | See LICENSE for more info. 58 | 59 | -------------------------------------------------------------------------------- /RemConverter.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | # -*- coding: utf-8 -*- 3 | 4 | import sublime 5 | import sublime_plugin 6 | import re 7 | import os 8 | from html.parser import HTMLParser 9 | 10 | class RemConverterCommand(sublime_plugin.TextCommand): 11 | def __init__(self,*args,**kw): 12 | super(RemConverterCommand, self).__init__(*args, **kw) 13 | self.remUnit = sublime.load_settings('RemConverter.sublime-settings').get('remUnit', 20) 14 | 15 | def run(self, edit,**kw): 16 | fileExtension = os.path.splitext(self.view.file_name())[1][1:].lower() 17 | toRem = kw.get('toRem',True) 18 | region = sublime.Region(0,self.view.size()) 19 | textOfView = self.view.substr(region) 20 | if re.match(r'^html?$', fileExtension): 21 | httpParser = MyHTMLParser() 22 | httpParser.feed(textOfView) 23 | items = httpParser.getItems() 24 | for str in items: 25 | _transformResult = self.transform(str,toRem) 26 | region = self.view.find(self.patternToString(str),0) 27 | self.view.replace(edit, region, _transformResult) 28 | elif re.match(r'^(css|less|s[ca]ss)$', fileExtension): 29 | _transformResult = self.transform(textOfView,toRem) 30 | self.view.replace(edit, region, _transformResult) 31 | 32 | def transform(self,str='',toRem=True): 33 | def repl(m): 34 | gd = m.groupdict() 35 | if toRem: 36 | # px -> rem 37 | if gd.get('unit', None) == 'px': 38 | ret = '%3.4f' % (float(gd.get('qty')) / float(self.remUnit)) 39 | while ret[-1] == '0': 40 | ret = ret[:-1] 41 | if ret.endswith('.'): 42 | ret = ret[:-1] 43 | return ret + 'rem' 44 | else: 45 | return gd.get('qty')+gd.get('unit', None) 46 | else: 47 | # rem -> px 48 | if gd.get('unit', None) == 'rem': 49 | ret_val = float(gd.get('qty')) * float(self.remUnit) 50 | ret = '%3.1f' % ret_val 51 | if ret.endswith('.0'): 52 | ret = ('%3.0f' % ret_val) + 'px' 53 | else: 54 | ret = ret + 'px' 55 | return ret.strip() 56 | else: 57 | return gd.get('qty')+gd.get('unit', None) 58 | 59 | return re.sub(r'((?P[0-9\.]+)(?Ppx|rem))',repl,str) 60 | 61 | def patternToString(self,pattern): 62 | _p = re.compile('\*|\.|\?|\+|\$|\^|\[|\]|\(|\)|\{|\}|\||\\|\/') 63 | return _p.sub(lambda m: '\\'+m.group(0), pattern) 64 | 65 | 66 | class MyHTMLParser(HTMLParser): 67 | def __init__(self): 68 | HTMLParser.__init__(self) 69 | self.items = [] #保存提取结果 70 | self.data_start = False 71 | def handle_starttag(self, tag, attrs): 72 | if tag == 'style': 73 | self.data_start = True 74 | def handle_data(self, data): 75 | if self.data_start: 76 | self.items.append(data) 77 | self.data_start = False 78 | def getItems(self): 79 | return self.items 80 | --------------------------------------------------------------------------------