Sass development

Environment

Install Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:

	gem install sass

Also you need to install the latest version of Compass with command

	gem install compass --pre

Then for combining media queries you can use Sass::MediaQueryCombiner plugin. Install with command

	gem install sass-media_query_combiner

And for prefixing css3 properties use Autoprefixer

	gem install autoprefixer-rails

To watch changes in .sass files and compile it to the .min.css on a fly, run this command from \_sass\ folder

	compass watch -c config.rb -e production

To compile .sass files into uncompressed .css file use command

	compass watch -c config.rb -e development

Configuration

You can find config.rb in \_sass\ folder.

// Plugin for combining media queries
require 'sass-media_query_combiner'
// Plugin for prefixing css3 properties
require 'autoprefixer-rails'
// Removes all comments completely
require "./remove-all-comments-monkey-patch"

// Autoprefixer options
on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.process(css, browsers: ["last 2 version", "> 1%"])
  end
end

http_path = "/" 
css_dir = "../css" 
sass_dir = "./" 
images_dir = "../img" 
javascripts_dir = "../js" 

if environment == :development
    line_comments = true
	relative_assets = true 
    output_style = :expanded
end

if environment == :production
    line_comments = false
	relative_assets = true 
    output_style = :compressed

    require 'fileutils'
        on_stylesheet_saved do |file|
            if File.exists?(file)
            filename = File.basename(file, File.extname(file))
            File.rename(file, "../css" + "/" + filename + ".min" + File.extname(file))
        end
    end
end 

# Remove multiline comments - monkey patch
class Sass::Tree::Visitors::Perform < Sass::Tree::Visitors::Base
  # Removes all comments completely
  def visit_comment(node)
    return []
  end
end

All available configurations described in official documentation

Parts configuration

All parts that will be compiled into .css file described in \_sass\main.scss file.

// Modules and Variables
@import "partials/base";

// Third-party
@import "vendor/bootstrap-custom";
@import "vendor/animate";
@import "vendor/waves";

// Partialsas
@import "partials/global";
@import "partials/buttons";
@import "partials/helper";
@import "partials/sprites";
@import "partials/navigation";

// Sections
@import "partials/hero";
@import "partials/top-section";
@import "partials/about";
@import "partials/statistic";
@import "partials/latest-news";
@import "partials/rockstar-speakers";
@import "partials/buy-tickets";
@import "partials/location-map";
@import "partials/venue";
@import "partials/twitter-feed";
@import "partials/partners";
@import "partials/subscribe";
@import "partials/footer";
@import "partials/blog";
@import "partials/find-way";
@import "partials/direction-details";
@import "partials/team";
@import "partials/zoe-effect";
@import "partials/lily-effect";
@import "partials/ribbon";
@import "partials/modal";
@import "partials/schedule";

Note: You can safely exclude some parts under // Sections if you don't need them. Basically their names correspond to the names of _includes files.

Configuration of third-party libraries

Bootstrap

Zeppelin uses only part of bootstrap library. To include another modules edit \_sass\vendor\_bootstrap-custom.scss.

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/media";
@import "bootstrap/responsive-embed";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

All available modules you can find in _bootstrap.scss or bootstrap-sass documentation

Animate.css

To change included animations and another properties for Animate.css edit \_sass\vendor\helpers\_settings.scss file.

/////////////////////////////////////////////////////////
// Animation Default Settings                          //
/////////////////////////////////////////////////////////


// Base module settings
$base-duration					: 1s !default;           // used in 1-base module
$base-origin 					: top center !default;
$base-degrees 					: 30deg !default;        // used in lightspeed & special modules

$base-timing-function-in		: ease-in !default;
$base-timing-function-out		: ease-out !default;
$base-timing-function-in-out	: ease-in-out !default;

$base-distance					: 10px !default; 		// used in fade, shake and bounce modules
$base-distance-big				: 1000px !default;       // used in fadeBig and bounce modules


// Rotate module settings
$rotate-degrees 				: 90deg !default;
$rotate-degrees-max 			: 200deg !default;
$rotate-origin 					: center center !default;

// Flipper module settings
$flipper-perspective			: 400px !default;
$flipper-translate 				: 150px !default;
$flipper-degrees 				: 10deg !default;
$flipper-degrees-max 			: 90deg !default;


// Hinge module settings
$hinge-origin 					: top left !default;
$hinge-degrees-max 				: 80deg !default;
$hinge-translate 				: 700px !default;


//==================================================================================================//
// Module loading                                                                                   //
//==================================================================================================//
// To include an animation module in the compiled css file, simply set it's attribute below to true //
// (all modules set to false will not be included)                                                  //
// The idea here is to only load the animations you want to use on a per project basis              //
// This helps keep the compiled css file at its leanest                                             //
//==================================================================================================//
// Hugely influenced and inspired by @csswizardry's inuit.css _vars.scss file                       //
//==================================================================================================//

// Fade Enter
$use-fadeIn 			:	true !default;
$use-fadeInUp 			:	true !default;
$use-fadeInUpBig 		:	false !default;
$use-fadeInDown 		:	true !default;
$use-fadeInDownBig 		:	false !default;
$use-fadeInLeft 		:	true !default;
$use-fadeInLeftBig 		:	false !default;
$use-fadeInRight 		:	true !default;
$use-fadeInRightBig 	:	false !default;


// Fade Exit
$use-fadeOut			:   false !default;
$use-fadeOutUp			:	false !default;
$use-fadeOutUpBig   	:	false !default;
$use-fadeOutDown		:	false !default;
$use-fadeOutDownBig 	:	false !default;
$use-fadeOutLeft		:	false !default;
$use-fadeOutLeftBig 	:	false !default;
$use-fadeOutRight		:	false !default;
$use-fadeOutRightBig	:	false !default;


// Bounce Enter
$use-bounceIn			:	false !default;
$use-bounceInUp			: 	false !default;
$use-bounceInDown 		: 	false !default;
$use-bounceInLeft 		: 	false !default;
$use-bounceInRight 		: 	false !default;


// Bounce Exit
$use-bounceOut			:	false !default;
$use-bounceOutUp		: 	false !default;
$use-bounceOutDown 		: 	false !default;
$use-bounceOutLeft 		: 	false !default;
$use-bounceOutRight 	: 	false !default;



// Rotate Enter
$use-rotateIn 			:	false !default;
$use-rotateInUpLeft 	: 	false !default;
$use-rotateInUpRight 	: 	false !default;
$use-rotateInDownLeft 	: 	false !default;
$use-rotateInDownRight 	: 	false !default;


// Rotate Exit
$use-rotateOut 			:	false !default;
$use-rotateOutUpLeft 	: 	false !default;
$use-rotateOutUpRight 	: 	false !default;
$use-rotateOutDownLeft 	: 	false !default;
$use-rotateOutDownRight : 	false !default;


// Flippers
$use-flip				:	false !default;
$use-flipInX			:	false !default;
$use-flipInY			:	false !default;
$use-flipOutX			:	false !default;
$use-flipOutY			:	false !default;


// Lightspeed
$use-lightSpeedIn 		:	false !default;
$use-lightSpeedOut 		:	false !default;	


// Attention Seekers
$use-bounce				:	false !default;
$use-flash				:	false !default;
$use-pulse				:	false !default;
$use-wiggle				:	false !default;
$use-swing				:	false !default;
$use-shake				:	false !default;
$use-tada				:	false !default;
$use-wobble				:	false !default;


// Special
$use-hinge				:	false !default;
$use-rollIn				: 	false !default;
$use-rollOut 			:	false !default;

Detailed information you can find in animate-sass documentation