Created
February 27, 2023 17:03
-
-
Save spazione/533bde174e77bdf0dbb6e153f0b8baae to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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:string"; | |
@use 'sass:meta'; | |
@use "sass:map"; | |
@function str-replace($string, $search, $replace: "") { | |
$index: str-index($string, $search); | |
@if $index { | |
@return str-slice($string, 1, $index - 1) + $replace + | |
str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
} | |
@return $string; | |
} | |
@function str-split($string, $separator) { | |
// empty array/list | |
$split-arr: (); | |
// first index of separator in string | |
$index : str-index($string, $separator); | |
// loop through string | |
@while $index != null { | |
// get the substring from the first character to the separator | |
$item: str-slice($string, 1, $index - 1); | |
// push item to array | |
$split-arr: append($split-arr, $item); | |
// remove item and separator from string | |
$string: str-slice($string, $index + 1); | |
// find new index of separator | |
$index : str-index($string, $separator); | |
} | |
// add the remaining string to list (the last item) | |
$split-arr: append($split-arr, $string); | |
@return $split-arr; | |
} | |
@function value-replace($list, $old-value, $new-value, $recursive: false) { | |
$result: (); | |
@for $i from 1 through length($list) { | |
@if type-of(nth($list, $i)) == list and $recursive { | |
$result: append( | |
$result, | |
value-replace(nth($list, $i), $old-value, $new-value, $recursive) | |
); | |
} @else { | |
@if nth($list, $i) == $old-value { | |
$result: append($result, $new-value); | |
} @else { | |
$result: append($result, nth($list, $i)); | |
} | |
} | |
} | |
@return $result; | |
} | |
@function list-to-string($list, $glue: '', $is-nested: false) { | |
$result: null; | |
@for $i from 1 through length($list) { | |
$e: nth($list, $i); | |
@if type-of($e) == list { | |
$result: $result#{to-string($e, $glue, true)}; | |
} @else { | |
$result: if( | |
$i != length($list) or $is-nested, | |
$result#{$e}#{$glue}, | |
$result#{$e} | |
); | |
} | |
} | |
@return $result; | |
} | |
$eurobet-btn: ( | |
prefix: "btn", | |
vars: ( | |
primary: ( | |
solid: ( | |
enabled:( | |
default: ( | |
color: #000, | |
background-color:white, | |
// border: pink, | |
), | |
hover: ( | |
background-color:white, | |
// border: pink, | |
), | |
active: ( | |
background-color:white, | |
// border: pink, | |
), | |
), | |
// disabled:( | |
// default: ( | |
// background: var($palette, Aries), | |
// ), | |
// hover: ( | |
// background: var($palette, Aries), | |
// ), | |
// active: ( | |
// background: var($palette, Aries), | |
// ), | |
// ), | |
), | |
), | |
), | |
); | |
$btn: ( | |
prefix: "btn", | |
vars: ( | |
size: ( | |
xs: ( | |
height: 30px, | |
font-size: 1em, | |
padding: 8px 12px, | |
gap: 8px, | |
line-height: 1.1875em, | |
), | |
small: ( | |
height: 40px, | |
font-size: 1.125em, | |
padding: 8px 16px, | |
gap: 8px, | |
), | |
medium: ( | |
height: 44px, | |
font-size: 1.25em, | |
padding: 10px 16px, | |
gap: 10px, | |
), | |
large: ( | |
height: 48px, | |
font-size: 1.5em, | |
padding: 12px 16px, | |
gap: 12px, | |
), | |
), | |
), | |
); | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Default Settings | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
$name: null; | |
$block: null; | |
$root: null; | |
$element-separator: "__" !default; | |
$modifier-separator: "--" !default; | |
$modifier-check: false; | |
$where-mode: true; | |
$where-prefix: ':where(' !default; | |
$where-suffix: ')' !default; | |
$state-check: null; | |
$scope2: null; | |
$nested: false; | |
$block-type: null; | |
$wrapper: ''; | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Blocktype checker | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin blocktype($input, $name) { | |
$block: $name !global; | |
// Some initial checks before the block-type has been seted | |
@if $block-type == null { | |
$nested: false !global; | |
} @else if $block-type == $input and $nested == false { | |
$nested: true !global; | |
} | |
@if $nested == true { | |
$nested-item-name : '.#{$name}' !global; | |
} | |
// Set the block-type globaly | |
$block-type: $input !global; | |
// Other checks after the block-type was set | |
@if $input == 'components' { | |
$where-prefix: '' !global; | |
$where-suffix: '' !global; | |
$where-mode: false !global; | |
} @else if $input == 'objects' { | |
$where-prefix: ':where(' !global; | |
$where-suffix: ')' !global; | |
$where-mode: true !global; | |
} | |
@if $nested == true { | |
$where-prefix: '' !global; | |
$where-suffix: '' !global; | |
$where-mode: false !global; | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Component Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin component($name, $include-theme: '', $groupsvars...) { | |
@include blocktype('components', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('/src/scss/#{$block-type}/#{$name}/#{$block-type}.#{$name}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Extend Component Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin extend-component($name, $extend, $include-theme: '', $groupsvars...) { | |
@include blocktype('components', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
@include modifier($extend) { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
} | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('/src/scss/#{$block-type}/#{$extend-component}/#{$block-type}.#{$extend-component}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Object Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin object($name, $include-theme: '', $groupsvars...) { | |
@include blocktype('objects', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
$where-prefix: ':where(' !global; | |
$where-suffix: ')' !global; | |
$where-mode: true !global; | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('@base/scss/#{$block-type}/#{$extend}/#{$block-type}.#{$extend}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Extend Component Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin extend-object($name, $extend: '', $include-theme: '', $groupsvars...) { | |
@include blocktype('objects', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
@include modifier($extend) { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
} | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('@base/scss/#{$block-type}/#{$extend}/#{$block-type}.#{$extend}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Trim parent class Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin trim-parent-class($root, $nested-item-name) { | |
$splited-root: str-split($root, ' '); | |
@each $key in $splited-root { | |
@if (str-index($key, --)) == null and (str-index($key, __)) == null { | |
$wrapper : list-to-string(value-replace($splited-root, $nested-item-name, ''), ' ') !global; | |
} @else { | |
$wrapper: $root !global; | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Element Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin element($name) { | |
@if $modifier-check == true or $state-check == true { | |
@at-root { | |
$root: '#{&}'; | |
@if $nested != true { | |
#{$root} .#{$block}#{$element-separator}#{$name} { | |
@content; | |
} | |
} @else { | |
@include trim-parent-class($root, $nested-item-name); | |
#{$wrapper} .#{$block}#{$element-separator}#{$name} { | |
@content; | |
} | |
$wrapper: null !global; | |
} | |
} | |
} @else { | |
@at-root { | |
@if $nested == true { | |
$root: '#{&}'; | |
@include trim-parent-class($root, $nested-item-name); | |
} | |
#{$where-prefix}#{$wrapper} .#{$block}#{$element-separator}#{$name}#{$where-suffix} { | |
where: '#{$where-prefix}'; | |
@content; | |
} | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Extract Button properties Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align) { | |
// COMMON PROPERTIES | |
$common-properties: map.get($btn, vars, size, $size ); | |
@each $property, $value in $common-properties { | |
#{$property}: string.unquote('var(--btn-size-#{$size}-#{$property})'); | |
} | |
// THEME PROPERTIES | |
$theme-styles: map.get($theme-settings, vars, $category, $variant, $state ); | |
@each $style, $value in $theme-styles { | |
@if $style == 'default' { | |
@each $property, $value in $value { | |
#{$property}: string.unquote('var(--btn-#{$category}-#{$variant}-#{$state}-#{$style}-#{$property})'); | |
} | |
} @else { | |
@include selector(':#{$style}') { | |
@each $property, $value in $value { | |
#{$property}: string.unquote('var(--btn-#{$category}-#{$variant}-#{$state}-#{$style}-#{$property})'); | |
} | |
} | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// BTN Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin btn($name, $theme-settings, $size: 'medium', $category: 'primary', $variant: 'solid', $state: 'enabled', $icon: 'true', $icon-align: 'left') { | |
@if $modifier-check == true or $state-check == true { | |
@at-root { | |
$root: '#{&}'; | |
@if $nested != true { | |
#{$root} .#{$block}#{$element-separator}btn-#{$name}:#{$state} { | |
@include extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align); | |
@content; | |
} | |
} @else { | |
@include trim-parent-class($root, $nested-item-name); | |
#{$wrapper} .#{$block}#{$element-separator}btn-#{$name}:#{$state} { | |
@include extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align); | |
@content; | |
} | |
} | |
} | |
} @else { | |
@at-root { | |
@if $nested == true { | |
$root: '#{&}'; | |
@include trim-parent-class($root, $nested-item-name); | |
} | |
#{$where-prefix}#{$wrapper} .#{$block}#{$element-separator}btn-#{$name}:#{$state}#{$where-suffix} { | |
@include extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align); | |
@content; | |
} | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Modifier Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin modifier($name) { | |
@if $modifier-check == true or $state-check == true { | |
@at-root { | |
$modifier-check: true !global; | |
&#{$modifier-separator}#{$name} { | |
@content; | |
} | |
$modifier-check: true !global; | |
} | |
} @else { | |
@at-root { | |
$block: &; | |
@if $where-mode == true { | |
$block: str-slice(#{$block}, 8, str-length(#{$block})-1); | |
} | |
$modifier-check: true !global; | |
#{$where-prefix}#{$block}#{$modifier-separator}#{$name}#{$where-suffix} { | |
@content; | |
} | |
$modifier-check: false !global; | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Selector Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin selector($state) { | |
$state-check: true !global; | |
$parent: &; | |
$state-wrapper: '#{$parent}#{$state}' !global; | |
@at-root { | |
#{$parent}#{$state}{ | |
@content; | |
} | |
} | |
$state-check: false !global; | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Scope Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin scope2($name, $scope2...) { | |
$where-prefix: '' !global; | |
$where-suffix: '' !global; | |
$where-mode: false !global; | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
@each $scopekey2 in $scope2{ | |
@include modifier($scopekey2) { | |
@content; | |
} | |
} | |
} | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
@include component('qwe') { | |
content: 'block'; | |
@include element('label') { | |
content: element-3; | |
} | |
@include modifier('canale-arancione') { | |
@include element('label') { | |
content: element-3; | |
} | |
} | |
@include element('element') { | |
content: element-3; | |
@include modifier('modifier') { | |
content: element-3; | |
@include element('element') { | |
content: element-3; | |
} | |
} | |
} | |
} | |
This file contains 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
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.qwe { | |
content: "block"; | |
} | |
.qwe__label { | |
where: ""; | |
content: element-3; | |
} | |
.qwe--canale-arancione .qwe__label { | |
content: element-3; | |
} | |
.qwe__element { | |
where: ""; | |
content: element-3; | |
} | |
.qwe__element--modifier { | |
content: element-3; | |
} | |
.qwe__element--modifier .qwe__element { | |
content: element-3; | |
} |
This file contains 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