axllent/silverstripe-less

Wrapper for less.php to integrate LESS into Silverstripe

Maintainers

Details

github.com/axllent/silverstripe-less

Homepage

Source

Issues

Installs: 2 081

Dependents: 0

Suggesters: 0

Security: 0

Stars: 6

Watchers: 5

Forks: 4

Open Issues: 0

Type:silverstripe-vendormodule

3.0.1 2024-01-31 19:43 UTC

Requires

MIT f4b0e6828f25f7b19caa35c81afb0406c6d73a8c

csslesslessphpsilverstripeless.php

This package is auto-updated.

Last update: 2024-10-30 02:10:37 UTC

README

A wrapper for less.php to integrate LESS into Silverstripe.

Features

  • Integrates a fork of less.php seamlessly into Silverstripe
  • Includes flushing option (?flush) to regenerate CSS stylesheets (ie. force undetected less changes with @import)
  • Writes processed *.css files into assets/_css and automatically modifies Requirements paths
  • Allows custom global variables to be passed through to less compiling (yaml configuration)
  • Automatic compression of CSS files when in live mode (may require an initial ?flush)
  • Adds any processed editor.less files to TinyMCE (must be included in your front-end template)

Requirements

  • Silverstripe ^5

Installation

composer require axllent/silverstripe-less

Usage

You need refer to your less files by their full LESS filenames (eg:stylesheet.less).

Note: The less.php compiler transforms relative paths like url('../images/logo.png') into url('/themes/site/images/logo.png') based on the path provided as you included the files, meaning these won't work in Silverstripe due to the exposed directory structure via (_resources/...). The two simplest solutions are:

  1. Use a variable in your less files to provide the path to your files (ie: do not use relative paths), or:
  2. Include your files using "_resources" in the path to your less file, eg: Requirements:css('_resources/themes/site/css/stylesheet.less');

Example

In your page controller:

<?php
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\View\Requirements;

class PageController extends ContentController
{
    public function init()
    {
        parent::init();
        Requirements:css('themes/site/css/stylesheet.less');
    }
}

Or via template

<% require themedCSS("layout.less") %>

The generated HTML will point automatically to the processed CSS file in assets/_css rather than the original less file location, for example

<link rel="stylesheet" type="text/css"  href="/assets/_css/themes-site-css-stylesheet.css?m=123456789" />

Further documentation