Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Less Plugin
#1
Less plugin:

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):
Code:
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):
Code:
<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):
Code:
<link rel="stylesheet" type="text/css" href="<?php get_less_css('background.less', array('color'=>return_custom_field('color', 'white')), true); ?>" />

API:
Code:
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.

Code:
function get_less_css($themeRelativeLessFile, $params=null, $multipleCSS=false) {
The same as above but outputs the CSS file URL.


For yet another CSS like syntax see the SCSS plugin.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#2
why it works
Code:
return_custom_field('color', 'white')
and so does not work?
Code:
return_special_field('color', 'white')
(2014-03-26, 07:04:48)mvlcek Wrote: Less plugin:

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 (here with a variable color):
Code:
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):
Code:
<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):
Code:
<link rel="stylesheet" type="text/css" href="<?php get_less_css('background.less', array('color'=>return_custom_field('color', 'white')), true); ?>" />

API:
Code:
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.

Code:
function get_less_css($themeRelativeLessFile, $params=null, $multipleCSS=false) {
The same as above but outputs the CSS file URL.
Reply
#3
(2014-03-26, 17:42:03)Oleg06 Wrote: why it works
Code:
return_custom_field('color', 'white')
and so does not work?
Code:
return_special_field('color', 'white')

I suppose you don't have a special view HTML/PHP code in your special page type definition. In this case the fields were not loaded and return_special_field didn't work. It's now fixed in version 1.2.2 of I18N Special Pages.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#4
does not work. that is to use both plugins together not?
Code:
<link rel="stylesheet" type="text/css" href="<?php get_less_css('background.less', array(
    'acolor'=>return_special_field('acolor', 'white'),
    'bcolor'=>return_special_field('bcolor', 'white')
    'ccolor'=>return_custom_field('ccolor', 'white')
    ), true); ?>" />
(2014-03-26, 18:51:42)mvlcek Wrote:
(2014-03-26, 17:42:03)Oleg06 Wrote: why it works
Code:
return_custom_field('color', 'white')
and so does not work?
Code:
return_special_field('color', 'white')

I suppose you don't have a special view HTML/PHP code in your special page type definition. In this case the fields were not loaded and return_special_field didn't work. It's now fixed in version 1.2.2 of I18N Special Pages.
Reply
#5
(2014-03-26, 20:28:15)Oleg06 Wrote: does not work. that is to use both plugins together not?
Code:
<link rel="stylesheet" type="text/css" href="<?php get_less_css('background.less', array(
    'acolor'=>return_special_field('acolor', 'white'),
    'bcolor'=>return_special_field('bcolor', 'white')
    'ccolor'=>return_custom_field('ccolor', 'white')
    ), true); ?>" />

You should check for errors by switching on debugging and checking the page source in the browser and the log file for errors. In above case there is a missing comma at the end of the third line.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#6
Thanks, it works
Reply
#7
I created a field of type image, and the code is generated
Code:
#tekstovyj-blok-39 {
  background-image: url(http);
}
Reply
#8
(2014-03-26, 23:54:11)Oleg06 Wrote: I created a field of type image, and the code is generated
Code:
#tekstovyj-blok-39 {
  background-image: url(http);
}

This seems to be a problem/feature of the lessPHP compiler and a ":" in the string. You can work around it by adding quotes around the string field, e.g.
Code:
get_less_css('background.less', array('image'=>'"'.return_custom_field('image', '').'"'), true);
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#9
any possibility to extend this plugin with SCSS support ?
Reply
#10
(2014-04-04, 23:14:15)morvy Wrote: any possibility to extend this plugin with SCSS support ?

See the SCSS plugin.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#11
Together with the Theme Settings plugin it is now easy to create configurable themes.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#12
Hi,
if anybody interesting, I add in less.php in line 53

Code:
$lessc->setFormatter("compressed");

and it output compressed css what is very nice!
with regards,
Darko from Slovenia Rolleyes
Reply




Users browsing this thread: 1 Guest(s)