Yii Framework Forum: [EXTENSION] LESS - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] LESS Compile your LESS server-side Rate Topic: -----

#21 User is offline   gio17 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 31-May 12

Posted 31 May 2012 - 09:09 PM

Hi Chris

I've used the version 0.9.1 r17 and it works perfectly without errors.

Now I've updated the less extension to ver 0.10.0 r20
I have an error like this

"Property 'LessCompiler.compress' is not defined"

What should I do?

Thanks :)
0

#22 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 01 June 2012 - 07:27 AM

View Postalmix, on 25 May 2012 - 08:12 AM, said:

Chris,

do you use only less/styles.less for design styles? On bootstrap site there is also docs.css

Your extension yii-bootstrap create
<link rel="stylesheet" type="text/css" href="/assets/9a4eed2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/9a4eed2/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/9a4eed2/css/bootstrap-yii.css" />

but there is no docs.css

So I need insert styles from docs.css into styles.less?


Dude, this question I will answer for Chris. Actually the folder docs in bootstrap download pack (https://github.com/t...ree/master/docs) is the documentation of the css framework. It does not have anything related with the framework, its just the documentantion. They use the framework and this additional file docs.css to style another things on page.

You can add your own css files on your templates. On my case I configured the bootstrap extension to do not load the default css so I can compile my own css files and then add on my templates.
0

#23 User is offline   schmunk 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 566
  • Joined: 02-November 08
  • Location:Stuttgart, Germany

Posted 01 June 2012 - 07:59 AM

View Postgio17, on 31 May 2012 - 09:09 PM, said:

Hi Chris

I've used the version 0.9.1 r17 and it works perfectly without errors.

Now I've updated the less extension to ver 0.10.0 r20
I have an error like this

"Property 'LessCompiler.compress' is not defined"

What should I do?

Thanks :)


You should remove the "Property 'LessCompiler.compress'" from your config.
Phundament - Yii Application Boilerplate with composer support
Fork on github

Follow phundament on Twitter

DevSystem: Mac OS X 10.7 - PHP 5.3 - Apache2 - Yii 1.1 / trunk - Firefox or Safari
0

#24 User is offline   gio17 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 31-May 12

Posted 02 June 2012 - 04:05 AM

View Postschmunk, on 01 June 2012 - 07:59 AM, said:

You should remove the "Property 'LessCompiler.compress'" from your config.


Great! It works now
Thanks :)
0

#25 User is offline   Rafael Lima 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 18
  • Joined: 30-January 12

Posted 10 June 2012 - 04:36 PM

View Postthiagovidal, on 01 June 2012 - 07:27 AM, said:

You can add your own css files on your templates. On my case I configured the bootstrap extension to do not load the default css so I can compile my own css files and then add on my templates.


Hi Thiago, could you tell me how did you manage to configure bootstrap not do load the default css?

thank you
0

#26 User is offline   plm 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 13-January 12
  • Location:Switzerland

Posted 11 June 2012 - 04:24 AM

Hi guys

As i was having some trouble at first too, here is my solution for a smart, fast and smooth integration of both yii-bootstrap and the less-extension of chris. I'm sure this is going to help a lot of you guys, that's why im posting this here.

I divide this guide into the following steps:

  • Installation of Bootstrap- and Less-extension
  • Configuring Yii and both extensions
  • Additional Controller-Action for force-parsing the less-files
  • Conclusion


1. Installation of Bootstrap- and Less-extension
Download both extensions from the corresponding extension page and extract them under your <approot>/protected/extensions folder (foldernames: bootstarp, less).

2. Configuring Yii and both extensions
Then you need to make the entries in the global config-file (<approot>/protected/config/main.php). As you will see I disable the integration of the bootstrap css-files as I'd like to have one single css-file integrated into the website which consists of all the necessary css-files and gets parsed by the less-compiler.

...
'preload'=>array(
    'less',
    'log',
    'bootstrap',
}
...
//less compiler
'less'=>array(
    'class'=>'ext.less.components.LessCompiler',
    'forceCompile'=>false,
    'paths'=>array(
        'less/main.less'=>'css/style.css',
    ),
),
...
//bootstrap extension
'bootstrap'=>array(
    'class'=>'ext.bootstrap.components.Bootstrap',
    'coreCss'=>false,
    'yiiCss'=>false,
    'responsiveCss'=>false,
    'plugins'=>array(
        //Optionally you can configure the "global" plugins (button, popover, tooltip and transition)
        //To prevent a plugin from being loaded set it to false as demonstrated below
        'transition'=>true,
    ),
),


As you can see I created a master less-file in the following folder which i created manually: <approot>/less/main.less. Within this file I Included the following less files:

  • bootstrap less-files
  • my own vars in a less-file (color-definitions, font-definitions, etc.)
  • my own layout setup
  • my own navigation configs in a less-file
  • my own overrides (to override and configure existing css-rules without touching the extension-files) in a less-file


The contents of the main.less file:
//bootstrap, bootstrap-yii and responsive
@import "../protected/extensions/bootstrap/lib/bootstrap/less/bootstrap.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/responsive.less";
@import "../protected/extensions/bootstrap/assets/less/bootstrap-yii.less";

//vars
@import "vars.less";

//layout
@import "layout.less";

//navigation
@import "navigation.less";

//overrides
@import "overrides.less";

The later four files reside in the same directory as my main.less (<approot>/less).

To make sure nothing interrupts with your newly created less-/css-files empty the standart css-folder of yii. Also remove any imports of css-files and create one single link looking like this:
<link href="/css/style.css" type="text/css" rel="stylesheet">

You can even remove them all and let clientScripts integrate the files via your base-controller like I did. Relevant part of my <approot>/protected/components/Controller.php:
<?php

/**
 * Controller is the customized base controller class.
 * All controller classes for this application should extend from this base class.
 */
class Controller extends CController
{
...
    /**
     * (non-PHPdoc)
     * @see CController::init()
     */
    public function init()
    {
        //include default css-file
        Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . '/css/style.css');

        parent::init();
    }
...


3. Additional Controller-Action for force-parsing the less-files
Yes, the compiler should notice and auto-compile the less-files if changes occured. But as I am using nested files - at least in my installation - this didn't work as it should. So I created a Debug-Controller with an action named 'less'. The sole purpose of this action is to force-compile all the less files and return to the previous page. That's how it looks like:

Contents of file <approot>/protected/controllers/DebugController.php
<?php

class DebugController extends Controller
{
...
    /**
     * recompile less files
     */
    public function actionLess()
    {
        $less = Yii::app()->less;
        $basePath = str_replace('\'', '/', Yii::getPathOfAlias('webroot') . '/');
        foreach ($less->paths as $from=>$to) {
            $fromPath = $basePath . $from;
            $toPath = $basePath . $to;
            $less->compile($fromPath, $toPath);
        }
        $this->redirect(Yii::app()->request->urlReferrer);
    }
...	
}

So when you now call this action via http://chris83.rocks.com/debug/less you get your stuff recompiled and forwarded to the page you were before. The final css-file is now called style.css and gets compiled into the following folder: <approot>/css/style.css.

4. Conclusion
So what have we done!? We have installed both extensions...surprise surprise ;). More iomportantly we have setup a clean css-configuration without files interacting with each other. This way we can be sure to not load additional files and using unnecessary traffic and connections. But more importantly we have one single point of entrance to our style-stuff, which is main.less.
From there on we can now integrate, override etc. whatever we want. The js-files still get integrated automatically and we get an awesome and clean page-header like this:
Posted Image

Further we have created a an action, which can easily be bound to any menu, to force-compile our less-stuff.


I hope this guide helped you guys as it makes this two already awesome extensions even easier to use.
If you have any further questions or input, don't hesitate to contact me!

Greetz from switzerland :),
pascal

Posted Image
2

#27 User is offline   janki 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 05-January 12

Posted 04 August 2012 - 09:33 AM

Hello, I got the behavior i didn't expect.
conf
'less'=>array(
            'class'=>'ext.less.components.LessCompiler',
            'forceCompile'=>false, // indicates whether to force compiling
            'paths'=>array(
                "../protected/less/print.less" => "web/assets/print.css",
                "../protected/less/common.less" => "web/assets/common.css",
            ),
        ),

LessCompiler.init
		if ($this->forceCompile || $this->hasChanges())
			$this->compileAll();

What I thought: if I change one of my less files, all of them will be recompiled. But that didn't happen, because LessCompiler.hasChanges compares time of last change of the earliest less-file and the earliest compiled css
protected function hasChanges()
	{
		$dirs = array();
		foreach ($this->paths as $source => $destination)
		{
			$compiled = $this->getLastModified($destination);
			if (!isset($lastCompiled) || $compiled < $lastCompiled)
				$lastCompiled = $compiled;

			if (!in_array(dirname($source), $dirs))
				$dirs[] = $source;
		}

		foreach ($dirs as $dir) {
			$modified = $this->getLastModified($dir);
			if (!isset($lastModified) || $modified < $lastModified)
				$lastModified = $modified;
		}

		return isset($lastCompiled) && isset($lastModified) && $lastModified > $lastCompiled;
	}


To get behavior i'm expecting I've modified the code this way
protected function hasChanges()
	{
		$dirs = array();
		foreach ($this->paths as $source => $destination)
		{
			$compiled = $this->getLastModified($destination);
			if (!isset($firstCompiled) || $compiled < $firstCompiled)
				$firstCompiled = $compiled;

			if (!in_array(dirname($source), $dirs))
				$dirs[] = $source;
		}

		foreach ($dirs as $dir) {
			$modified = $this->getLastModified($dir);
			if (!isset($lastModified) || $modified > $lastModified)
				$lastModified = $modified;
		}
		return isset($firstCompiled) && isset($lastModified) && $lastModified > $firstCompiled;
	}

Now it compares last modified less and earliest compiled css. So if I change only one less-file, all of them are recompiled. And that's what I want.

PS of course it would be better to compare each less with it's css, but we don't change less so often and it's fine to compile them all and forget about this
0

#28 User is offline   mtzmedia 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 28-April 12

Posted 17 August 2012 - 10:35 AM

View Postplm, on 11 June 2012 - 04:24 AM, said:

Hi guys

As i was having some trouble at first too, here is my solution for a smart, fast and smooth integration of both yii-bootstrap and the less-extension of chris. I'm sure this is going to help a lot of you guys, that's why im posting this here.

I divide this guide into the following steps:

  • Installation of Bootstrap- and Less-extension
  • Configuring Yii and both extensions
  • Additional Controller-Action for force-parsing the less-files
  • Conclusion


...

3. Additional Controller-Action for force-parsing the less-files
Yes, the compiler should notice and auto-compile the less-files if changes occured. But as I am using nested files - at least in my installation - this didn't work as it should. So I created a Debug-Controller with an action named 'less'. The sole purpose of this action is to force-compile all the less files and return to the previous page. That's how it looks like:

Contents of file <approot>/protected/controllers/DebugController.php
<?php

class DebugController extends Controller
{
...
    /**
     * recompile less files
     */
    public function actionLess()
    {
        $less = Yii::app()->less;
        $basePath = str_replace('\'', '/', Yii::getPathOfAlias('webroot') . '/');
        foreach ($less->paths as $from=>$to) {
            $fromPath = $basePath . $from;
            $toPath = $basePath . $to;
            $less->compile($fromPath, $toPath);
        }
        $this->redirect(Yii::app()->request->urlReferrer);
    }
...	
}

So when you now call this action via link you get your stuff recompiled and forwarded to the page you were before. The final css-file is now called style.css and gets compiled into the following folder: <approot>/css/style.css.

...


Could someone please expand on this? The link doesn't work and I'm not sure how to call this action...

Thanks!
0

#29 User is offline   plm 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 13-January 12
  • Location:Switzerland

Posted 20 August 2012 - 10:19 AM

View Postmtzmedia, on 17 August 2012 - 10:35 AM, said:

Could someone please expand on this? The link doesn't work and I'm not sure how to call this action...

Thanks!


Hey mtzmedia

The link is only an example ;)! If you want to get your stuff recompiled call the action via controller (debug) and action (less). So whatever the url to your site is, just put it in front.

if your app is located at http://www.mtzmedia.com, the link to the created action would be http://www.mtzmedia.com/debug/less

got it? ;)
0

#30 User is offline   IslamAmeen 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 11-May 12

Posted 02 October 2012 - 03:50 PM

Less compilers fails to compile latest version of Boostrap (v2.1.1)
I believe the less compilers needs to be updated, they released a new version

 LessCompiler: Failed to compile less file with message: parse error: failed at `@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;` C:/xampp/htdocs/soedu/less/bootstrap/mixins.less on line 253. 

0

#31 User is offline   IslamAmeen 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 11-May 12

Posted 02 October 2012 - 04:05 PM

Well I tried the new version of leafo's lessphp & it still fails to compile v2.1.1 of bootstrap
The error occurs due to this mixen in mixen.less

.box-shadow(@shadowA, @shadowB:X, ...){
  @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
  -webkit-box-shadow: @props;
     -moz-box-shadow: @props;
          box-shadow: @props;
}


you can try it at leafo's demo
0

#32 User is offline   IslamAmeen 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 11-May 12

Posted 05 October 2012 - 03:34 AM

Well it appears it's a known issue
github dot com/leafo/lessphp/issues/315
0

#33 User is offline   Callum Rexter 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 30
  • Joined: 21-January 12
  • Location:Scotland

Posted 06 October 2012 - 03:50 AM

View PostIslamAmeen, on 02 October 2012 - 03:50 PM, said:

Less compilers fails to compile latest version of Boostrap (v2.1.1)
I believe the less compilers needs to be updated, they released a new version

 LessCompiler: Failed to compile less file with message: parse error: failed at `@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;` C:/xampp/htdocs/soedu/less/bootstrap/mixins.less on line 253. 



Apparently this will be removed in the next version - there was a lot of debate about using JavaScript directly in Lees and, for bootstrap anyway, they seem to have decided that it goes against the idea of the 'language'
$DO || ! $DO ; try
try: command not found
0

#34 User is offline   JustinV 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 18
  • Joined: 08-February 12

Posted 27 January 2013 - 08:40 PM

I was previously using the "original" version of this compiler and had it working just as I needed it: Setup my less directory and files, added the files to my components config, and set autoCompile to true whenever I made a change and needed my less compiled into a new css.

With the new version released on Jan 17 I am unable to accomplish these same basic tasks. Can someone point me in the right direction? Just the couple things I'm trying to figure out:

  • How do I get this to compile my less into css?
  • What happened to autoCompile and how to I reproduce the behavior I had before (only compile when I set that to true)


Clearly I have more to learn about the fine points of Yii and these wonderful extensions.
0

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users