Namespaces

Theoretically the global introduction of the file sacss/index.css, in which all class names will become global CSS keywords, can easily cause CSS naming pollution.

Here we provide the LESS and SASS WidthPrefix Mixin to add a uniform prefix to the entire core code as a namespace to reduce the scope of pollution.

LESS

@import 'sacss/less/WidthPrefix';

@prefix: '_'; // This is replaced with the prefix you want to add

#WidthPrefix(@prefix);

SASS

@import 'sacss/sass/WidthPrefix';

$prefix: '_'; // This is replaced with the prefix you want to add

@include WidthPrefix($prefix);

OUTPUT CSS

/* will add a '_' prefix to each CSS in sacss/index.css */

. _db{display:block}

. _df{display:flex}

. _fw400{font-weight:400}

/* The rest of the code is ignored here... */

This way all our core classes will be prefixed with _.

CSS does not have Mixin functionality, please download the CSS file to add it manually.

Not recommended

Although we provide the ability to add prefixes to our core code.

However, in practice, we don't really recommend doing this.

Or we recommend that prefixes should be as short as possible, and _ is the only prefix we recommend to use.

Because the core code of SACSS is used very frequently, writing a prefix before each class would increase the amount of code and make it unusually verbose.

Moreover, the problem of naming pollution, in our actual multiple projects and years of experience, the probability of occurrence is very small, and even if it happens, it is easy to avoid.