Sketch released an interesting update to their .sketch file format this month. Where it was previously written in binary code, it’s now written in JSON, a coding language that’s much more human-readable. Quite literally, you could rename file.sketch to file.zip, unzip it, then read the Sketch styles as code.
Which had me thinking, how do Sketch styles actually translate to CSS code, the coding language that alters a website’s layout and visual aesthetic? Here at Sympli we breakdown the styles in your .sketch’s and display them in a way that helps developers not only understand the design without having to use Sketch, but actually extract those styles as CSS code, which can then be implemented into an actual website design. I thought it’d be fun to explore the concept of how that’s done, so let’s take a look at how each Sketch style translates to a CSS style.
X and Y
Starting from the top of the Sketch inspector: X and Y translates to top: and left: in CSS, but only in the case that the HTML element has fixed positioning (i.e. the element is “taken out” of the natural flow of the layout and is offset from the top-left corner of the browser window/viewport, where top: and left:, or X and Y as they are known in Sketch, determines the amount of offset in pixels). Naturally, in Sketch, the offset is instead from the top-left corner of the artboard.
Width and Height
Width and Height in Sketch quite literally translate to width: and height: in CSS code. Pretty straightforward stuff really, although it should be noted that percent values in Sketch are automatically converted to pixel values, and so, when the style is handed off to the developer, that is the value that will be recorded — this is slightly inefficient, but it’s a huge deal if you know this beforehand.
Rotate
Rotate relates to the transform: property in CSS code, and even though transform: can be used to alter the scale, skew, and matrix (to name a few) of an element, transform: rotate(angle) is the only value that can be carried forward from Sketch. Scaling/skewing/etc can totally be accomplished when editing shapes, however Sketch isn’t able to calculate the CSS values for these, hence why only Rotate appears in the inspector.
Flip
Flip relates to translate:rotateX(180deg) (for horizontal flips) and translate:rotateY(180deg) (for vertical flips), where the object is rotated on only a singular axis, although, for some reason, Sketch doesn’t export this value to CSS even though it supports the basic Rotate property — this might be due to the fact that flipping is usually reserved for hover states in website design.
Opacity
Like with Width and Height, Opacity quite literally means opacity: in CSS — the only difference is that while we specify Opacity between 0% and 100% in Sketch, in CSS we declare the value between 0.0 and 1.0, for example opacity:0.5.
Blending
Blending Modes aren’t exported in Sketch’s “Export CSS” tool, but they do translate to CSS using the filter: property. Why? Because forcing the browser to do complex image manipulations is very intensive on the CPU, so it’s better to export bitmap images where the image has already had a blending mode applied to it. Again, similarly to flip, the only real use-case for the filter: property is when animating a HTML element.
Fills
Fills are known as both colours and backgrounds in CSS, as defined by the color: property (for text layers) and the background: property (for everything else). Gradient backgrounds can also be exported as CSS from Sketch, which is very convenient as the CSS code for gradients is incredibly complex!
Sketch will export the CSS code using Hex values by default, however the Sympli Plugin for Sketch will display the values using Hex, RGBA, and even UIColor (if you’re building an iOS app). I Sympli, the developer can choose their ideal format!
Borders
While borders have a Fill value as well (which determines the colour of the border), they also have a Thickness value that determines the width of the border. In fact, these values will be combined into a single CSS property.
Here’s an example where the border width is 5px and the colour is black, as defined by the Hex value for black: border: 5px solid #000000. Sketch only supports solid borders, as opposed to dashed/dotted/inset/outset borders, so the value will always contain the “solid” keyword, unfortunately.
Tip: if you switch the Inside option to Outside, this technically warrants an outline: 5px solid #000 property, however Sketch will still use the border: property. As you’ve probably summarised by now, Sketch doesn’t always make the best choice, so its useful to know your limitations in this regard.
Shadows and Inner Shadows
Once again, Shadow accepts a colour value, but also requires an X, Y, Blur and Spread value, which directly translates to box-shadow: X Y Blur Spread in CSS. Apart from the fact that Sketch calls the style “Shadow”, and CSS calls it “Box Shadow”, the translation is quite straightforward.
Did you know that you can add the keyword “inset” into the box-shadow: property in CSS? In order to specify this in Sketch, simply use Inner Shadow instead of Shadow, which creates...well...an inner shadow. Pretty simple, right?
Gaussian/Motion/Zoom/Background Blur
Gaussian, motion and zoom blur do not translate to CSS at all, and to be honest, I’ve never really used them. Background Blur on the other hand mimics the background blur effect on iOS. You can’t export this effect as code, though. If this article teaches us anything, it’s that Sketch could add more support for their “Export CSS” feature — you’ll certainly find that Sympli displays the styles more efficiently, and outputs more usable code, which saves the developer bundles of time. If you keep these limitations in mind, it'll enable you to be a better designer.
