Giter VIP home page Giter VIP logo

komodo-less-compiler's Introduction

Komodo Less Compiler

LESS 2.7.1 compiler for Komodo Edit/Ide.
This addon gives you the ability to compile Less files and gives a improved auto-completion of Less variables (also includes imports).

Usage

If you install this addon. default the compiler is enabled.
When you edit a LESS file the file will be compiled to a CSS file.

If you have imports in you're Less-file or you want to run multiple output-files.
You need to use a file scope this enables you to set up project based file scopes, that will trigger output-files based on output-files and include-folders.
If you want to compile a file on the fly that has includes, you can also set up a single file watcher.
This will trigger the selected output-file regardless of the Less-file you're working on.

Trough the Tools-menu and file context-menu are Less menu's added, that allows you to trigger file based commands and a few commands concerning file-watchers, file-scopes and auto-completion commands/settings. Also is a status-bar added to the breadcrumb-bar that also has a context-menu that allows you to control various commands/settings.

Less Status-bar

When editing Less files, a Less status bar will be shown.
The status bar well tell you, if the compiler is enabled/disabled, if a file watcher or file scope is active and it will show errors if present.

Screensot

Trough the status-bar you can easily configure the settings.

Status-bar options

  • Disable/Enable Compiler
    This will enable/disable the compiler.
  • Disable/Enable File Watcher
    This will enable/disable a file watcher for the current file, when you edit less file's only the "Watched file" will be compiled.
  • Disable/Enable File Scopes
    This will enable the "file scopes" mode, that will trigger file scopes based on projects.
  • File Scopes
    This will open a window where you can set file scopes, so you can work with multiple output files in one project or work with multiple projects.
  • Settings
    This will open the Less-settings window.

Auto-completion

This addon will provide you with a LESS variables auto-completion.
The vars will be search automatically( on file open and after you pressed @ on save ).

You can also trigger the search trough the menu.
When you type @ a auto completion box will be shown.

Screenshot

Menu Options

Tools > LESS > ...

  • Compile Saved File into CSS
    Takes a .less file and creates a .css file with the same name in the same spot as the .less file.
  • Compile Current Buffer (including imports)
    Takes the contents of the current buffer and turns it into CSS.
  • Compile Selection into CSS (including imports)
    Takes the current selection and turns it into CSS
  • Compile and Compress Saved File into CSS
    Takes a .less file and creates a .css file with the same name in the same spot as the .less file. The .less file will be compressed/minified.
  • Compile and Compress Current Buffer (including imports)
    Takes the contents of the current buffer and turns it into compressed CSS.
  • Compile and Compress Selection into CSS (including imports)
    Takes the current selection and turns it into compressed CSS.
  • Collect @vars
    Collect all the LESS @vars for auto-completion.
  • File Watcher
  • Enable File Watcher for current file
    Enables a file watcher for current LESS file
  • disable File Watcher
    Disables the file watcher
  • File Scopes
  • Enable File Scopes
    Enables the "file-scopes" mode.
  • Disable File Scopes
    Disables the "file-scopes" mode
  • Less Settings
    This will open the settings window.

File Scopes

File-scopes allow you to work with output-files and include-folders, these file scopes are set on a project level.
When you edit a file in the include-folder(s) the selected output-files(s) are triggered.
To create a new file-scope you will have to use the menu in the status-bar status-bar > File Scopes. This will open the File scopes window, in this window you can edit, create or delete file scopes:

screenshot

If you click the "Create new file scope" menu item, the following popup will shown:

screenshot

In this window you can create you're project based file scopes, you can have multiple file scopes in one project.
You can set up file scopes with the following structures:

 Include folder/
    ├─ Less file
    ├─ Less file
    ├─ Include folder/
    ├── Less file
    └── Less file   
─ Less output-file
 

And:

 Include folder/
    ├─ Less file
    ├─ Less output-file
    ├─ Include folder/
    ├── Less file
    └── Less file
	

You can select multiple output-files, but is not recommended to use more that two output-files for performance reasons.

File Watcher

If you want to edit a Less-file that has includes, on the fly.
You can set up a File watcher, when you enable the file Watcher the current file will be added as output-file.
When you now edit Less files only the output-file will be triggered.

screenshot

komodo-less-compiler's People

Contributors

babobski avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

baryshevs

komodo-less-compiler's Issues

Missing imported .less file content on compile

I am trying to compile bootstrap.less files. Within the main bootstrap.less there are many other imported LESS files. One of them is @import "panels.less";. But after compiling the CSS file I am missing the content of panels.css and one or two other files.

An example is attached. Unzip it, open bootstrap.less and try to compile. My not compressed CSS file gets 99.249 Bytes and is missing anything with class ".panel".

Using Komodo 10.1.4 on macOS Sierra.

example.zip

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.