Generated by SassMeister.com.

input.scss

// Colors
@import '../02-tools/tools.mixin.create-css-vars';

$colors: (
  'black': '#000',
  'white': '#fff',
  'ci': (
    'blue': '#0095DB',
    'blue-light': '#B9E4FA',
    'black': '#222',
    'gray': '#7A7A7A',
    'ethik': '#61C1C0',
    'ethik-light': '#CAEAEA',
    'fuhrung': '#DB758A',
    'fuhrung-light': '#f3d1d8',
    'gesundheit': '#EAAA57',
    'gesundheit-light': '#f8e3c7',
    'impulse': '#008360',
    'impulse-light': '#abd6ca',
    'lehrgang': '#334790',
    'lehrgang-light': '#bbc2da',
    'digital': '#7199ad',
    'digital-light': '#d0dde3',
    'miteinander': '#8ab31d',
    'miteinander-light': '#d8e5b4',
    'pflege': '#c2a712',
    'pflege-light': '#eae2b0',
    'team': '#c82574',
    'team-light': '#ecb7d1',
    'begleitung': '#e07c3e',
    'begleitung-light': '#f8e3c7',
  ),
  'gray': (
    'base': '#9e9e9e',
    '50': '#fafafa',
    '100': '#f5f5f5',
    '150': '#f9f9f9',
    '200': '#eee',
    '300': '#e0e0e0',
    '400': '#bdbdbd',
    '500': '#9e9e9e',
    '600': '#757575',
    '700': '#616161',
    '800': '#424242',
    '900': '#212121',
  ),
  'red': (
    'base': '#f44336',
    '50': '#ffebee',
    '100': '#ffcdd2',
    '200': '#ef9a9a',
    '300': '#e57373',
    '400': '#ef5350',
    '500': '#f44336',
    '600': '#e53935',
    '700': '#d32f2f',
    '800': '#c62828',
    '900': '#b71c1c',
  ),
  'green': (
    'base': '#4caf50',
    '50': '#e8f5e9',
    '100': '#c8e6c9',
    '200': '#a5d6a7',
    '300': '#81c784',
    '400': '#66bb6a',
    '500': '#4caf50',
    '600': '#43a047',
    '700': '#388e3c',
    '800': '#2e7d32',
    '900': '#1b5e20',
  ),
  'blue': (
    'base': '#2196f3',
    '50': '#e3f2fd',
    '100': '#bbdefb',
    '200': '#90caf9',
    '300': '#64b5f6',
    '400': '#42a5f5',
    '500': '#2196f3',
    '600': '#1e88e5',
    '700': '#1976d2',
    '800': '#1565c0',
    '900': '#0d47a1',
  ),
);

:root {
  // Create Colors
  @include createCSSVars($colors, 'c');

  --c-theme-base: var(--c-ci-blue);
  --c-theme-base-light: var(--c-ci-blue-light);
  --gradient: linear-gradient(
    #7ac5f4 0%,
    #a1daf8 25%,
    #a1daf8 50%,
    #0095db 50%,
    #0095db 100%
  );

  .theme-default {
    --c-theme-base: var(--c-ci-blue);
    --c-theme-base-light: var(--c-ci-blue-light);
    --gradient: linear-gradient(
      #7ac5f4 0%,
      #a1daf8 25%,
      #a1daf8 50%,
      #0095db 50%,
      #0095db 100%
    );
  }

  .theme-ethik {
    --c-theme-base: var(--c-ci-ethik);
    --c-theme-base-light: var(--c-ci-ethik-light);
    --gradient: linear-gradient(
      #8ec9c8 0%,
      #a4d8d7 25%,
      #bae7e6 50%,
      #61c1c0 50%,
      #61c1c0 100%
    );
  }

  .theme-fuhrung {
    --c-theme-base: var(--c-ci-fuhrung);
    --c-theme-base-light: var(--c-ci-fuhrung-light);
    --gradient: linear-gradient(
      #dc9fad 0%,
      #e4b0bc 25%,
      #ebc0c9 50%,
      #db758a 50%,
      #db758a 100%
    );
  }

  .theme-gesundheit {
    --c-theme-base: var(--c-ci-gesundheit);
    --c-theme-base-light: var(--c-ci-gesundheit-light);
    --gradient: linear-gradient(
      #eab87d 0%,
      #f1c48f 25%,
      #f7cf9f 50%,
      #eaaa57 50%,
      #eaaa57 100%
    );
  }

  .theme-impulse {
    --c-theme-base: var(--c-ci-impulse);
    --c-theme-base-light: var(--c-ci-impulse-light);
    --gradient: linear-gradient(
      #7bb5a2 0%,
      #93c2b3 25%,
      #abd0c4 50%,
      #008360 50%,
      #008360 100%
    );
  }

  .theme-lehrgang {
    --c-theme-base: var(--c-ci-lehrgang);
    --c-theme-base-light: var(--c-ci-lehrgang-light);
    --gradient: linear-gradient(
      #999bc4 0%,
      #aaabcf 25%,
      #b8bad8 50%,
      #334790 50%,
      #334790 100%
    );
  }

  .theme-digital {
    --c-theme-base: var(--c-ci-digital);
    --c-theme-base-light: var(--c-ci-digital-light);
    --gradient: linear-gradient(
      #95b0c1 0%,
      #aac2d2 25%,
      #bed4e2 50%,
      #7199ad 50%,
      #7199ad 100%
    );
  }

  .theme-miteinander {
    --c-theme-base: var(--c-ci-miteinander);
    --c-theme-base-light: var(--c-ci-miteinander-light);
    --gradient: linear-gradient(
      #a5bc5f 0%,
      #b5c877 25%,
      #c4d58e 50%,
      #8ab31d 50%,
      #8ab31d 100%
    );
  }

  .theme-pflege {
    --c-theme-base: var(--c-ci-pflege);
    --c-theme-base-light: var(--c-ci-pflege-light);
    --gradient: linear-gradient(
      #dbbe5f 0%,
      #ddc474 25%,
      #dfcc8c 50%,
      #c2a712 50%,
      #c2a712 100%
    );
  }

  .theme-begleitung {
    --c-theme-base: var(--c-ci-begleitung);
    --c-theme-base-light: var(--c-ci-begleitung-light);
    --gradient: linear-gradient(
      #efb28d 0%,
      #f3bd99 25%,
      #f6c5a4 50%,
      #e07c3e 50%,
      #e07c3e 100%
    );
  }

  .theme-team {
    --c-theme-base: var(--c-ci-team);
    --c-theme-base-light: var(--c-ci-team-light);
    --gradient: linear-gradient(
      #dd9ab5 0%,
      #e2a4bd 25%,
      #e6adc4 50%,
      #c82574 50%,
      #c82574 100%
    );
  }

  .bg-gray-150 {
    background-color: var(--c-gray-150);
  }
}

output.css

.foo--size-1 {
  grid-column: calc(24 /2)/span 1;
  grid-row: calc(24 / 2)/span 1;
}
.foo--size-2 {
  grid-column: calc(23 /2)/span 2;
  grid-row: calc(23 / 2)/span 2;
}
.foo--size-3 {
  grid-column: calc(22 /2)/span 3;
  grid-row: calc(22 / 2)/span 3;
}
.foo--size-4 {
  grid-column: calc(21 /2)/span 4;
  grid-row: calc(21 / 2)/span 4;
}
.foo--size-5 {
  grid-column: calc(20 /2)/span 5;
  grid-row: calc(20 / 2)/span 5;
}
.foo--size-6 {
  grid-column: calc(19 /2)/span 6;
  grid-row: calc(19 / 2)/span 6;
}
.foo--size-7 {
  grid-column: calc(18 /2)/span 7;
  grid-row: calc(18 / 2)/span 7;
}
.foo--size-8 {
  grid-column: calc(17 /2)/span 8;
  grid-row: calc(17 / 2)/span 8;
}
.foo--size-9 {
  grid-column: calc(16 /2)/span 9;
  grid-row: calc(16 / 2)/span 9;
}
.foo--size-10 {
  grid-column: calc(15 /2)/span 10;
  grid-row: calc(15 / 2)/span 10;
}
.foo--size-11 {
  grid-column: calc(14 /2)/span 11;
  grid-row: calc(14 / 2)/span 11;
}
.foo--size-12 {
  grid-column: calc(13 /2)/span 12;
  grid-row: calc(13 / 2)/span 12;
}
.foo--size-13 {
  grid-column: calc(12 /2)/span 13;
  grid-row: calc(12 / 2)/span 13;
}
.foo--size-14 {
  grid-column: calc(11 /2)/span 14;
  grid-row: calc(11 / 2)/span 14;
}
.foo--size-15 {
  grid-column: calc(10 /2)/span 15;
  grid-row: calc(10 / 2)/span 15;
}
.foo--size-16 {
  grid-column: calc(9 /2)/span 16;
  grid-row: calc(9 / 2)/span 16;
}
.foo--size-17 {
  grid-column: calc(8 /2)/span 17;
  grid-row: calc(8 / 2)/span 17;
}
.foo--size-18 {
  grid-column: calc(7 /2)/span 18;
  grid-row: calc(7 / 2)/span 18;
}
.foo--size-19 {
  grid-column: calc(6 /2)/span 19;
  grid-row: calc(6 / 2)/span 19;
}
.foo--size-20 {
  grid-column: calc(5 /2)/span 20;
  grid-row: calc(5 / 2)/span 20;
}
.foo--size-21 {
  grid-column: calc(4 /2)/span 21;
  grid-row: calc(4 / 2)/span 21;
}
.foo--size-22 {
  grid-column: calc(3 /2)/span 22;
  grid-row: calc(3 / 2)/span 22;
}
.foo--size-23 {
  grid-column: calc(2 /2)/span 23;
  grid-row: calc(2 / 2)/span 23;
}
.foo--size-24 {
  grid-column: calc(1 /2)/span 24;
  grid-row: calc(1 / 2)/span 24;
}

settings.json

{
  "sass": {
    "compiler": "Ruby Sass/3.7.4",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}