Since these values are defined at root level, you can just update them using document. I am not exactly sure on how you can access the document in angular, but once you have document, you can do something like this:

document.documentElement.style.setProperty(`--${your-variable}`, value + suffix); //suffix may be px or ''

This way, you will directly set the css variable which will take effect at all the places and you will not have to target individual elements.

I use it like this. Maybe you can try it.

Maybe it's because my file name is module. scss.

~/assets/styles/variables.module.scss

$header-top-height: 24px;
$header-height: 80px;
$footer-height: 90px;
$default-bg-color: #ffffff;
$default-color: #3366ff;

:export {
  headerTopHeight: $header-top-height;
  headerHeight: $header-height;
  footerHeight: $footer-height;
  defaultColor: $default-color;
  defaultBgColor: $default-bg-color;
}

~/layouts/default.vue

import variables from '~/assets/styles/variables.module.scss'
console.log(variables)

{
  headerTopHeight: '24px',
  headerHeight: '80px',
  footerHeight: '90px',
  defaultColor: '#3366ff',
  defaultBgColor: '#ffffff'
}

Like this:

function Component() {
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

Or without the extra style variable:

function Component() {
  return <div style={{ "--my-css-var": 10 } as React.CSSProperties} />
}

The {'min-height': '{{taille}}'} part should in fact be {'min-height': taille}.
Angular documentation presents the below very similar example:

<div [ngStyle]="{'color': colorPreference}">

From your sample code it seems that taille is initially undefined which you might want to take into account (initialize taille or use a ngIf or other approach).

I have a way to do this using a styles service based on https://en.programqa.com/question/52907585/

Within Global.SCSS

@mixin ExportVariables($map, $prefix: null) {
  $mapPrefix: "--#{$prefix}";

  @if ($prefix){
    $mapPrefix: "#{$mapPrefix}-";
  }

  body {
    @each $name, $value in $map {
      #{$mapPrefix}#{$name}: $value;
    }
  }
}

--idle-state: #29ABE2;

// Import each of these in the theme service
$stateSCSS:(
  idle: var(--idle-state),
);
@include ExportVariables($stateSCSS, 'stateSCSS');

In the Service

const bodyStyles = window.getComputedStyle(document.body);

this.stateSCSS = {
  idle: bodyStyles.getPropertyValue('--stateSCSS-idle'),
};

I think it's not possible to access the ts file variables from the CSS file, but you can get elements from DOM and set style to that from the ts file.

an example:

document.getElementById('element').style.backgroundImage = background_url;

also if you are using frameworks like angular, you can use @ViewChild to get elements from DOM and style them by using the renderer2 library like this:

export class NavbarComponent { 
   @ViewChild('element') element: ElementRef;
   background_url='../../../assets/img/background.png';
   
   constructor(private renderer: Renderer2) {}

   setStyle() {
       this.renderer.setStyle(
           this.element.nativeElement,
           'background-image',
           this.background_url
       );
   }
}

and then call the setStyle function where ever you want.
more from renderer2: https://angular.io/api/core/Renderer2

Yes you can set variables in root scope:

:root {
  --main-color: red
}

Yes you can use :host selector to target element in which the component is hosted.

:host {
  display: block;
  border: 1px solid black;
}

You can also use, :host-context to target any ancestor of the component. The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root.

:host-context(.theme-light) h2 {
  background-color: #eef;
}

Note: ::ng-deep or /deep/ or >>> has been deprecated.

Read more about it here: special css selectors in angular

Just an additional information. It works both inside ':root' as well as ':host' We can set values to them by:

constructor(private elementRef: ElementRef) { } then this.elementRef.nativeElement.style.setProperty('--color', 'red');