-
-
Save ackuser/c5a3a0581c84caadc5c09889f61418b6 to your computer and use it in GitHub Desktop.
Convert SketchApp line height to CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Sketchapp fro MacOS is a fantastic tool for prototyping, but has some drawbacks that make converting designs to fully functional websites a pain. | |
One of these is sketchapp's line-height, which doesn't seem to have any relation to CSS line-height values. | |
This is a simple example of how we can take a line height value from sketch and apply it to a CSS class for styling text: | |
Lets assume the text in our Sketchapp prototype has a font size of "18px", and line height of "33"... | |
Our CSS class would look like this: | |
*/ | |
.text { | |
font-size: 18px; | |
line-height: calc(33/18); | |
} | |
/* | |
We simply use the font size as we see in Sketch in our CSS class, and for CSS line-height we use a calc function to divide the Sketchapp line-height value by the font size. | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment