63 lines
1.8 KiB
Handlebars
63 lines
1.8 KiB
Handlebars
---
|
||
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 }}
|