Uikit: Custom prefix as a Sass variable

Created on 10 Jan 2018  路  3Comments  路  Source: uikit/uikit

I've started to use UIKit a few weeks ago and I liked it a lot! Code is very well thought and neatly organized, set of components are exactly what I need for the project. I especially appreciate your effort in making a class prefix customizable. This is a must have feature for any complex project.

However, I'm wondering why do we have to ran a script on CSS file in order to make a prefix replacement. Wouldn't it be more natural to declare prefix as a Sass variable and use it throughout the code? Here is an example of how I think it could be done:

$prefix: "uk-";

.#{$prefix}form-label {
  // some code
}

I think that would be more natural than to run a script as an extra step in an assembly process. I see that JS code already uses prefix as a variable, so why not to use a similar approach in Sass? Would there be any drawbacks to that? Because I don't see any so far.

Most helpful comment

I support this implementation.
This way i can use the prefix during development, or is there an easy way.

All 3 comments

I support this implementation.
This way i can use the prefix during development, or is there an easy way.

Please implement this - I'm just starting with UIKit and discovering that I cannot use the prefixer with sass because I've installed UIKit via npm and the prefixer only runs on the compiled css in the node module. When I import the sass into my own sass to compile, there's no way to prefix it, since I'm not using the compiled css in the node module.

This would be a great feature.

Was this page helpful?
0 / 5 - 0 ratings