sass – struktura projektu

Rozpakowanie szablonu:

# tar -zxvf sass-webroot-template.tgz

# cd webroot/
# tree
.
├── config.rb
├── css
│   └── styles.css
├── img
├── index.html
└── sass
    ├── partials
    │   ├── _normalize.scss
    │   └── _variables.scss
    └── styles.scss
# cat config.rb

require 'compass/import-once/activate'

require 'susy'

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

output_style = :compressed
relative_assets = true
line_comments = false
# gem install susy     - instalacja pluginu przed dołączeniem

# cat sass/styles.scss 

  @import "compass";                     - dołączenie plików cząstkowych
  @import "partials/variables";
  @import "partials/normalize";
<!doctype html>
<html class="no-js" lang="pl">

  <head>
    <meta charset="utf-8">
    <title>Szablon sass</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/styles.css" />
    <!--[if IE]>
      <link href="/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
      <![endif]-->
  </head>
  <body>
    <header>
      <h1>Sass Testy</h1>
    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>
</html>
# compass watch    - śledzenie zmian i automatyczna kompilacja do css