Alternatives to less for Mac, Linux, BSD, Windows, Xfce and more. Filter by license to discover only free or Open Source alternatives. This list contains a total of 11 apps similar to less.
WebStorm integrates with compilers that translate Sass, Less, and SCSS code into CSS. To use a compiler in WebStorm, you need to configure it as a File Watcher based on the relevant predefined template.
You can also use the compiler from the command line or configure it as a third-party tool, see Configuring Third-Party Tools for details.
- Saving the LESS file will then compile into CSS. The automatic compilation doesn't happen if: The project hasn't been enabled for LESS compilation; The.less file name starts with an underscore; The.less file isn't part of any project; A comment in the.less file with the word no-compile is found.
- Simple CSS allows you to create cascading style sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface. Version 2.0 includes faster WYSIWYG previews.
- These HTML and CSS editing apps for Mac designers have excellent features such as browser preview, FTP, SVN, terminal, writing and debugging CSS, file browsing, shortcuts to power up your workflow, auto-completion features, live validation, highlighting, project support, and more! Plus, most of these editing apps for Mac are also very.
- Edit the markdown source for 'third-party-compilers' Node.js Compilers. Grunt-contrib-less; assemble-less: Full-featured Grunt.js plugin for compiling Less files to CSS, with additional options for maintaining libraries of Less components and themes.For advanced users, this plugin allows you to define and manage Less 'packages' or 'bundles' using JSON, Lo-dash(underscore) templates (e.g.
Before you start
Make sure you have Node.js on your computer.
Make sure the File Watchers and Less or Sass bundled plugins are enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.
Installing Sass/SCSS
In the embedded Terminal (Alt+F12) , type:
npm install -g sassLearn more from the Sass official website.
Installing Less
In the embedded Terminal (Alt+F12) , type:
npm install --global lessLearn more from the Less official website.
You can also install the less package on the Node.js and NPM page as described in npm, pnpm, and Yarn.
Compiling your code into CSS
To compile your code automatically, you need to configure a Sass, Less, or SCSS File Watcher which will track changes to your files and run the compiler.
When you open a file, WebStorm checks whether an applicable File Watcher is available in the current project. If such File Watcher is configured but disabled, WebStorm displays a popup that informs you about the configured File Watcher and suggests to enable it.
If an applicable File Watcher is configured and enabled in the current project, WebStorm starts the compiler automatically upon the event specified in the New Watcher dialog.
If the Auto-save edited files to trigger the watcher checkbox is selected, the File Watcher is invoked as soon as any changes are made to the source code.
If the Auto-save edited files to trigger the watcher checkbox is cleared, the File Watcher is started upon save (File | Save All, Ctrl+S) or when you move focus from WebStorm (upon frame deactivation).
Learn more from File watchers.
WebStorm creates a separate file with the generated output. The file has the name of the source Sass, Less, or SCSS file and the extension .css. The location of the generated files is defined in the Output paths to refresh field of the New Watcher dialog. However, in the Project Tree, they are shown under the source file which is now displayed as a node.
Create a File Watcher
In the Settings/Preferences dialog Ctrl+Alt+S, click File Watchers under Tools. The File Watchers page that opens shows the list of already configured File Watchers.
Click or press Alt+Insert. Depending on the tool you are going to use, choose the Less, Sass, or SCSS predefined template from the list.
In the Program field, specify the path to the compiler archive depending on the chosen predefined template.
lessc for Less.
sass for Sass/SCSS.
If you followed the standard installation procedure with npm, WebStorm locates the required files itself and fills in the field automatically. Otherwise, type the path manually or click and choose the file location in the dialog that opens.
Proceed as described in File watchers.
Configuring syntax highlighting
You can configure Less/Sass/SCSS-aware syntax highlighting according to your preferences and habits.
In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Color Scheme | Less/Sass/SCSS.
Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring colors and fonts.
An alternative LESS compiler with no setup. Uses the official node.js based LESS compiler under the hood with AutoPrefixer and CSSComb built in.
See the change log for changes and road map.
Features
- Compiles .less files on save
- Uses the official LESS node module
- Automatially runs autoprefix
- Support for CSSComb
- All compiler options configurable
- Minification support
Compile on save
All .less files will automatically be compiled into a .css file nested under it in Solution Explorer after being enabled on the project.
By default, compilation is off and that's indicated by a watermark at the bottom right corner of any LESS file.
To enable LESS compilation, simply click the watermark and it changes to indicate LESS compilation is 'on'.
For files that are being ignored, the watermark looks like this:
All .less files in the following folders are ignored from compilation:
- node_modules
- bower_components
- jspm_packages
- lib
- vendor
You can stil reference these files from your own .less files, but they will not be compiled themselves.
Firefox for mac version. Saving the LESS file will then compile into CSS.
The automatic compilation doesn't happen if:
- The project hasn't been enabled for LESS compilation
- The .less file name starts with an underscore
- The .less file isn't part of any project
- A comment in the .less file with the word
no-compileis found
The Output Window shows details about what is being executed to make it easy to troubleshoot any issues.
Note that the the solution (.sln) file is updated to reflect that LESS compilation is enabled. Remember to save the solution when prompted to persits the information.
Compile all .less files
The solution node in Solution Explorer has a command to compile all .less files in the projects enabled.
Compiler options
You can set any compiler options as defined on the LESS compiler website inside a comment in the .less file. The comment is prefixed with lessc followed by the compiler options.
The default less compiler arguments are:
Here are some examples of the code comments to use in the .less files:
Source map
This will produce a .map file next to the generated .css file. Be aware that if you specify a file name for the source map like --source-map=file.map, the file may not be included in the project. Just use the flag without the file name like this --source-map.
Output to other directory
Autoprefix
See Browserlist for description on how to construct the value.
CSSComb
Available values are zen, yandex and csscomb. Remember to specify --csscomb after --autoprefix if both are specified.
Minification
By default a .min.css file is generated, but that can be turned off by a comment containing no-minify in it. You can combine it with the compiler configuration like so:
Combine it all
This example doesn't minify the output, enables both relative urls and source maps and redirects the output file to a different directory.
Compiler default options
You can specify the compiler options for the solution, the project or for individual folders by placing a file called less.defaults in any folder next to or above the .less files.
The default file cannot contain information about the output file, but all other options can be set.
Example:
Note that it isn't prefixed with //
Css Less For Mac And Cheese
Even though minification isn't technically an option you set on the compiler, you can still opt out of minification like so:
Contribute
Check out the contribution guidelines if you want to contribute to this project.
For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project.
Css Less For Macro
License