This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | |||
sass [2014/11/23 21:43] – admin | sass [2021/12/06 22:32] (current) – removed admin | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Sass ====== | ||
- | ===== Required software ===== | ||
- | |||
- | * a recent version of Ruby | ||
- | * compass | ||
- | * css_parser | ||
- | |||
- | |||
- | |||
- | **Install required gems** | ||
- | |||
- | gem install compass | ||
- | gem install css_parser | ||
- | |||
- | |||
- | |||
- | ===== config.rb file ===== | ||
- | |||
- | This file contains all the configuration | ||
- | |||
- | <code ruby config.rb> | ||
- | if RUBY_VERSION =~ /1.9/ | ||
- | Encoding.default_external = Encoding:: | ||
- | Encoding.default_internal = Encoding:: | ||
- | end | ||
- | relative_assets = true | ||
- | |||
- | ################################## | ||
- | # ENVIROMENT INDEPENDANT SETTINGS! | ||
- | ################################## | ||
- | |||
- | # WHERE COMPILED FILES WILL BE COPIED TO | ||
- | css_dir = " | ||
- | # USE ALL *.scss FILES IN THIS FOLDER | ||
- | sass_dir = " | ||
- | |||
- | # IMAGE SOURCE DIR | ||
- | images_path = " | ||
- | |||
- | # IMAGE TARGET DIR | ||
- | images_dir = " | ||
- | |||
- | ############################################################# | ||
- | # Settings to override when enviroment param is given | ||
- | # Invoke from command line: compass watch -e YOUR_ENV --force | ||
- | ############################################################# | ||
- | |||
- | # To be used for Development - feel free to modify as needed | ||
- | if environment == : | ||
- | output_style = :expanded | ||
- | sass_options = {: | ||
- | end | ||
- | |||
- | # To be used for Production | ||
- | if environment == : | ||
- | output_style = :compressed | ||
- | sass_options = {: | ||
- | end | ||
- | </ | ||
- | |||
- | ===== Main Scss File ===== | ||
- | |||
- | |||
- | <code sass main.scss> | ||
- | @charset " | ||
- | |||
- | // Include libraries | ||
- | @import " | ||
- | |||
- | // Include modules - *.scss-Files | ||
- | @import " | ||
- | |||
- | // IMPORT SPRITE UTILITY | ||
- | @import " | ||
- | |||
- | // PATH RELATIVE TO config.rb: | ||
- | // IMPORTS ALL IMAGES FROM FOLDER AND GENERATES A SPRITE INCL. CSS. THIS DOES NOT INCLUDE SUBFOLDERS | ||
- | @import " | ||
- | // GENERATE IMAGE SIZES AND INCLUDE IMAGES | ||
- | $images-sprite-dimensions: | ||
- | @include all-images-sprites; | ||
- | </ | ||
- | |||
- | |||
- | ===== Using sass ===== | ||
- | |||
- | If you have created a folder containing config.rb and main.scss you are ready. Make sure you have created the css target folder and you have included all needed scss file by using: @import " | ||
- | |||
- | Create css files automatically when changed | ||
- | |||
- | compass watch | ||
- | |||
- | Manually trigger compilation | ||
- | |||
- | compass compile | ||
- | |||
- | Force compilation of specific enviroment | ||
- | |||
- | compass compile -e production --force |