Contents

/******************************************************
* MIXINS
******************************************************/

// Apply styles for a specific font, breakpoint, and size.
@mixin ss-apply-font-styles($font, $size, $breakpoint-name) {

	// Get font-size and adjust by the normalize ratio.
	$normalize-ratio: map-get($font, "normalize-ratio");
	font-size: map-deep-get($sane-scale, $breakpoint-name, "scale", $size, "font-size") * $normalize-ratio;

	// Get line-height, but don't adjust by the normalize ratio.
	line-height: map-deep-get($sane-scale, $breakpoint-name, "scale", $size, "line-height");
}

// Apply non-responsive styling. Only the size used for
// the specified media query will be applied.
@mixin ss-set-font-size($font, $size, $breakpoint-name) {
	font-family: map-get($font, "family");
	@include ss-apply-font-styles($font, $size, $breakpoint-name);
}

// Apply responsive styling. Corresponding sizes for
// each media query will be applied.
@mixin ss-set-responsive-font-size($font, $size) {
	font-family: map-get($font, "family");
	@each $breakpoint-name, $breakpoint-value in $sane-scale {

		// For the default styles, don't include a media query.
		@if $breakpoint-name == "default" {
			@include ss-apply-font-styles($font, $size, $breakpoint-name);
		}

		// For other breakpoints, set style with a media query.
		@else {
			$media-query: map-deep-get($sane-scale, $breakpoint-name, "media-query");
			@media #{$media-query} {
				@include ss-apply-font-styles($font, $size, $breakpoint-name);
			} 
		}
	}
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
sane-scale-0.1.2	stylesheets/sane-scale/_set-font-size.scss
sane-scale-0.1.1	stylesheets/sane-scale/_set-font-size.scss
sane-scale-0.1	stylesheets/sane-scale/_set-font-size.scss