CSS Forum

**TWD** · 05-26-2012, 10:37 AM

Has anyone tried LESS ?

http://lesscss.org/

I am intrigued.

**Physicsguy** · 05-27-2012, 07:30 PM

I've seen this around before, and it certainly looks very cool. My first concern though, is how it will fall back with browsers with JS disabled.

**NullPointer** · 05-29-2012, 08:39 PM

Quote:

Originally Posted by Physicsguy

I've seen this around before, and it certainly looks very cool. My first concern though, is how it will fall back with browsers with JS disabled.

I don't see the point in deploying it client side since it really only exists to make developer's lives easier. Just compile it to css and sidestep the JS issues all together.

**Physicsguy** · 08:25 PM

Quote:

Originally Posted by NullPointer

I don't see the point in deploying it client side since it really only exists to make developer's lives easier. Just compile it to css and sidestep the JS issues all together.

To me, that's too much of a hassle. It would work, but it would defeat the purpose of using LESS in the first place. The variables in LESS make CSS so much easier, but usually what I do to avoid that is use a style.php, and include() that in a <style> tag. Messy, but it works with PHP variables in the CSS code.

EDIT: Something like this:

Normal style.css:

Code:

body{
background:$css_mainColor1;
color:$css_textColor1;
font-size:$css_mainFontSize;
}

As you can see, those PHP variables won't work, even if they exist. .css files aren't parsed as PHP (but you could probably make it so they are in .htaccess). Using this simple fix:

Renamed to style.php:

Code:

body{
background:$css_mainColor1;
color:$css_textColor1;
font-size:$css_mainFontSize;
}

Included in index.php or wherever you need styling (maybe a main header.php file?)

PHP Code:


			
$css_mainColor1 = '#000';
$css_textColor1 = '#fff';
$css_mainFontSize = '14px';
echo '<style type="text/css">';
include('style.php');
echo '</style>';

To make the variables work.

**NullPointer** · 04:48 PM

Quote:

The variables in LESS make CSS so much easier, but usually what I do to avoid that is use a style.php, and include() that in a <style> tag. Messy, but it works with PHP variables in the CSS code.

I'm not sure I understand. How does using a client side less implementation (ie serving the raw less file and the js parser) allow you to use PHP variables in your style sheet? Regardless of whether your less code is compiled server side or client side it is still completely distinct from PHP.

Having your .css files parsed by PHP or (worse) sticking your entire stylesheet your html output increases server load. If all you want is variables, just use less and compile it to css. If you have styles you want to override with user settings in PHP, just use a static css file and output the user settings in your header.

style.css

Code:

body {
     background-color:#fff;
     color:#000;
     font-size:14px;
}

PHP code to override default styles

PHP Code:


			
<?php

//call this function inside <head>...</head>

function custom_styles()

{

     $custom_bg = '#000';

     $custom_color = '#fff';

?>

<style type="text/css">body { background-color: <?php echo $custom_bg; ?>; color: <?php echo $custom_color; ?>; }</style>

<?php

}

?>

**orionoreo** · 06-07-2012, 05:14 PM

so LESS and SASS are all new frameworks for SCSS

Nullpointer, LESS has both server side and client side option where the server side is the fallback for non js systems.

The core concept of SCSS is not focused on the ability to use PHP in css but rather helping organize and create structure around coding css.. so bringing in coding practices such as using variables, manipulating those variables and etc

so it could be something like this:

Code:

@brown: #978618
@ligher-brown: desaturate(lighten(@brown, 50%), 45%);

where this framework really plays well is large teams developing a single site... other than everybody defining a specific font every time you would do it once, and incase the client change their mind you also don't have to do find and replace

Code:

.font {
	font-family: Arial;
	font-size: 12px;
}


.nav {
	.font;
	color: @brown;
	width: 50%;
}

.footer {
	.font;
	color: @lighter-brown;
}

**vangogh** · 06-08-2012, 04:57 PM

I haven't used them in production yet, but I've played around with both Less and Sass and like them. I'll likely use it in production on my own sites very soon. I haven't decided yet if I will on client sites. Some of my clients will jump in and make simple edits to their css files and once they do you can't really use a preprocessor on that file any more. However you can still use one initially.

Quote:

Originally Posted by Physicsguy

To me, that's too much of a hassle.

Scott there are tools where you pretty much just save the Less or Sass file and everything is complied. Not a hassle at all. Your compiling your php. The only real difference is for you the compiler is happening on the server instead of on your computer.

It's really not different than what you're doing, except that if you use Less or Sass you can benefit from everything the community is doing. There's also a framework built on top of Sass called Compass to take advantage of existing work.

Quote:

Originally Posted by orionoreo

where this framework really plays well is large teams developing a single site

I think they work well for maintenance. For example changing a color scheme quickly across a site or make a change in the font-size of your body copy and having all the proportions for the site adjust.