Methods
gutter-value($factoropt, $addopt, $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 |
|---|---|---|---|---|
$factor |
Number |
<optional> |
1.0 | factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example |
$add |
Number |
<optional> |
0 | value to add to the finally evaluated gutter value, may also be negative to subtract |
$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:
- Type
- Number
Example
@include breakpoint(medium){
padding-left: gutter-value(0.5);
}
margin-top: gutter-value($direction:'vertical', $breakpoint:'small');