Methods
gutter-value($directionopt, $breakpointopt) → {Number}
Returns the value of the defined distance between two columns/rows for a breakpoint.
The main usage for this is, to define a property value based on the current gutter. This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint using auto-breakpoint detection, primarily rather working with the value itself. For other cases: Remember, that that you can simply use named parameters.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
$direction |
String |
<optional> |
'horizontal' | either "horizontal" or "vertical", determines the gutter direction in the grid |
$breakpoint |
String |
<optional> |
'auto' | a defined breakpoint name or "auto", to use the current breakpoint at the point of usage |
Throws:
error if no gutter value could be determined, based on given breakpoint and/or direction
Returns:
the determined gutter value with applied factor and/or addition
- Type
- Number
Example
+breakpoint(medium)
padding-left gutter-value() * 0.5
margin-top gutter-value($direction:'vertical', $breakpoint:'small')