Skip to content

Instantly share code, notes, and snippets.

@ackuser
Forked from sktwentysix/sketchapp_line_CSS
Created February 4, 2022 11:34
Show Gist options
  • Save ackuser/c5a3a0581c84caadc5c09889f61418b6 to your computer and use it in GitHub Desktop.
Save ackuser/c5a3a0581c84caadc5c09889f61418b6 to your computer and use it in GitHub Desktop.
Convert SketchApp line height to CSS
/*
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