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


.. _administrators_bestpractice_scss_constanteditor:

.. index::
    pair: SCSS; accordion 
    pair: SCSS; body 
    pair: SCSS; breadcrumbs 
    pair: SCSS; breakpoint 
    pair: SCSS; button 
    pair: SCSS; callout 
    pair: SCSS; color palette 
    pair: SCSS; dropdown-menu 
    pair: SCSS; footer 
    pair: SCSS; global 
    pair: SCSS; menu 
    pair: SCSS; megamenu 
    pair: menu; megamenu 
    pair: SCSS; metamenu 
    pair: menu; metamenu 
    pair: SCSS; off-canvas 
    pair: SCSS; orbit 
    pair: SCSS; pagination 
    pair: SCSS; reveal 
    pair: SCSS; sidebar 
    pair: SCSS; sitelinetop 
    pair: SCSS; table 
    pair: SCSS; tabs 
    pair: SCSS; titlebar 
    pair: SCSS; top-bar 
    pair: SCSS; typografy 
    single:constant editor; SCSS


.. figure:: ext_start_ts_constant-editor_scss_variables.png
	:width: 300px
	:alt: Constant Editor with SCSS properties

  Constant Editor with SCSS properties


Constant Editor
===============

If you like to adapt CSS to your needs, you don't must edit CSS or SCSS directly.

You can configure most of the common properties by the TypoScript Constant Editor (see illustration above).
You can use CSS values like '#00FFFF' or SCSS variables like '$primary-color'.

These features have SCSS properties by the Constant Editor:

* accordion 
* body 
* breadcrumbs 
* breakpoint 
* button 
* callout 
* color palette 
* dropdown-menu 
* footer 
* global 
* menu 
* megamenu 
* metamenu 
* off-canvas 
* orbit 
* pagination 
* reveal 
* sidebar 
* sitelinetop 
* table 
* tabs 
* titlebar 
* top-bar 
* typografy