1. My plugin directory structure looks like:

plugins/
    author-name/
        plugin-name/
            assets/
                sass/
                    _variables.scss
                    mycomponent.scss
            classes/
            components/
                mycomponent/
                    default.htm
                MyComponent.php
            ...
            Plugin.php

2. _variables.scss contains:

// Breakpoints
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

3. Component properties are define in MyComponent.php like so:

public function defineProperties() {
    return [
        'sm' => [
             'title'             => 'Breakpoint (sm)',
             'type'              => 'string',
             'default'           =>  576,
             'validationPattern' => '^[0-9]+$',
             'validationMessage' => 'The Breakpoint (sm) property can contain only numeric symbols'
        ],
        ...
    ];
}

4. Sass is inlcuded in MyComponent.php like so:

public function onRun() {  
    // CSS
    $cssAssets = [
        ...
        'assets/sass/_variables.scss',
        'assets/sass/my-component.scss'
    ];
    $this->addCss(CombineAssets::combine($cssAssets, plugins_path('author-name/plugin-name/')));
}

I know that I can insert theme form variables on my sass files like so:

breakpoint_sm:
    label: Breakpoint (sm)
    type: text
    assetVar: 'sm'

But I am not sure how to do it with component properties. I would appreciate if someone could help me out.

In case someone is interested, I did it with CSS custom properties (variables) like so:

I can access any component property inside the Twig partials for the component, and then set a CSS custom property like so:

{% put styles %}
    <style>
        :root {
            --component-property: {{ __SELF__.property('componentProperty') }}
        }
    </style>
{% endput %}

Then I can use var(--component-property) in my SASS files.

Last updated 3 years ago

Nice solution!