zeplin-scss-extension

Zeplin SCSS Extension

Generates SCSS snippets from colors, text styles and layers. ⚛️📱

Output

Sample colors output:

$red: #ff0000;
$green: #00ff00;
$blue: #0000ff;
$yellow: #ffff00;
$black: #000000;
$black50: rgba(0, 0, 0, 0.5);
$white: #ffffff;

Sample text style output:

@mixin Sample-text-style-with-color {
  font-family: SFProText;
  font-size: 20px;
  text-align: left;
  color: $red;
}

@mixin Sample-text-style {
  font-family: SFProText;
  font-size: 20px;
  text-align: left;
}

Sample layer output:

.Layer-with-shadow {
  width: 100px;
  height: 100px;
  box-shadow: 0 2px 4px 6px $black50;
}

Options

Color format

Supports HEX, RGB or HSL. Sample colors output as HSL:

$blue: hsl(240, 100%, 50%)
$black50: hsla(0, 0%, 0%, 0.5)

Dimensions

Toggles generating width and height properties from layers.

Unitless line-height

Toggles generating unitless value for line-height property.

Text styles as mixins

Toggles using project text styles as mixins while generating code for text layers.

Sample output when this options disabled:

.Text-layer {
  width: 220px;
  height: 24px;
  font-family: SFProText;
  font-size: 20px;
  text-align: left;
  color: $black;
}

When enabled:

.Text-layer {
  width: 220px;
  height: 24px;
  color: $black;
  @include Sample-text-style;
}

Default values

Toggles always generating default values from layers or text styles, such as fontWeight and fontStyle.

Development

SCSS extension is developed using zem, Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.

To learn more about zem, see documentation.