Sass development - VNSECURITY/tradahacking GitHub Wiki
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