Ionic Framework for less.js
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Imports the Less code for Ionic Framework before your custom Less code. Ionic is a beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.

Motivation and explanation for the Less version of Ionic.

lessc usage


Requires Less v2.4.0

npm install -g less-plugin-ionic

and then on the command line,

lessc file.less --ionic

Should use this plugin together with the Less autoprefix plugin:

npm istall less-autoprefix
lessc file.less --ionic --autoprefix="Android >= 2.1,BlackBerry >= 7,Chrome >= 20,Firefox >= 21,Explorer >= 10,iOS >= 3.2,Opera > 12,Safari > 6,OperaMobile >= 12.1,ChromeAndroid >= 40,FirefoxAndroid >= 30,ExplorerMobile >= 10" 

Customize your Ionic app’s theme with Less

Now read the Formula which describe how to deploy Ionic apps with Less.

Programmatic usage

var LessPluginIonic = require('less-plugin-ionic'),
    ionicPlugin = new LessPluginIonic();
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["Android >= 2.1","BlackBerry >= 7","Chrome >= 20","Firefox >= 21","Explorer >= 10","iOS >= 3.2","Opera > 12","Safari > 6","OperaMobile >= 12.1","ChromeAndroid >= 40","FirefoxAndroid >= 30","ExplorerMobile >= 10"] });  
less.render(lessString, { plugins: [ionicPlugin,autoprefixPlugin] })

Browser usage

Browser usage is not supported at this time.


Ionic also comes with its own free and open-sourced icon font, Ionicons, with over 500 icons to choose from. This plugin compiles the CSS for these icons, but does not install the font files. You should download the font files at Ionicons copy the ionicons.eot, ionicons.woff,ionicons.svg and ionicons.ttf to your font folder. Finally make sure that @ionicons-font-path points to the folder.