Mixin: inner - adaptdk/fe_tools GitHub Wiki
Inner (Max-Width)
A mixin for centering, and setting max-width and padding dynamically, changable by breakpoints.
Params
/**
* A mixin for centering, and setting max-width and padding dynamically, changable by breakpoints.
* @param {string} $padding - The padding in pixels - 20px
* @param {number} [$maxWidth] - The max-width property in pixels - 900px
* @param {number} [$breakpoint] - When the (min-width: breakpoint) should apply, in pixels - 1024px
*/
@params (
$padding $maxWidth,
$padding $breakpoint $maxWidth // Recursive
)
Examples
Example 1
Input (SCSS)
.h1 {
@include inner(20px 900px);
}
Output (CSS)
.h1 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
Example 2
Input (SCSS)
.h1 {
@include inner(10px 600px, 20px 900px, null 1200px 900px);
}
Output (CSS)
.h1 {
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
@media (min-width: 900px) {
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 1200px) {
max-width: 900px;
}
}