Heredoc is a way of building strings for output. Funnily enough I found there was a mistake in some of the coding on the Wikipedia page, but I won't hold that against them. Also, in some of the examples I've come across on the web, they don't seem to recognise an important feature of heredoc. That is, it also provides HTML output.
Below is some example PHP code with the correct syntax, use of variables and HTML. That should speed things up a bit.
<?php
$recipient = 'Mick';
$sender = 'Johnnie';
$x = <<<EOF
Dear $recipient,
I wish you to leave Sunnydale and never return.<br />
Not Quite Love,
$sender
EOF;
echo $x;
?>
Showing posts with label variables. Show all posts
Showing posts with label variables. Show all posts
Thursday, 1 August 2013
Friday, 21 January 2011
No I'm not going to title this post less is more
I have started to use less. No, I'm not completely useless. Less from lesscss.org "extends CSS with dynamic behavior such asvariables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js."
So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js"></script>
</head>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
Subscribe to:
Posts (Atom)