Stylus Mixins

fluid-property.styl

fluid($prop, $fluidVal, $min, $max = false, $fallback = false)
	$responsive-unit = unit($fluidVal)
	$responsive-unitless = remove-unit($fluidVal)
	$min-bp = $min / $responsive-unitless * 100
	$max-bp = ($max != false) ? $max / $responsive-unitless * 100 : 0

	$minQueries = ()
	$maxQueries = ()

	$dimensions = (width height)
	if ($responsive-unit == 'vw')
		$dimensions = (width)
	else if ($responsive-unit == 'vh')
		$dimensions = (height)

	for $dimension in $dimensions
		push($minQueries, s('(max-%s: %s)', $dimension, $min-bp))

		if ($max)
			push($maxQueries, s('(min-%s: %s)', $dimension, $max-bp))

	$minQuery = unquote(join(', ', $minQueries))
	@media $minQuery
		{$prop}: $min

	if ($max)
		$maxQuery = unquote(join(', ', $maxQueries))
		@media $maxQuery
			{$prop}: $max

	if ($fallback)
		{$prop}: $fallback

	{$prop}: $fluidVal

responsive-property.styl

/*
 * Responsive property mixin
 *
 * Requires: 'rupture'
 *
 * Note: Recommended to used a 'combine media query' plugin
 *
 * Usage:
 * responsive: propertyName value/values '<= scaleName' value/values '>= scaleName2' value2/values2
 *
 * Example:
 * responsive: background-image url('desktop.jpg') '<= sm' url('mobile.jpg')
 */
responsive()
	$property = shift(arguments)
	$initialValue = null
	$currentObj = null
	$breakpoints = ()

	for $value, $index in arguments
		$match = null
		if type($value) == 'string'
			$match = match('^(?:(>|<)=?)\s?(.+)', $value)

		// Check if it is a scale string (<= | >= scaleName)
		if !$match
			// If the current object is null, we're still parsing the initial value
			if !$currentObj
				if($initialValue != null)
					$initialValue = $initialValue $value
				else
					$initialValue = $value
			else
				if($currentObj.value != null)
					$currentObj.value = $currentObj.value $value
				else
					$currentObj.value = $value
		else
			if $currentObj != null
				push($breakpoints, $currentObj)
			$currentObj = { scale: $match[2], operator: $match[1] }

	// Append the last breakpoint object to the list
	if $currentObj
		push($breakpoints, $currentObj)

	if $initialValue
		{$property}: $initialValue

	for $bpObj in $breakpoints
		// If passed only one breakpoint value, stylus parses it as a list...
		if type($bpObj) != 'object'
			$bpObj = $breakpoints

		$mediaMixin = $bpObj.operator == '<' ? to-width : from-width
		+$mediaMixin($bpObj.scale)
			{$property}: $bpObj.value