.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.

.. include:: ../../Includes.txt

.. _developers_scss:


.. index::
  ! SCSS
  pair: SCSS; TypoScript
  pair: SCSS; Foundation


SCSS
====

* t3foundation will compile your extension's SCSS files. But not only that.
* t3foundation integrates your TYPO3 constants into your SCSS files!


Sample
------

.. code-block:: typoscript

  // EXT:my_ext/Configuration/TypoScript/constants.typoscript
  plugin.my_ext.background-color = #DEDEDE
  plugin.my_ext.font-famliy      = Sans, Arial, Courier
  ...

  // EXT:my_ext/Configuration/TypoScript/setup.typoscript
  lib.scssVariables.background-color = {$plugin.my_ext.background-color}
  lib.scssVariables.font-famliy      = {$plugin.my_ext.font-famliy}
  ...


.. code-block:: typoscript

  // EXT:my_ext/Resources/Public/Scss/_variables.scss
  $background-color = #FFFFFF !default
  $font-famliy      = Courier, Arial !default 
  ...


Workflow
--------

* t3foundation compiles the SCSS files.
* If there is a `lib.scssVariables` array in the TypoScript setup, t3foundation
  will take each element and replace its value in an SCSS file if there is a
  variable with the same name and a value marked !default.
* Pay attention to unique variables in your SCSS files. If you have defined a
  variable twice, the value substitution may not be correct.


Foundation variables
--------------------

If you want to familiarize yourself with the variables of Foundation, please 
search for `!default` in `EXT:t3foundation/Resources/Public/Scss/foundation-6.7.4/`.