tunguskha

How to couple Sass and CSS Var

If you use Sass extension, you can work with CSS variables.

First, let's create our css variable.

\:root
  --MyColor: #5966D2

tunguskha

Gradient shadow in pure CSS

HTML

<button>Let's Go !</button>

tunguskha

:root {
  /* Base color using HSL */
  --hue: 207;
  --saturation: 64%;
  --light: 44%;
  
  /* Base color in variable */
  --primary-color: hsl(var(--hue), var(--saturation), var(--light));
 /* Base color lighten using calc */

tunguskha

var isoCode = {
    'Afghanistan': 'AF',
    'Aland Islands': 'AX',
    'Albania': 'AL',
    'Algeria': 'DZ',
    'American Samoa': 'AS',
    'Andorra': 'AD',
    'Angola': 'AO',
    'Anguilla': 'AI',
    'Antarctica': 'AQ',