https://github.com/onehilltech/ember-cli-custom-properties

Adds support for CSS custom properties (variables) to components
https://github.com/onehilltech/ember-cli-custom-properties

components css custom-properties ember ember-addon variables

Last synced: about 2 months ago
JSON representation

Adds support for CSS custom properties (variables) to components

• Host: GitHub
• URL: https://github.com/onehilltech/ember-cli-custom-properties
• Owner: onehilltech
• License: apache-2.0
• Created: 2018-10-14T23:40:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-05-20T12:58:53.000Z (over 1 year ago)
• Last Synced: 2024-11-11T20:28:11.818Z (2 months ago)
• Topics: components, css, custom-properties, ember, ember-addon, variables
• Language: JavaScript
• Size: 829 KB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-cli-custom-properties

Adds support for CSS custom properties (variables) to your application

Installation

-------------

    ember install ember-cli-custom-properties

Features

----------

* Uses modifiers to apply custom properties

* Maps component attributes to CSS custom properties

* Fast, lightweight implementation

* Only updates CSS custom properties when its bound component value changes

* Zero configuration design

* Production ready

Usage

-----------------------------

Starting with Ember 2.17 or later, we switched to using modifiers to set custom properties 

on an element. This design decision makes it a lot easier to apply a custom property at any

level of the application, including top-level templates.

Here is the new an improved way for setting a custom property. You just need to make sure 

the variables passed into the modifier is tracked.

```handlebars



```


The first parameter to the modifier is the custom property in from your CSS file. The second

parameter is the value of the custom property.

### Removing a Property

You remove a CSS custom property value by simply setting its bound component

property to `null` or `undefined`.

Happy Coding!