Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/node_modules/owl.carousel/docs_src/templates/pages/docs/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

---
title: Sass Styles
subTitle: Development
nav: docs
description: Owl Carousel Documentation

sort: 3
tags:
- Development
---

{{#markdown }}
## 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](http://sass-lang.com/) and you’ll love it. Owl uses a faster adaptation of Sass written in C, [libsass](http://libsass.org/) (via [grunt-sass](https://github.com/sindresorhus/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:

* [Node.js](https://nodejs.org/)
* [Grunt](http://gruntjs.com/)

Check this [tutorial](https://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/) to learn how to use Sass and libsass in Grunt environment.

### SCSS Files included

Source files can be found on [Github Project]( {{ pkg.homepage }})

```
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.

### owl.carousel.scss

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.


{{/markdown }}