sass
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| sass [2014/11/23 21:41] – 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 | ||
sass.1416775284.txt.gz · Last modified: 2014/11/23 21:41 by admin