Sass

Variables

You can change everything in template thanks to which variables.scss

$color__white: #ffffff;  // $color__black: #000000; // $color__whisper: #ececec;  // $color_nevy: #232C3B; // $color_yellow: #ffcc00;  // $color_blue: #2e93e4; // default color for template //<!-- More variables not shown here -->

SASS File

Car Rent template using media queries from Bootstrap 3.2.7 Responsive Breakpoints 

@include media-breakpoint-down(xs){...}@include media-breakpoint-down(sm){...}@include media-breakpoint-down(md){...}@include media-breakpoint-down(lg){...}@include media-breakpoint-up(xs){...}@include media-breakpoint-up(sm){...}@include media-breakpoint-up(md){...}@include media-breakpoint-up(lg){...}@include media-breakpoint-up(xl){...}@include media-breakpoint-only(xs){...}@include media-breakpoint-only(sm){...}@include media-breakpoint-only(md){...}@include media-breakpoint-only(lg){...}@include media-breakpoint-only(xl){...}
// Example usage:@include media-breakpoint-up(sm){.some-class{display: block;}}

SASS File Structure

In this part I will share with you how scss file/path are organized. I will try to make all section into different .scss file. Ex.check_vehicle.scss for all advance search from for checking vehicle ability.blog.scss for blog section on homepage.

 Car Rent SCSS
	| 
	├── elements
	|	|	├── elements.scss
	|	|	├── list.scss
	|	|	├── tables.scss
	├── forms
	|	|	├── buttons.scss
	|	|	├── fields.scss
	|	|	├── form.scss
	├── layout
	|	|	├── abaility.scss
	|	|	├── aboutus.scss
	|	|	├── accordion.scss
	|	|	├── blog.scss	
	|	|	├── call-to-action.scss
	|	|	├── check_vehicle.scss
	|	|	├── footer.scss
	|	|	├── fun-fects.scss
	|	|	├── header.scss
	|	|	├── layout.scss
	|	|	├── main-menu.scss
	|	|	├── mobile-app.scss
	|	|	├── navigation.scss
	|	|	├── pricing.scss
	|	|	├── service.scss
	|	|	├── slider.scss
	|	|	├── testimonial.scss
	|	|	├── vehicle_block.scss
	|	|	├── wellcome.scss
	├── media
	|	|	├── captions.scss
	|	|	├── galleries.scss
	|	|	├── media.scss
	├── mixins
	|	|	├── mixins-master.scss
	├── modules
	|	|	├── accessibility.scss
	|	|	├── alignment.scss
	|	|	├── clearings.scss
	|	|	├── infinite-scroll.scss
	├── navigations
	|	|	├── link.scss
	|	|	├── menu.scss
	|	|	├── navigation.scss
	|	|	├── map.scss
	|	|	├── navigation_responsive.scss
	|	|	├── paginations.scss
	├── others
	|	|	├── blog_single.scss
	|	|	├── category.scss
	|	|	├── coming_soon.scss
	|	|	├── map.scss
	|	|	├── single-post.scss
	├── Site
	|	├── others
	|	|	├── 404.scss
	|	|	├── about.scss
	|	|	├── contact.scss
	|	|	├── map.scss
	|	├── primary
	|	|	├── asides.scss
	|	|	├── comments.scss
	|	|	├── post-and-pages.scss
	|	├── secondary
	|	|	├── widget
	├── typography
	|	├── copy.scss
	|	├── typography.scss
	|	├── heading.scss
	├── variables-site
	|	├── Colors.scss
	|	├── Option.scss
	|	├── option.scss
	|	├── Typography
	|	├── variable-site.scss
	└── style.scss