LESS - Leaner css (a css extension ala SASS)

126 Posts

debussy Reply #21, 11 years, 7 months ago

Ultimately, I think it's just a matter of preference really.

With LESS you can edit files on the server rather than go through the web editor... which I suppose you could do with static resources now. Thus, it's a little more straightforward on the workflow—at least for me.

There is something to be said about being able to put colors into one single file and then reference the variable with @name. I can only see this being possible with many chunks or with a snippet with a passed-in variable which is less readable in the main css.

One huge advantage to LESS over CSS is a cleaner hierarchical structure to edit, and the fact that it can generate compressed CSS. This LESS:

.wrapper {
	color: blue;
	padding: 2px;
	
	.element {
		color: red;
		margin: 5px;
		
		a {
			color: green;
			text-decoration: none;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

Will output this CSS:

.wrapper { 
	color: blue;
	padding: 2px;
}
.wrapper .element {
	color: red;
	margin: 5px;
}
.wrapper .element a {
	color: green;
	text-decoration: none;
}
.wrapper .element a:hover {
	text-decoration: underline;
}

...or with compression turned on, it can output:

.wrapper{color:blue;padding:2px}.wrapper .element{color:red;margin:5px}.wrapper .element a{color:green;	text-decoration:none}.wrapper .element a:hover{text-decoration:underline}

You can reuse styles in other styles... this LESS:

.element1 {
	color: red;
	padding: 2px;
	margin: 2px;
}

.element2 {
	.element1;
	color: blue;
}

Will output this CSS:

.element1 {
	color: red;
	padding: 2px;
	margin: 2px;
}

.element2 {
	color: red;
	padding: 2px;
	margin: 2px;
	color: blue;
}

Those are some of the main reasons. I suppose keeping all your stuff in LESS files provides for a lot more portability in and out of projects—and not just MODX ones.

14 Posts

govzavu Reply #22, 11 years, 4 months ago

Less is greate, and thank you debbussy for extension for modx. Using this on my work, without need to compile and move css, just making snippet cached after changes.

But see some strange behavior while testing website on Yslow

There is 1 static component without a far-future expiration date.
(1981/11/19) http://mysite/style.css

.htaccess is right, and if I use static file style.css have no expired headers.
Finally found that this is how operating resources in modx, by default. http://tracker.modx.com/issues/3995.

So for getting A grade (not sure is it important but for perfection) with my little knowledge added a little code to this snippet , changing the headers for better perfomance

function headers() {
if(!empty($_SERVER['HTTP_IF_MODIFIED_SINCE'])){
 $lastMod = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
 if($modx->resource->editedon <= $lastMod){
   header("HTTP/1.0 304 Not Modified");
   header("Cache-control: private, max-age = 0");
   header('Expires: '.gmdate('D, d M Y H:i:s', time()+2629743));
   exit();
 }
}
header("Cache-control: private, max-age = 3600");
header('Expires: '.gmdate('D, d M Y H:i:s', time()+2629743));
header("Last-Modified: " . gmdate('D, d M Y H:i:s', $modx->resource->editedon) . " GMT");

I'm not sure what will works right, as i'm newbie, but may be this will be used for smth.

26 Posts

hugopeek Reply #23, 10 years, 8 months ago

Thanks indeed Debussy for releasing the LessCSS package! Sure is great to be able to make small edits directly in the right place now.

There's only one problem with it: like Govzavu stated above the headers are always expired by default in MODX when you use a (cached) resource instead of an actual CSS file... This means the browser will reload the stylesheet on every new page request.. Fortunately OpenGeek created a nifty little plugin to alter the HTTP headers, check out this post for more info:

http://forums.modx.com/thread/84232/cache-101

With this installed I got my CSS resource to load just as fast as any regular CSS file.