scss inDesign跟踪2 CSS字母间距

Posted 2021-05-17

// convert indesign tracking value to css letter-spacing

@function tracking-to-letter-spacing($tracking: 0) {
	@return $tracking / 1000 * 1em;
}

@mixin tracking-to-letter-spacing($tracking: 0) {
	letter-spacing: tracking-to-letter-spacing($tracking);
}

// manually sample
.text-wide-manually {
	letter-spacing: 40 / 1000 * 1em;
}

// function sample
.text-wide-function {
	letter-spacing: tracking-to-letter-spacing(40);
}

// mixin sample
.text-wide-mixin {
	@include tracking-to-letter-spacing(40);
}