├── REM-PX.sublime-settings ├── Default (Linux).sublime-keymap ├── Default (OSX).sublime-keymap ├── Default (Windows).sublime-keymap ├── README.md ├── Main.sublime-menu └── REM-PX.py /REM-PX.sublime-settings: -------------------------------------------------------------------------------- 1 | { 2 | // the number of pixels 1 rem is 3 | "1rem": 16 4 | } 5 | -------------------------------------------------------------------------------- /Default (Linux).sublime-keymap: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "keys": ["ctrl+shift+r"], "command": "pxtorem" 4 | }, 5 | { 6 | "keys": ["ctrl+shift+x"], "command": "remtopx" 7 | } 8 | ] -------------------------------------------------------------------------------- /Default (OSX).sublime-keymap: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "keys": ["super+shift+r"], "command": "pxtorem" 4 | }, 5 | { 6 | "keys": ["super+shift+x"], "command": "remtopx" 7 | } 8 | ] -------------------------------------------------------------------------------- /Default (Windows).sublime-keymap: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "keys": ["ctrl+shift+r"], "command": "pxtorem" 4 | }, 5 | { 6 | "keys": ["ctrl+shift+x"], "command": "remtopx" 7 | } 8 | ] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | REM-PX 2 | ====== 3 | 4 | A Sublime Text plugin that allows easy conversion of rem to px and px to rem. 5 | 6 | ## Installation 7 | You can easily install the pluing through Will Bond's excellent Package Control (https://sublime.wbond.net/). 8 | If you want to install this plugin manually for some reason, simply clone this repo into your packages directory (make sure not to put it in the user sub dir). 9 | 10 | ## Instructions 11 | 12 | ### Converting px to rem 13 | 1. Select a px value (e.g. '16px') 14 | 2. Hit ctrl+shift+r by default (cmd+shift+r on Mac OS) to convert the value to rem. (Can also be done by selecting 'Convert highlighted px to rem' under the tools menu) 15 | 16 | ### Converting rem to px 17 | 1. Select a rem value (e.g. '1rem') 18 | 2. Hit ctrl+shift+x by default (cmd+shift+x on Mac OS) to convert the value to px. (Can also be done by selecting 'Convert highlighted rem to px' under the tools menu) 19 | 20 | ## Supported Features 21 | - Convert px values to rem 22 | - Convert rem values to px 23 | - Checks to make sure the value is a valid px unit to convert to rem and visa versa 24 | 25 | ## Notes 26 | 1. The default size of 1rem is 16px which can be changed in the user settings. 27 | 2. All values will remove trailing zero's (e.g. '1.500rem' would become '1.5rem'). 28 | 29 | ## Examples (1rem = 16px) 30 | 31 | ### Example 1 (rem to px) 32 | ```css 33 | font-size: 1rem 34 | ``` 35 | 36 | Will convert to: 37 | ```css 38 | font-size: 16px 39 | ``` 40 | 41 | ### Example 2 (px to rem) 42 | 43 | ```css 44 | font-size: 16px 45 | ``` 46 | 47 | Will convert to: 48 | ```css 49 | font-size: 1rem 50 | ``` 51 | -------------------------------------------------------------------------------- /Main.sublime-menu: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "tools", 4 | "children": 5 | [ 6 | { 7 | "id": "{px-to-rem}", 8 | "caption": "Convert highlighted px to rem", 9 | "command": "pxtorem" 10 | }, 11 | { 12 | "id": "{rem-to-px}", 13 | "caption": "Convert highlighted rem to px", 14 | "command": "remtopx" 15 | } 16 | ] 17 | }, 18 | { 19 | "caption": "Preferences", 20 | "id": "preferences", 21 | "children": 22 | [ 23 | { 24 | "caption": "Package Settings", 25 | "id": "package-settings", 26 | "children": 27 | [ 28 | { 29 | "caption": "REM-PX", 30 | "children": 31 | [ 32 | { 33 | "caption": "Settings – Default", 34 | "command": "open_file", 35 | "args": 36 | { 37 | "file": "${packages}/REM-PX/REM-PX.sublime-settings" 38 | } 39 | }, 40 | { 41 | "caption": "Settings – User", 42 | "command": "open_file", 43 | "args": 44 | { 45 | "file": "${packages}/User/REM-PX.sublime-settings" 46 | } 47 | }, 48 | { "caption": "-" } 49 | ] 50 | } 51 | ] 52 | } 53 | ] 54 | } 55 | ] -------------------------------------------------------------------------------- /REM-PX.py: -------------------------------------------------------------------------------- 1 | import sublime, sublime_plugin 2 | 3 | class pxtoremCommand(sublime_plugin.TextCommand): 4 | def run(self, edit): 5 | view = self.view 6 | for region in view.sel(): 7 | if not region.empty(): 8 | # retrieve the settings 9 | self.settings = sublime.load_settings('REM-PX.sublime-settings') 10 | base_rem = self.settings.get('1rem', 16) 11 | 12 | # get the selected text 13 | s = view.substr(region) 14 | px = s[:-2] 15 | unit = s[-2:] 16 | 17 | # invalid unit, so just return the string 18 | if unit != "px": 19 | rem = s 20 | # convert to rem 21 | else: 22 | rem = float(px) / base_rem 23 | rem = '{0:g}'.format(rem) 24 | rem = str(rem) + 'rem' 25 | 26 | # Replace the selection with transformed text 27 | view.replace(edit, region, rem) 28 | 29 | class remtopxCommand(sublime_plugin.TextCommand): 30 | def run(self, edit): 31 | view = self.view 32 | for region in view.sel(): 33 | if not region.empty(): 34 | # retrieve the settings 35 | self.settings = sublime.load_settings('REM-PX.sublime-settings') 36 | base_rem = self.settings.get('1rem', 16) 37 | 38 | # get the selected text 39 | s = view.substr(region) 40 | rem = s[:-3] 41 | unit = s[-3:] 42 | 43 | # invalid unit, so just return the string 44 | if unit != "rem": 45 | px = s 46 | # convert to rem 47 | else: 48 | px = float(rem) * base_rem 49 | px = '{0:g}'.format(px) 50 | px = str(px) + 'px' 51 | 52 | # replace the selection with transformed text 53 | view.replace(edit, region, px) --------------------------------------------------------------------------------