Skip to content

Instantly share code, notes, and snippets.

@Jikol

Jikol/input.scss

Created March 28, 2022 19:45
Show Gist options
  • Save Jikol/9c5da068c364b7e1ad87bd7665c86e58 to your computer and use it in GitHub Desktop.
Save Jikol/9c5da068c364b7e1ad87bd7665c86e58 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@use "sass:list";
@use "sass:map";
@use "sass:string";
/// Flexbox simplifier
/// @param {List} $prop [false] - List of flexbox properties: {
/// inline, column, column-reverse, row-reverse, wrap, wrap-reverse
/// }
@mixin flex($prop: false) {
$attr: (
"display": flex,
"flex-direction": false,
"flex-wrap": false,
"flex-flow": false,
);
@if not $prop {
display: map.get($attr, "display");
} @else {
@if list.index($prop, inline) {
$attr: map.set($attr, "display", inline-flex);
}
@if list.index($prop, column) {
@if list.index($prop, wrap) {
$attr: map.set($attr, "flex-flow", column wrap);
} @else if list.index($prop, wrap-reverse) {
$attr: map.set($attr, "flex-flow", column wrap-reverse);
} @else {
$attr: map.set($attr, "flex-direction", column);
}
}
@if list.index($prop, column-reverse) {
@if list.index($prop, wrap) {
$attr: map.set($attr, "flex-flow", column-reverse wrap);
} @else if list.index($prop, wrap-reverse) {
$attr: map.set($attr, "flex-flow", column-reverse wrap-reverse);
} @else {
$attr: map.set($attr, "flex-direction", column-reverse);
}
}
@if list.index($prop, row-reverse) {
@if list.index($prop, wrap) {
$attr: map.set($attr, "flex-flow", row-reverse wrap);
} @else if list.index($prop, wrap-reverse) {
$attr: map.set($attr, "flex-flow", row-reverse wrap-reverse);
} @else {
$attr: map.set($attr, "flex-direction", row-reverse);
}
}
@if list.index($prop, wrap) and not (list.index($prop, column) or list.index($prop, column-reverse) or list.index($prop, row-reverse)) {
$attr: map.set($attr, "flex-wrap", wrap);
}
@if list.index($prop, wrap-reverse) and not (list.index($prop, column) or list.index($prop, column-reverse) or list.index($prop, row-reverse)) {
$attr: map.set($attr, "flex-wrap", wrap-reverse);
}
display: map.get($attr, "display");
@if map.get($attr, "flex-direction") {
flex-direction: map.get($attr, "flex-direction");
}
@if map.get($attr, "flex-wrap") {
flex-wrap: map.get($attr, "flex-wrap");
}
@if map.get($attr, "flex-flow") {
flex-flow: map.get($attr, "flex-flow");
}
}
}
/// Flexbox place simplifier
/// @param {List} $prop - Flexbox properties for aligning child elements: {
/// flex-start, flex-end, center, space-between, space-around, space-evenly
/// stretch, baseline
/// }
/// @param {String} $content - Align whole children elements in flex container: {
/// flex-start, flex-end, center, space-between, space-around, space-evenly
/// baseline
/// }
/// e.g.: @include flex-place() -> {
///
/// }
@mixin flex-place($items, $content: false) {
$attr: (
"justify-content": false,
"align-items": false,
"align-content": false
);
$justify-content: flex-start, flex-end, center, space-between, space-around,
space-evenly;
$align-items: stretch, flex-start, flex-end, center, baseline;
$align-content: flex-start, flex-end, center, space-between, space-around,
space-evenly, stretch;
@if length($items) < 2 {
$attr: map.set($attr, "justify-content", list.nth($items, 1));
$attr: map.set($attr, "align-items", list.nth($items, 2));
} @else if length($items) == 2 {
@if list.nth($items, 1) == "unset" {
$attr: map.set($attr, "align-items", list.nth($items, 2));
} @else if list.nth($items, 2) == "unset" {
$attr: map.set($attr, "justify-content", list.nth($items, 1));
} @else {
$attr: map.set($attr, "justify-content", list.nth($items, 1));
$attr: map.set($attr, "align-items", list.nth($items, 2));
}
} @else {
$length: list.length($items);
@error "`#{$items}` may have a maximum of 2 properties. #{$length} found.";
}
@if $content {
$attr: map.set($attr, "align-content", $content);
}
@if map.get($attr, "justify-content") {
@if not list.index($justify-content, map.get($attr, "justify-content")) {
@error "#{map.get($attr, "justify-content")} is not valid " +
"justify-content property. Expected on of #{$justify-content}.";
}
justify-content: map.get($attr, "justify-content");
}
@if map.get($attr, "align-items") {
@if not list.index($align-items, map.get($attr, "align-items")) {
@error "#{map.get($attr, "align-items")} is not valid " +
"align-items property. Expected on of #{$align-items}.";
}
align-items: map.get($attr, "align-items");
}
@if map.get($attr, "align-content") {
@if not list.index($align-content, map.get($attr, "align-content")) {
@error "#{map.get($attr, "align-content")} is not valid " +
"align-content property. Expected on of #{$align-content}.";
}
align-content: map.get($attr, "align-content");
}
}
.test {
@include flex;
@include flex-place(flex-end center, space-around);
}
Raw
output.css
.test {
display: flex;
justify-content: flex-end;
align-items: center;
align-content: space-around;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment