Skip to content

Instantly share code, notes, and snippets.

@Jikol

Jikol/input.scss

Created March 28, 2022 20:28
Show Gist options
  • Save Jikol/d2ad870c64c60166e27987b13f864814 to your computer and use it in GitHub Desktop.
Save Jikol/d2ad870c64c60166e27987b13f864814 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";
/// Grid place simplifier
/// @param {List} $items (align, justify) - define align and justify position of grid items: {
/// start, end, center, stretch, baseline
/// }
/// @param {List} $content [false] (align, justify) - define align and justify position of
/// grid container in parent: {
/// start, end, center, stretch, space-around, space-between, space-evenly
/// }
/// e.g.: @include grid-place(unset end, center start) -> {
/// align-items: end;
/// place-content: start center;
/// }
@mixin grid-place($items, $content: false) {
$attr: (
"justify-items": false,
"align-items": false,
"place-items": false,
"justify-content": false,
"align-content": false,
"place-content": false
);
$justify-items: start, end, center, stretch;
$align-items: start, end, center, stretch;
$place-items: $justify-items;
$justify-content: start, end, center, stretch, space-around,
space-between, space-evenly;
$align-content: start, end, center, stretch, space-around,
space-between, space-evenly;
$place-content: $justify-content;
@if length($items) < 2 {
$attr: map.set($attr, "place-items", $items);
} @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-items", list.nth($items, 1));
} @else {
$attr: map.set($attr, "place-items", list.nth($items, 2) list.nth($items, 1));
}
} @else {
$length: list.length($items);
@error "`#{$items}` may have a maximum of 2 properties. #{$length} found.";
}
@if $content {
@if length($content) < 2 {
$attr: map.set($attr, "place-content", $content);
} @else if length($content) == 2 {
@if list.nth($content, 1) == "unset" {
$attr: map.set($attr, "align-content", list.nth($content, 2));
} @else if list.nth($content, 2) == "unset" {
$attr: map.set($attr, "justify-content", list.nth($content, 1));
} @else {
$attr: map.set($attr, "place-content", list.nth($content, 2) list.nth($content, 1));
}
} @else {
$length: list.length($content);
@error "`#{$content}` may have a maximum of 2 properties. #{$length} found.";
}
}
@if map.get($attr, "justify-items") {
@if not list.index($justify-items, map.get($attr, "justify-items")) {
@error "#{map.get($attr, "justify-items")} is not valid " +
"justify-items property. Expected on of #{$justify-items}.";
}
justify-items: map.get($attr, "justify-items");
}
@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, "place-items") {
$map-items: map.get($attr, "place-items");
@if length($map-items) == 2 {
@if not list.index($place-items, list.nth($map-items, 1)) {
@error "#{list.nth($map-items, 1)} is not valid " +
"place-items property. Expected on of #{$place-items}.";
}
@if not list.index($place-items, list.nth($map-items, 2)) {
@error "#{list.nth($map-items, 2)} is not valid " +
"place-items property. Expected on of #{$place-items}.";
}
} @else {
@if not list.index($place-items, map.get($attr, "place-items")) {
@error "#{map.get($attr, "place-items")} is not valid " +
"place-items property. Expected on of #{$place-items}.";
}
}
place-items: map.get($attr, "place-items");
}
@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-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");
}
@if map.get($attr, "place-content") {
$map-items: map.get($attr, "place-content");
@if length($map-items) == 2 {
@if not list.index($place-content, list.nth($map-items, 1)) {
@error "#{list.nth($map-items, 1)} is not valid " +
"place-content property. Expected on of #{$place-content}.";
}
@if not list.index($place-content, list.nth($map-items, 2)) {
@error "#{list.nth($map-items, 2)} is not valid " +
"place-content property. Expected on of #{$place-content}.";
}
} @else {
@if not list.index($place-content, map.get($attr, "place-content")) {
@error "#{map.get($attr, "place-content")} is not valid " +
"place-content property. Expected on of #{$place-content}.";
}
}
place-content: map.get($attr, "place-content");
}
}
.test {
display: grid;
@include grid-place(unset end, center start);
}
Raw
output.css
.test {
display: grid;
align-items: end;
place-content: start center;
}
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