-
Notifications
You must be signed in to change notification settings - Fork 0
Based on PhamlP 3.2 at https://code.google.com/p/phamlp
MrSwed/PHamlP
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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 0
No packages published