Element CSS Mixins

CSS Mixins

There is an option to use mixins for generated styles such as color or size. Mixins are prepared and formatted CSS code designed to generate unique style for an element.

In the example below is shown a mixin to change the color of the button, created setting named color has an option field cssMixin with properties mixin to give file name where mixin is stored (“basicColor”) and property to name variable to store attribute value (“color”.)

settings.json

{
 ...
 "color": {
   "type": "color",
   "access": "public",
   "value": "#fff",
   "options": {
     "label": "Title color",
     "cssMixin": {
       "mixin": "basicColor",
       "property": "color",
       "namePattern": "[\\da-f]+"
     }
   }
 }
 ...
}

componentName/cssMixins/basicColor.pcss

.vce-button {
 &--color-$selector {
   color: $color;
   &:hover {
     color: color($color shade(10%));
   }
 }
}

$selector is auto-generated variable with unique mixin selector
$color is variable where the attribute value is stored. Its name matches with options.cssMixin.property value.

Also, it is possible to get mixin data in component .js file by using a helper getMixinData()

component .js

...
// get mixins data
let mixinData = this.getMixinData('basicColor')
if (mixinData) {
  classes += ` vce-button--color-${mixinData.selector}`
}
...

PostCSS

It is possible to use some POSTCSS features in CSS mixins and styles.css file

A complete list of POSTCSS plugins what are in use is:

Complete list of custom media queries:

  • all, all-only: all available devices;
  • xs, mobile-portrait: mobile portrait and above;
  • xs-only, mobile-portrait-only: mobile portrait only;
  • sm, mobile-landscape: mobile landscape and above;
  • sm-only, mobile-landscape-only: mobile landscape only;
  • md, tablet-portrait: tablet portrait and above;
  • md-only, tablet-portrait-only: tablet portrait only;
  • lg, tablet-landscape: tablet landscape and above;
  • lg-only, tablet-landscape-only: tablet landscape only;
  • xl, desktop: desktop and above;
  • xl-only, desktop-only: desktop only.

styles.css

$bodyColor: #fff;
@media (--md-only) {
  body {
    background: $bodyColor;
  }
}