Generated by SassMeister.com.

input.scss

// Палитра
@use "sass:meta";

@function mi($val...){
  @return #{meta.inspect($val)};
}

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

@function hslToRGB($hsl) {
  @return mix($hsl,$hsl);
}


$палитра__цвет--основной: hsl(233, 57%, 37%);
$палитра__цвет--вторичный: hsl(78, 64%, 45%);


:root{
  --palette-primary: #{meta.inspect($палитра__цвет--основной)};
  --palette-primary--rgb: #{hslToRGB($палитра__цвет--основной)};
  --palette-secondary: #{meta.inspect($палитра__цвет--вторичный)};
  --palette-secondary--rgb: #{hslToRGB($палитра__цвет--вторичный)};
}

@mixin header-nav($clr-link, $size-link:12pt, $bg:transparent){

  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: $size-link;
  background: $bg;
  li{
    &:not(:last-child) {
      margin: 0 10px 0 0;
    }
  }
  a,[title],button{
    display: inline-block;
    color: $clr-link;
    text-decoration: unset;
    background: transparent;
    padding: 5px 10px;
    border-radius: 9999px;
    transition: all .2s ease-in-out;
    cursor: pointer;
    border: none;
    font-size: unset;
    &:hover{
      color: invert($clr-link);
      background: white;
      //padding: 5px 10px;
    }
    &:active{
      color: $clr-link;
      background: black;
      //padding: 5px 10px;
    }
  }

  transition: all .2s ease-in-out;
}

.nav{
    @include header-nav(var(--palette-secondary--rgb));
}

output.css

:root {
  --palette-primary: #293594;
  --palette-primary--rgb: 41, 53, 148;
  --palette-secondary: #90bc29;
  --palette-secondary--rgb: 144, 188, 41;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}