National Party Month

    fp-less

    0.2.8 • Public • Published

    Less extension for Fepper

    Known Vulnerabilities Linux Build Status Mac Build Status Windows Build Status Coverage Status License

    Install

    cd extend
    npm install --save-dev fp-less

    Use

    Add these tasks to extend/custom.js:

    • Under gulp task 'custom:frontend-copy'
      • 'less:frontend-copy'
    • Under gulp task 'custom:once'
      • 'less:once'
    • Under gulp task 'custom:watch'
      • 'less:watch'

    On the command line:

    fp less[:subtask]

    Create a source/_styles/src/less directory and put all Less code there.

    This extension will read one directory deep for files with a .less extension. Partials must be nested deeper. Less code will be preprocessed into CSS and built into the paths.source.cssBld directory as declared in patternlab-config.json.

    This extension defaults toward the printing of line comments for debugging purposes. Doing so provides an unambiguous indication that the CSS was preprocessed and that direct edits to the CSS should be avoided. If a project decision is made to style with Less, it would be a good idea to have version control ignore CSS builds in the source directory. This would avoid committing line comments, which could otherwise lead to a morass of conflicts.

    Another debugging alternative is writing CSS sourcemaps. (However, this will not work if line comments are enabled.) Add the following to your pref.yml file:

    less:
      dumpLineNumbers: false
      sourceMap: true

    To write sourcemaps inline, configure as follows:

    less:
      dumpLineNumbers: false
      sourceMap:
        sourceMapFileInline: true

    Tasks

    'less'

    • Builds Less into CSS.
    • Overwrites CSS whether or not it has direct edits.
    • Respects the less.dumpLineNumbers setting in pref.yml.
    • If less.dumpLineNumbers is not set, will default to printing line comments.

    'less:frontend-copy'

    • Usually under gulp task 'custom:frontend-copy'.
    • Builds Less without line comments
    • The frontend-copy task then copies the CSS to the backend.
    • Ignores any less.dumpLineNumbers setting in pref.yml.

    'less:no-comment'

    • Same as 'less' and 'less:once' but without line comments.
    • Ignores any less.dumpLineNumbers setting in pref.yml.

    'less:once'

    • Usually under gulp task 'custom:once'.
    • Same as 'less'.

    'less:watch'

    • Usually under gulp task 'custom:watch'.
    • Watches the source/_styles/src/less directory for file modifications.
    • Triggers less and overwrites CSS whether or not it has direct edits.

    'less:watch-no-comment'

    • Usually under gulp task 'custom:watch'.
    • Watches the source/_styles/src/less directory for file modifications.
    • Triggers less:no-comment and overwrites CSS whether or not it has direct edits.

    Install

    npm i fp-less

    DownloadsWeekly Downloads

    0

    Version

    0.2.8

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • e2tha-e
    • electric-el