Sass development

Oleh Zasadnyy edited this page Mar 9, 2015 · 13 revisions

Environment

Check if you have all requirements for local environment. To install all development dependencies install Bundler.

  	gem install bundler

and run next command from root folder:

	bundle install

Note: Also you need to install Node.js

To watch changes of .sass files and compile it to the .css on a fly change property safe: true to safe: false in _config.yml. Note: It works only on local machine, because GitHub runs Jekyll in --save mode

Running

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

    compass watch

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 = "/" 
sass_dir = "./" 
css_dir = "../css" 
images_dir = "../img" 
javascripts_dir = "../js" 

line_comments = false
relative_assets = true 
output_style = :compressed

# 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";

// Partials
@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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.