.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============ EXT: Sassify ============ :Created: 2010-02-18T17:33:18 :Changed: 2012-03-06T11:33:25 :Classification: sassify :Keywords: Sass CSS PHamlP forDevelopers forAdmins forIntermediates :Author: Christopher Hlubek :Email: hlubek@networkteam.com :Info 4: :Language: en |img-1| EXT: Sassify - sassify .. _EXT-Sassify: EXT: Sassify ============ Extension Key: sassify Language: en Keywords: Sass CSS PHamlP forDevelopers forAdmins forIntermediates Copyright 2010-2012, Christopher Hlubek, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `EXT: Sassify 1 <#1.EXT:%20Sassify|outline>`_ **`Introduction 3 <#1.1.Introduction|outline>`_** `What does it do? 3 <#1.1.1.What%20does%20it%20do_|outline>`_ **`Users manual 4 <#1.2.Users%20manual|outline>`_** `FAQ 4 <#1.2.1.FAQ|outline>`_ **`Configuration 5 <#1.3.Configuration|outline>`_** `Reference 5 <#1.3.1.Reference|outline>`_ **`Known problems 6 <#1.4.Known%20problems|outline>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ - This extension will provide a Sass integration for TYPO3. Sass is a CSS meta language that has many useful extensions for CSS to structure your stylesheets more efficiently while being compatible to the CSS syntax. A script-language allows actual programming and calculation in CSS. The extension can compile Sass files on the fly to CSS using a pure PHP Sass compiler (from the PhamlP project). - The extension is currently based on a PhamlP fork with some fixes to the original version and does support a decent amount of Sass features and also the Compass extension (but not the most recent version). .. _Users-manual: Users manual ------------ The extension comes with a static TypoScript template that includes the compiled Sass files in the page header. Every Sass file needs to be configured using TypoScript as a stylesheet (see Configuration). .. _FAQ: FAQ ^^^ .. _Is-the-SCSS-syntax-supported: Is the SCSS syntax supported? """"""""""""""""""""""""""""" Yes. Sassify uses PHamlP which supports both Sass syntaxes. .. _Is-it-compatible-to-the-Ruby-Sass-Gem: Is it compatible to the Ruby Sass Gem? """""""""""""""""""""""""""""""""""""" Almost. The PhamlP Sass parser does not support the full set of Sass syntax and uses an older version of the Compass extension. We are planning to introduce the Ruby Sass compiler as an alternative to the pure PHP compiler. .. _How-are-Sass-files-compiled: How are Sass files compiled? """""""""""""""""""""""""""" Sassify relies on the PHamlP library (http://code.google.com/p/phamlp/) which is a PHP port of the famous haml & sass ruby gems. We use a forked version because the official PhamlP library is no longer maintained. .. _My-changes-to-Sass-files-are-not-visible-in-the-frontend-What-can-I-do: My changes to Sass files are not visible in the frontend. What can I do? """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" You have to enable the development mode of sassify (plugin.tx\_sassify\_plugin.development) to enable re-compilation of existing files. You should not enable this in production environments! With the new symlinkOutput feature, all compiled files (even with custom output targets) will be placed in a temporary folder and cleaned up on “Clear all caches”. This will cause a re-compilation of all configured Sass stylesheets on the next frontend request. .. _Configuration: Configuration ------------- .. _Reference: Reference ^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _development: development """"""""""" .. container:: table-row Property development Data type boolean Description Enable development mode to force re-compilation of Sass files on each (uncached or not in cache) frontend request. Default 0 .. _symlinkOutput: symlinkOutput """"""""""""" .. container:: table-row Property symlinkOutput Data type boolean Description Symlink compiled files from output target to temporary folder. A clear cache hook will clean up all compiled files on “Clear all caches” for easy updates during development or production. Default 1 .. _forceSymlinks: forceSymlinks """"""""""""" .. container:: table-row Property forceSymlinks Data type boolean Description Symlinks to the output files will be created even if a regular file at the output location already exists. Default 0 .. _style: style """"" .. container:: table-row Property style Data type string Description The Sass output style to use for compiled files: nested, expanded, compactor compressed See `http://sass- lang.com/docs/yardoc/file.SASS\_REFERENCE.html#output\_style `_ for more information about the styles. Default Sass default .. _extensions-extensionName: extensions.[extensionName] """""""""""""""""""""""""" .. container:: table-row Property extensions.[extensionName] Data type boolean Description Enable Sass extenstions like Compass. **Example:** :: plugin.tx_sassify_plugin { extensions { compass = 1 } } Default .. _debugInfo: debugInfo """"""""" .. container:: table-row Property debugInfo Data type boolean Description Enable to output debug information in the compiled CSS files for debugging with FireSass. Default 0 .. _showExceptions: showExceptions """""""""""""" .. container:: table-row Property showExceptions Data type boolean Description Enable to show exceptions in the frontend that occurred during the Sass parsing. Otherwise exceptions will be placed as HTML comments at the stylesheet location inside the head. Default 0 .. _cache: cache """"" .. container:: table-row Property cache Data type boolean Description Enable internal Sass caching. Default 1 .. _stylesheets-10: stylesheets.10, """"""""""""""" .. container:: table-row Property stylesheets.10, stylesheets.20, stylesheets.[key] Data type string Description Filename of the Sass file to include. **Example:** :: plugin.tx_sassify_plugin { stylesheets { 10 = fileadmin/sass/site.scss 20 = fileadmin/sass/special.scss } } Default .. _stylesheets-key-media: stylesheets.[key].media """"""""""""""""""""""" .. container:: table-row Property stylesheets.[key].media Data type string / stdWrap Description Media setting of the stylesheet include (e.g. “all”, “screen”). Default all .. _stylesheets-key-output: stylesheets.[key].output """""""""""""""""""""""" .. container:: table-row Property stylesheets.[key].output Data type string / stdWrap Description Output filename, if rendered CSS should not be placed in typo3temp. This is important if relative paths to assets are used inside the Sass files. Note the symlinkOutput option which should be enabled to clear the compiled files outside the temporary folder. **Example:** :: plugin.tx_sassify_plugin { stylesheets { 10 = fileadmin/sass/site.scss 10.output = fileadmin/sass/site.css } } Default typo3temp/sassify\_css/[filename].css .. _stylesheets-key-filenameWrap: stylesheets.[key].filenameWrap """""""""""""""""""""""""""""" .. container:: table-row Property stylesheets.[key].filenameWrap Data type stdWrap Description stdWrap applied to the Sass filename before prepending the TYPO3 site path. Default .. _stylesheets-key-linkWrap: stylesheets.[key].linkWrap """""""""""""""""""""""""" .. container:: table-row Property stylesheets.[key].linkWrap Data type stdWrap Description stdWrap applied to the tag that includes the rendered CSS. Could be used to add a conditional comment around the stylesheet inclusion. **Example:** :: plugin.tx_sassify_plugin { stylesheets { 10 = fileadmin/sass/site.scss 10.linkWrap.wrap = } } Default .. ###### END~OF~TABLE ###### [plugin.tx\_sassify\_plugin] .. _generated: ((generated)) """"""""""""" .. _Example: Example ~~~~~~~ Example configuration with debug enabled for development: :: plugin.tx_sassify_plugin { debugInfo = 1 showExceptions = 1 stylesheets { 10 = test.scss 10.filenameWrap.wrap = fileadmin/sass/| 10.media = screen 10.linkWrap.wrap = | } } .. _Known-problems: Known problems -------------- - The extension does not re-compile existing files per default to prevent performance problems. Development mode or the new symlinkOutput option should be used to enable forced re-compilation or clearing of compiled files to solve the problem. - Not all Sass features are supported and the PHP based parser screws up sometimes on special syntax cases. We are working on a feature to use the original Sass compiler as an alternative way of compiling Sass files. - The included Compass version is older and limited with the PHP based Sass parser. - Defining custom functions with Sass script is not supported with the PHP based Sass parser. 7 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left