Created
September 28, 2022 15:59
-
-
Save JoeCianflone/0dcab4f8ade3ea5e16a93c2230915f8b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @use 'sass:selector'; | |
| @use 'sass:list'; | |
| @use 'sass:string'; | |
| @function replace($string, $search, $replace: '') { | |
| $index: string.index($string, $search); | |
| @if $index { | |
| @return string.slice($string, 1, $index - 1) + $replace + replace(string.slice($string, $index + string.length($search)), $search, $replace); | |
| } | |
| @return $string; | |
| } | |
| @function e($name, $encode: (':', '\\:')) { | |
| $key: list.nth($encode, 1); | |
| $value: list.nth($encode, 2); | |
| @return string.unquote(#{replace($name, $key, $value)}); | |
| } | |
| @mixin when($selector, $scope: 'root', $parent: &, $type: "is") { | |
| @if ($type != "is" and $type != "where") { | |
| @error "in WHEN mixin, $type can only be 'is' or 'where', $type set to: #{$type}"; | |
| } | |
| @if ($scope != "root" and $scope != "parent" and $scope != "grandparent") { | |
| @error "in WHEN mixin, $scope can only be 'root', 'parent', or 'grandparent', $scope set to: #{$scope}"; | |
| } | |
| $ancestors: _selector-to-list($parent); | |
| $walk-start-start: 1; | |
| $walk-start-end: 1; | |
| $walk-end-start: list.length($ancestors); | |
| @if ($scope == 'grandparent') { | |
| $walk-start-start: 1; | |
| $walk-start-end: list.length($ancestors) - 2; | |
| } @else if($scope == 'parent') { | |
| $walk-start-start: 1; | |
| $walk-start-end: list.length($ancestors) - 1; | |
| } | |
| $start: _walk-selector-to($ancestors, $walk-start-start, $walk-start-end); | |
| $end: ''; | |
| @if ($walk-end-start > 1) { | |
| $end: _walk-selector-to($ancestors, $walk-end-start); | |
| } | |
| @at-root { | |
| #{$start}:#{$type}(#{e($selector)}) #{$end} { | |
| @content; | |
| } | |
| } | |
| } | |
| /// Take a selector list, parse it, then walk down the list from $start to $end | |
| @function _walk-selector-to($selector, $split-start, $split-end: -1) { | |
| $walked: (); | |
| $split-end: if($split-end < 0, list.length($selector), $split-end); | |
| @for $i from $split-start through $split-end { | |
| $walked: list.append($walked, nth($selector, $i)); | |
| } | |
| @return $walked; | |
| } | |
| @function _selector-to-list($selector-string) { | |
| $selector: selector.parse($selector-string); | |
| @return nth($selector, 1); | |
| } | |
| .navigation { | |
| background: red; | |
| @include when(".navigation:main") { | |
| background: black; | |
| } | |
| .navigation--list { | |
| display: flex; | |
| gap: 1rem; | |
| list-style-type: none; | |
| padding: 0; | |
| flex-direction: column; | |
| @include when(".navigation:main") { | |
| flex-direction: row; | |
| } | |
| } | |
| .navigation--item { | |
| color: #000; | |
| @include when('.navigation:main') { | |
| color: #fff; | |
| } | |
| > a { | |
| color: inherit; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="navigation"> | |
| <ul class="navigation--list"> | |
| <li class="navigation--item"><a href="" class="navigation--link">Home</a></li> | |
| <li class="navigation--item"><a href="" class="navigation--link">About</a></li> | |
| <li class="navigation--item"><a href="" class="navigation--link">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <nav class="navigation navigation:main"> | |
| <ul class="navigation--list"> | |
| <li class="navigation--item"><a href="" class="navigation--link">Home</a></li> | |
| <li class="navigation--item"><a href="" class="navigation--link">About</a></li> | |
| <li class="navigation--item"><a href="" class="navigation--link">Contact</a></li> | |
| </ul> | |
| </nav> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .navigation { | |
| background: red; | |
| } | |
| .navigation:is(.navigation\:main) { | |
| background: black; | |
| } | |
| .navigation .navigation--list { | |
| display: flex; | |
| gap: 1rem; | |
| list-style-type: none; | |
| padding: 0; | |
| flex-direction: column; | |
| } | |
| .navigation:is(.navigation\:main) .navigation--list { | |
| flex-direction: row; | |
| } | |
| .navigation .navigation--item { | |
| color: #000; | |
| } | |
| .navigation:is(.navigation\:main) .navigation--item { | |
| color: #fff; | |
| } | |
| .navigation .navigation--item > a { | |
| color: inherit; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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