Skip to content

MrSwed/PHamlP

Repository files navigation

PHamlP + modx snippet + local call

=======
Based on PhamlP 3.2 at https://code.google.com/p/phamlp/
Official Changes
https://code.google.com/p/phamlp/wiki/ChangeLog

My Addons: 
sass-modx-plugin.php (See http://habrahabr.ru/post/137747/)
sass-console-convert.php (run localy)
sass-convert.bat (short way to run localy, need edit patch to php.exe)

To use in WebStorm, use FileWatcher settings
See http://www.jetbrains.com/phpstorm/webhelp/transpiling-sass-less-and-scss-to-css.html
in arguments need only $FilePath/$FileName


========
PHamlP
Haml and Sass have been used in Ruby for sometime to simplify templates (Haml) and make CSS more intelligent, flexible and manageable (Sass); now they come to PHP in PHamlP.

Features

Framework independent. PHamlP can be used with any framework (wrapper functions are required to integrate with frameworks; an example for Yii is provided - I'd welcome contributions for other frameworks) or standalone.
Indentation auto-detect. PHamlP allows use of spaces or tab as the indentation character and automatically detects which on a per file basis; and, if spaces, how many.
Rendering options to support readability for development and minimised whitespace for production.
Haml & Sass V3.x compliant (.sass and .scss SASS syntax support, FireSass integration, new variable syntax, @extend directive)
Includes Compass (PHamlP V3.2 and greater).
Haml
Haml is based on one primary principle. Markup should be beautiful.

<<<<<<< HEAD
Haml is a markup language that’s used to cleanly and simply describe the XHTML of any web document, without the use of inline code. It avoids the need for explicitly coding XHTML into the template, because it is actually an abstract description of the XHTML, with some code to generate dynamic content.
=======
Haml is a markup language that�s used to cleanly and simply describe the XHTML of any web document, without the use of inline code. It avoids the need for explicitly coding XHTML into the template, because it is actually an abstract description of the XHTML, with some code to generate dynamic content.
>>>>>>> dd08e15fcc11a3bda975647d1fb4156ceb3935dc

See http://haml-lang.com for details on Haml

PHamlP comes with a rich set of predefined filters including JavaScript, CSS, Sass, PHP, and more; it can easily be extended by writing your own.

PHamlP also has a set of helper methods, and the helper class can be extended to add your own.

Example Code
{bracketed comments are not Haml code}

Haml
  .content {default tag is div. .class=<div class="class">, #id=<div id="id">}
    %p {%tag}
      %img(src="/images/logo.jpg" alt="Logo") {attributes are specified as normal}
      Haml is based on one primary principle. Markup should be beautiful.
    %ul.list
      - for($i=0; $i<3; $i++) {no need for ending semicolons or brackets for PHP code}
        %li= $i
XHTML/PHP (Nested Rendering)
  <div class="content">
    <p>
      <img src="/images/logo.jpg" alt="Logo" />
      Haml is based on one primary principle. Markup should be beautiful.
    </p>
    <ul class="list">
      <?php for($i=0; $i<3; $i++) { ?>
        <li><?php echo $i; ?></li>
      <?php } ?>
    </ul>
  </div>
Sass
<<<<<<< HEAD
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; keeping stylesheets powerful, manageable and DRY.
=======
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; keeping stylesheets powerful, manageable and DRY.
>>>>>>> dd08e15fcc11a3bda975647d1fb4156ceb3935dc

Features

Nested rules. See stylesheet structure at a glance and avoid repetition.
Variables. Make stylesheets readable.
SassScript. Perform operations on variables. Unit conversion and colour operations are supported.
Mixins. Reuse property and rule definitions without retyping them.
Selector Inheritance. Tell one selector to inherit all the styles of another without duplicating the CSS properties.
Import. Import Sass files (.sass and .scss) into a single CSS output to save HTTP requests.
Caching of compiled Sass files.
Mixins are extremely powerful. They allow properties and rules to be reused without having to rewrite them. Their true power is realised with the use of arguments; this allows a mixin to be reused in different ways in different places.

The @import directive imports other Sass files. This allows stylesheets to be split up into manageable sections and even modularise your stylesheets; the Compass Project is a great example of how Sass permits modularisation. Variables and Mixins defined in imported stylesheets are available in the importing stylesheet. And the output is a single CSS file; saving HTTP requests.

From V3.2 PHamlP includes a port of Compass.

See http://sass-lang.com/ for details on Sass

Example Code
{bracketed comments are not Sass code}

Sass
  $link_colour: #556b2f {defines a variable}
  $link_visited_colour: crimson {PHamlP supports SVG colours)
  $link_hover_colour: !link_colour + #333 {SassScript has colour operations}

  =replace-text($img, $x = 50%, $y = 50%) {= defines a mixin. Uses arguments and has defaults for some)
    text-indent: -9999em
    overflow: hidden
    background:
      image: image_url($img)
      repeat: no-repeat
      position: $x $y

  h1
    +replace-text(/images/logo.png) {+ use a mixin)
    font: {save repition with nesting of selectors}
     size: 120%
     weight: bold

  h2#overview
    +replace-text(/images/overview.png, 20%) {use the mixin with different arguments}

  .content
    margin: 1% 2%
    p
      padding: 1% 2%
    a
      color: $link_colour {assign a variable}
      &:hover {& is replaced with the parent selector}
        color: $link_hover_colour
      &:visited
        color: $link_visited_colour

  @import sass_import {import sass_import.sass and make variables and mixins defined in it available here. No extension means use the current extension.}
  @import scss_import.scss {import scss_import.scss and make variables and mixins defined in it available here. Need to specify .scss in a .sass file, and vice versa}
SCSS
Version 3 of PHamlP brings the new SCSS syntax (note: the indented SASS syntax is not deprecated and is fully supported). This is the equivalent of the above in SCSS.

  $link_colour: #556b2f;
  $link_visited_colour: crimson;
  $link_hover_colour: $link_colour + #333;

  @mixin replace-text($img, $x = 50%, $y = 50%) {
    text-indent: -9999em;
    overflow: hidden;
    background: {
      image: image_url($img);
      repeat: no-repeat;
      position: $x $y;
    }
  }

  h1 {
    @include replace-text(/images/logo.png);
    font: {
      size: 120%;
      weight: bold;
    }
  }

  h2#overview {
    @include replace-text(/images/overview.png, 20%);
  }

  .content {
    margin: 1% 2%;
    p {
      padding: 1% 2%;
    }
    a {
      color: $link_colour;
      &:hover {
        color: $link_hover_colour;
      }
      &:visited {
        color: $link_visited_colour;
      }
    }
  }

  @import sass_import.sass;
  @import scss_import;
CSS (Nested Rendering)
  h1 {
    text-indent: -9999em;
    overflow: hidden;
    background-image: image_url(/images/logo.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    font-size: 120%;
    font-weight: bold;
  }

  h2#overview {
    text-indent: -9999em;
    overflow: hidden;
    background-image: image_url(/images/overview.png);
    background-repeat: no-repeat;
    background-position: 20% 50%;
  }

  .content {
    margin: 1% 2%;
  }
    .content p {
      padding: 1% 2%;
    }
      .content p a {
        color: #556b2f;
      }
        .content p a:hover {
          color: #dc143c;
        }
        .content p a:visited {
          color: #889e62;
        }
  
  {The compiled content of the included files will appear here}
Credits
PHamlP is a port of Haml and Sass to PHP. All the genius comes from the people that invented and develop Haml and Sass; in particular:

Hampton Catlin,
Nathan Weizenbaum,
Chris Eppstein
The bugs are mine.

Releases

No releases published

Packages

No packages published