Style Management

Introduction

The Stye Management module aims to support the compilation of the LESS and SCSS files present in the system and their conversion into CSS.

Requirements

The correct functioning of the Style Management module requires two external libraries that can be used directly from the Drupal:

1. oyejorge/less.php
2. leafo/scssphp

These libraries provide a set of options for compiling the LESS and SCSS files.
Suggestion for use:

install the module using composer, inside there is the composer.json file that will update its dependencies.

Installation

To correctly install the Stye Management module it is necessary:

• launch the command:
  composer require drupal/style_management
• enable the module in the appropriate screen.

Configuration

In order to configure the Style Management module, it is necessary to access the Settings section of the module and to enable the related options in the following three Tabs:

• Settings
• LESS Files
• SCSS Files

Usage

To use this module, add the file less or scss to your *.library.yml file follow the official instructions found at the link: adding-stylesheets-css.

  ...
  variables-editor:
    version: 1.x
    css:
      base:
        assets/css/edit-var.less: {}
        
    js:
  ...

2) Decide which hook to use to regenerate the CSS file from the Settings tab> Rebuild Style At;
3) Make sure that the destination folder is present and active for use;
4) Add the LESS and / or SCSS file using standard declaration on library;
5) Clean the cache in drupal's front office / home;
4) Reload the page where the compiled file is requested.

When the hook_css_alter () is executed, the path will be automatically replaced with that of the compiled file.

The module provides the possibility of altering the variables defined in the LESS files and they are accessible in the LESS Files Tab.

Note: To alter the value of variables, the format is key => value

  {"@color": "red","@color_1": "blue"}

Warning: Calculated or inherited values ​​can not be altered but only variables with final content.

Features & Development

• LESS
  - Status:
  • The compilation already works and the style sheet is generated correctly
  • The module allows to alter the declared default value in the variables using the editor
  • Use of the cache by the LESS Library

  - Features:

  • Integration Aggregation of files, this function will allow to share variables declared by different files
• SCSS
  - Status:
  • Library integration in the vendor folder
  • Compiler is available to use

  - Features:

  • Add more option to configure it

Version

• 8.x-1.x : Under development @sjpagan

Similar project

• Less CSS Preprocessor
  Bootstrap Library SCSS