{"action":"created","issue":{"url":"https://api.github.com/repos/less/less.js/issues/2451","labels_url":"https://api.github.com/repos/less/less.js/issues/2451/labels{/name}","comments_url":"https://api.github.com/repos/less/less.js/issues/2451/comments","events_url":"https://api.github.com/repos/less/less.js/issues/2451/events","html_url":"https://github.com/less/less.js/issues/2451","id":57685050,"number":2451,"title":"New unit px2rem","user":{"login":"dandaka","id":2384694,"avatar_url":"https://avatars.githubusercontent.com/u/2384694?v=3","gravatar_id":"","url":"https://api.github.com/users/dandaka","html_url":"https://github.com/dandaka","followers_url":"https://api.github.com/users/dandaka/followers","following_url":"https://api.github.com/users/dandaka/following{/other_user}","gists_url":"https://api.github.com/users/dandaka/gists{/gist_id}","starred_url":"https://api.github.com/users/dandaka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dandaka/subscriptions","organizations_url":"https://api.github.com/users/dandaka/orgs","repos_url":"https://api.github.com/users/dandaka/repos","events_url":"https://api.github.com/users/dandaka/events{/privacy}","received_events_url":"https://api.github.com/users/dandaka/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/less/less.js/labels/Feature%20Request","name":"Feature Request","color":"fe9400"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-02-14T07:31:08Z","updated_at":"2015-02-14T09:16:14Z","closed_at":"2015-02-14T09:16:14Z","body":"### Now ###\r\n\r\n1. It is much easier to design responsive websites in REM units. In result you get scalable design.\r\n2. Design is done in PX units. And will stay like this in foreseeable future due to inertia with graphics editors.\r\n3. There are a few options to convert PXs to REMs\r\n  * Manually with calculator. Cons: Hard to iterate back to design (case: design file has changed and you need to understand, if you have to change REM — no chance)\r\n  * With a mixin. Code gets bloated and you need to specify each rule separately.\r\n\r\nFor this case I use a following mixin:\r\n\r\n```\r\n.selector {\r\n  .convert-rem(margin-top, 20px);\r\n}\r\n\r\n.convert-rem(@selector, @amt, @rem-base-xs: @rem-base-xs) when (ispixel(@amt))\r\n{\r\n    @{selector}: unit((@amt / @rem-base-xs), rem);\r\n}\r\n```\r\n\r\n### How it should be ###\r\n\r\n```\r\nLESS\r\n@rem-base: 16px;\r\n.selector {\r\n  margin-top: 20pr;\r\n}\r\n\r\nCSS\r\n.selector {\r\n  margin-top: 1.25rem; // = 20/16 px\r\n}\r\n\r\n```\r\n\r\nThis code has may advantages:\r\n* Clear\r\n* Easy to check back with design and iterate on\r\n* Minimal syntax"},"comment":{"url":"https://api.github.com/repos/less/less.js/issues/comments/74368125","html_url":"https://github.com/less/less.js/issues/2451#issuecomment-74368125","issue_url":"https://api.github.com/repos/less/less.js/issues/2451","id":74368125,"user":{"login":"dandaka","id":2384694,"avatar_url":"https://avatars.githubusercontent.com/u/2384694?v=3","gravatar_id":"","url":"https://api.github.com/users/dandaka","html_url":"https://github.com/dandaka","followers_url":"https://api.github.com/users/dandaka/followers","following_url":"https://api.github.com/users/dandaka/following{/other_user}","gists_url":"https://api.github.com/users/dandaka/gists{/gist_id}","starred_url":"https://api.github.com/users/dandaka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dandaka/subscriptions","organizations_url":"https://api.github.com/users/dandaka/orgs","repos_url":"https://api.github.com/users/dandaka/repos","events_url":"https://api.github.com/users/dandaka/events{/privacy}","received_events_url":"https://api.github.com/users/dandaka/received_events","type":"User","site_admin":false},"created_at":"2015-02-14T09:16:14Z","updated_at":"2015-02-14T09:16:14Z","body":"@seven-phases-max Works like magic. Sorry for a stupid question."}}