LESS and SCSS

These plugins are targeted to theme developers and help you write your style sheets in "LESS" or "SCSS" instead of CSS and will automatically compile these LESS/SCSS files to CSS files when and only when needed.

Installation

Download one of the plugins from http://get-simple.info/extend/plugin/less/787/ or http://get-simple.info/extend/plugin/scss/794/, unzip it and copy it to the plugins directory of your GetSimple installation.

LESS

This plugin helps you to use LESS to write your style sheets instead of CSS (see http://leafo.net/lessphp/ for information on the syntax of LESS).
The performance impact is minimal, as CSS files are generated when first needed and afterwards served directly to the site user.

Just write a LESS file (e.g. here background.less with a variable color):

body { background-color: @color; }

Of course your file will probably be longer and use each variable multiple times.

Then you can use this file within your template:

  • Either your LESS file is recompiled every time it or the parameters change, which makes sense, if you want to keep your CSS file untouched and just set the variables in your template file (or from some other site-wide setting):
<link rel="stylesheet" type="text/css" 
href="<?php get_less_css('background.less', array('color'=>'green')); ?>" />
  • Or you want to set the parameters depending on the page (or time of date, etc.), thus using multiple CSS files generated from one less file at the same time. The following example shows, how to set the background color based on a custom field color in the page (white as default, note the last parameter true):
<link rel="stylesheet" type="text/css" 
href="<?php get_less_css('background.less', 
  array('color'=>return_custom_field('color', 'white')), true); ?>" />

API

  • function return_less_css($themeRelativeLessFile, $params=null, $multipleCSS=false)
    Compiles a LESS file to a css file, if the less file is newer or the parameters are changed ($multipleCSS = false); compiles a LESS file to a parameter specific css file, if the less file is newer ($multipleCSS = true).
    The first parameter is the name of the LESS file, e.g. "default.less" (if it's directly in the theme directory) or "css/default.less".
    The second parameter is an associative array with the parameters for the LESS file and the last parameter must be true, if for each parameter set a new CSS file should be compiled and all these CSS files should be available at the same time.
    Returns the full URL of the generated CSS file.
  • function get_less_css($themeRelativeLessFile, $params=null, $multipleCSS=false) The same as above but outputs the CSS file URL.

SCSS

This plugin helps you to use SCSS to write your style sheets instead of CSS (see http://leafo.net/scssphp/ for information on the compiler and here for the syntax of SCSS).
The performance impact is minimal, as CSS files are generated when first needed and afterwards served directly to the site user.

Just write a SCSS file (e.g. background.scss here with a parameter color) in your template directory:

body { background-color: param(color); }

Of course your file will probably be longer and use each parameter multiple times.

Then you can use this file within your template:

  • Either your SCSS file is recompiled every time it or the parameters change, which makes sense, if you want to keep your CSS file untouched and just set the variables in your template file (or from some other site-wide setting):
<link rel="stylesheet" type="text/css" 
href="<?php get_scss_css('background.scss', array('color'=>'green')); ?>" />
  • Or you want to set the parameters depending on the page (or time of date, etc.), thus using multiple CSS files generated from one SCSS file at the same time. The following example shows, how to set the background color based on a custom field color in the page (white as default, note the last parameter true):
<link rel="stylesheet" type="text/css" 
href="<?php get_scss_css('background.scss', 
  array('color'=>return_custom_field('color', 'white')), true); ?>" />

API

  • function return_scss_css($themeRelativeScssFile, $params=null, $multipleCSS=false)
    Compiles a SCSS file to a CSS file, if the SCSS file is newer or the parameters have changed ($multipleCSS = false). Compiles a SCSS file to a parameter specific CSS file, if the SCSS file is newer ($multipleCSS = true).
    The first parameter is the name of the SCSS file, e.g. "default.scss" (if it's directly in the theme directory) or "css/default.scss".
    The second parameter is an associative array with the parameters for the SCSS file and the last parameter must be true, if for each parameter set a new CSS file should be compiled and all these CSS files should be available at the same time.
    Returns the full URL of the generated CSS file.
  • function get_scss_css($themeRelativeScssFile, $params=null, $multipleCSS=false)
    The same as above but outputs the CSS file URL.