Taller nanoc + sass

Alejandro el informático(@ainformatico), http://alejandroelinformatico.com/slideshows/

http://alejandroelinformatico.com/slideshows/ca/nanoc-sass/

Alejandro el informático(@ainformatico). 2011.

Licencia Creative Commons by-nc-sa.

nanoc

"nanoc: a Ruby site compiler that generates static HTML."

http://nanoc.stoneship.org/

sass

"sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows."

http://sass-lang.com/

nanoc + sass

Comencem amb nanoc

Estructura nanoc I

Rakefile
Tasques.
Rules
Regles de compilació i d'enrutament.
config.yaml
Configuració del Site.

Estructura nanoc II

content/
Fitxers font.
layouts/
Plantilles.
lib/
Recursos de suport (filters, helpers, etc).
output/
Fitxers generats.
tmp/
Fitxers temporals.

$ nanoc cs test

        
            create  config.yaml
            create  Rakefile
            create  Rules
            create  content/index.html
            create  content/stylesheet.css
            create  layouts/default.html
          Created a blank nanoc site at 'test'. Enjoy!

$ nanoc ci my_item

        
         create  content/my_item.html
        An item has been created at /my_item/.

$ nanoc cl body


         create  layouts/body.html
        A layout has been created at /body/.

$ nanoc co

        
          Compiling site...
              create  [0.04s]  output/my_item/index.html
              create  [0.00s]  output/style.css
              create  [0.00s]  output/index.html

          Site compiled in 0.12s.

Canviant continguts

        
          Compiling site...
            update  [0.01s]  output/my_item/index.html
              skip  [0.00s]  output/index.html
              skip  [0.00s]  output/style.css

          Site compiled in 0.02s.

Metadades, contingut i atributs

        
          ---
          title: A New Item
          ---

          <h3><%= @item[:title] %></h3>
          <p>
            Item content
          </p>

layouts/default.html


        <%= yield %>

Rules

        
          compile '/my_item/' do
              layout 'body'
          end

          compile '*' do
              filter :erb
              layout 'default'
              filter :relativize_paths, :type => :html
          end

Filtres

bluecloth, coderay, colorize_syntax, erb, erubis, haml, kramdown, less, markaby, maruku, rainpress, rdiscount, rdoc, redcloth, relativize_paths, rubypants, sass.

lib/default.rb


        include Nanoc3::Helpers::Rendering

Render


        <%= render "footer" %>

Atributs d'@item

Variables

http://nanoc.stoneship.org/

sass

Crear i editar fitxer


      #wrapper
        width: 996px
        margin: 0 auto
      #main
        width: 700px
        padding: 10px
        .news
          li
            padding: 10px
            float: left
            em, strong
              color: #666
      

      #wrapper {
        width: 996px;
        margin: 0 auto;
      }
      #main {
        width: 700px;
        padding: 10px;
      }
      #main .news li {
        padding: 10px;
        float: left;
      }
      #main .news li em, #main .news li strong {
        color: #666;
      }

Variables


          $box_width: 300px
          $main_width: $box_width * 3 + 96
          $anchor_color: #999
          $font_family: 'Helvetica', Arial, sans-serif

          #header
            color: $anchor_color
          #main
            width: $main_width
            color: $anchor_color
            font:
              family: $font_family

Mixins


      @mixin shadow ($x: 1px, $y: 1px, $blur: $shadow_blur, $color: $shadow_color)
        -moz-box-shadow: $x $y $blur $color
        -webkit-box-shadow: $x $y $blur $color
        box-shadow: $x $y $blur $color

      .box
        @include shadow(2px, 3px)

@import

@import "tables"
Importa fitxer tables.sass.
Importa fitxer _tables.sass.
@import "tables.css"
Importa fitxer tables.css.

_tables.sass vs tables.sass

En el moment de la compilació el fitxer _tables.sass no tindrà fitxer de sortida mentre que tables.sass sí, tables.css.

Compilar / observar css.sass

Compilar
sass css.sass css.css
Observar
sass --watch css.sass:css.css
sass --watch css/[:output/css/]

Modes de compilat

Modes
nested
expanded
compressed

sass vs scss


        table.hl
          margin: 2em 0
          td.ln
            text-align: right

        li
          font:
            family: serif
            weight: bold
            size: 1.2em
        

        table.hl {
          margin: 2em 0;
          td.ln {
            text-align: right;
          }
        }

        li {
          font: {
            family: serif;
            weight: bold;
            size: 1.2em;
          }
        }

Ara si, nanoc + sass

Crear site nanoc

content/css/

Rules


        compile '/css/*' do
          filter 'sass'
        end
        route '/css/*' do
          item.identifier.chop + ".css"
        end

$ nanoc co

Have fun!

Links

Alejandro el informático(@ainformatico), http://alejandroelinformatico.com/slideshows/

http://esbudellat.net/slideshows/nanoc/ (Arnau Siches)

http://choangalvez.nom.es/presentaciones/sass/ (Choan Gálvez)

http://nanoc.stoneship.org/

http://sass-lang.com/