Happy to announce version 4.7 with a big Sass rewrite that enables dynamically creating themes from code and defining custom themes for NPM users.

We always shipped CSS either minified or uncompressed since the first version of Mobiscroll launched back in 2011. Since version 3.1 we started using Less to define theme builder functions but never exposed them. We went with Less because the conversion functions were easier to define and use. Fast forward and Sass came out as the winner in the popularity contest plus people kept asking about it.

We decided that it makes a lot of sense to convert everything to Sass and make it available to everyone. Besides the convenience and enhanced capabilities it solved another issue we were fighting.

Custom themes for NPM users

With the popularity of Mobiscroll npm packages it was hard for people to use custom themes they created with the theme builder. It basically looked like this:

1. Create the custom theme in the Mobiscroll account.
2. Build and download a custom package and include the themes that are needed.
3. Copy it into your project.
4. Use the CLI for a non-npm installation.

One thing that NPM solved – the ease of installation and updates – custom themes broke.

With 4.7 you can install Mobiscroll with the CLI from npm as before and programatically define and use custom themes. No need to go to the theme builder and manually download.

Dynamic themes

Another nice feature is dynamic themes. Let’s say you would like to customize the colors for the iOS theme. It’s a pretty straight forward task of setting Sass variables that override the default values.

What happens if you would like to use multiple variations of the same iOS themes? You can use Mixins and dynamically define themes.

You can find guides on how to get started with the Sass and dynamic functions in our extensive documentation.

As always, this release is available for download to all customers who have an active maintenance. You can also update through NPM if that is how you get your libraries.