Prefixing CSS in Yii2?

[webcast_studio]

Hi,

I’m currently working with a SCSS file in Yii2. It is converted to CSS with an extension, but this extension doesn’t prefix the css. Is there a recommended way to prefix the CSS code within Yii2, or do I have to rely on third party software (like PrePros, …) ? I’ve scanned the forum and the docs, but don’t seem to find any information on it.

For clarification, I’m looking for a way to turn scss into prefixed css, so an example here:

.classname{
display:flex;
}

=> should become =>

.classname{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

[softark]

I’m not very familiar with asset conversion, so I might be wrong in the following.

First off, there’s a section on the conversion of SCSS files to CSS files in the document.

Guide > Application Structure > Assets > Asset Conversion
https://www.yiiframework.com/doc/guide/2.0/en/structure-assets#asset-conversion

According to it, Yii is capable of converting SCSS to CSS out of the box.

And googling around for ‘scss vendor prefix’ shows me some tips regarding the automatic adding of vendor prefixes. It looks like that using mixin is a decent solution. One example is in the official docs of ‘SASS’.
https://sass-lang.com/guide

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here’s an example for transform.

SCSS SYNTAX

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

CSS OUTPUT

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin transform. We’re also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

And another approach might be using a third-party tool that automatically adds vendor prefixes while converting SCSS to CSS. Hopefully you might be able to customize the converter commands of Yii to use such a tool. But I’m not sure, because I’m a sheer noob in this area.

@everybody Correct me if I’m wrong.