django-sass-processor icon indicating copy to clipboard operation
django-sass-processor copied to clipboard

Custom function in list scss for only sass_src

Open haricot opened this issue 6 years ago • 0 comments

Starting from the fact that libsass can not use the custom_functions in a list scss natively. An action has been implemented to overcome this and concerns only the source sass_src file.

The conditions are as follows:

  • the name of the function define in settings SASS_PROCESSOR_CUSTOM_FUNCTIONS must have "presass" in its name.
  • must not have args in parameter.

Its operation is as follows:

{% addtoblock "css" %}<link rel="stylesheet" href="{% sass_src 'bs4demo/css/main.scss' %}" type="text/css" />{% endaddtoblock %}

From the main.scss files, a main__presass.scss file is created which has hard values in the files. Then, to check if main.scss has been modified, the file css.map is scrapper to restore its source origin.

Example: settings.py

SASS_PROCESSOR_CUSTOM_FUNCTIONS = {
    'get-color-primary-presass': 'cmsplugin_cascade.theme.utils.get_color_primary',
    'get-color-secondary-presass': 'cmsplugin_cascade.theme.utils.get_color_secondary',
    'get-color-success-presass': 'cmsplugin_cascade.theme.utils.get_color_success',
    'get-color-warning-presass': 'cmsplugin_cascade.theme.utils.get_color_warning',
    'get-color-danger-presass': 'cmsplugin_cascade.theme.utils.get_color_danger',
    'get-color-info-presass': 'cmsplugin_cascade.theme.utils.get_color_info',
    'get-color-light-presass': 'cmsplugin_cascade.theme.utils.get_color_light',
    'get-color-dark-presass': 'cmsplugin_cascade.theme.utils.get_color_dark',
}

main.scss:

@import "variables";
$theme-colors: (
 primary: get-color-primary-presass()
);
@import "bootstrap/scss/bootstrap";
@import "footer";

related djangocms-cascade feature Theme. https://github.com/jrief/djangocms-cascade/pull/356

haricot avatar Oct 31 '19 12:10 haricot