owl.carousel.js

Development

Using Sass

Owl uses the Sass pre-processor to build CSS for all main modules and themes. If you don’t know Sass, have a look at their website and you’ll love it. Owl uses a faster adaptation of Sass written in C, libsass (via grunt-sass ), that doesn't require a Ruby dependency for our build process.

To build the CSS from its Sass source, it’s required to have:

Check this tutorial to learn how to use Sass and libsass in Grunt environment.

SCSS Files included

Source files can be found on Github Project 

src/
└── scss/
    ├── _mixins.scss
    ├── _theme.scss
    ├── owl.carousel.scss
    ├── owl.animate.scss
    ├── owl.autoheight.scss
    ├── owl.lazyload.scss
    ├── owl.video.scss
    ├── owl.theme.default.scss
    └── owl.theme.green.scss

_mixins.scss

_mixins contain basic snippets generators for CSS3 cross-browser styles.

_theme.scss

Scss structure for theme. Use owl.carousel.default.scss to change variables and generate new styles.

Core file to handle basic styles and override some unnecessary browsers behaviors. You shouldn’t change this file unless you have to.

owl.[pluginname].scss

Styles for modules.

owl.theme.*.scss

Theme files for dots and navigations buttons. Use owl.theme.default.scss to upgrade to your own styles or create a new theme.