не работают вычисления в стилях

Question

есть SCSS — работает делаю в CSS такую же запись — не работает пример:

Не понимаю в чем дело?

    <body class="is-grid"></body>
<style>
    $grid_color: #00f;
    $grid_margin: percentage(40 / 1920); // 40 / 1920 * 100%;
    $grid_width: percentage(157 / (1920 - 40 * 2));
    $grid_gutter: percentage(30 / (1920 - 40 * 2));
    
    body {
        position: relative;
        padding: 50px 0;
        min-height: 100vh;
        
        &.is-grid::after {
            content: '';
            position: absolute;
            z-index: 1000;
            top: 0;
            bottom: 0;
            left: $grid_margin;
            right: $grid_margin;
            opacity: 0.15;
            background: repeating-linear-gradient(90deg,
                $grid_color 0,
                $grid_color $grid_width,
                transparent $grid_width,
                transparent $grid_width + $grid_gutter);
            pointer-events: none;
        }
    }
    </style>
    
    
    вот моя css версия
    
    
<body class="is-grid"></body>
    
<style>
     :root {
        --grid_color: red;
        --grid_margin: calc(40 / 1920 * 100%);
        --grid_width: calc(157 / (1920 - 40 * 2));
        --grid_gutter: calc(30 / (1920 - 40 * 2));
    }
    

   body {
        position: relative;
        padding: 50px 0;
        min-height: 100vh;
        
    
    }
    
        .is-grid:after {
            content: '';
            position: absolute;
            z-index: 1000;
            top: 0;
            bottom: 0;
            left: var(--grid_margin);
            right: var(--grid_margin);;
            opacity: 0.15;
            background: repeating-linear-gradient(90deg,
                var(--grid_color) 0,
                var(--grid_color) var(--grid_width),
                transparent -var(--grid_width),
                transparent var(--grid_width) + var(--grid_gutter)); 
         pointer-events: none;
        }

БЛОГ НА HUSL

не работают вычисления в стилях

Ответы (0 шт):