Initial commit

## Example files for the title:  

# Writing CSS with {LESS}, by Walter Wimberly

[![Writing CSS with {LESS}, by Walter Wimberly](http://akamaicovers.oreilly.com/images/9781771371704/cat.gif)](https://www.safaribooksonline.com/library/view/title/9781771371704//)

The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.

O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.

If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.

Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.

<!DOCTYPE HTML>

<html>

<head>

	<meta charset="utf-8">

	<title>Overvew of {LESS}</title>

	<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

	<div id="container">

		<div id="header">

			<p class="title">Introduction to {LESS}</p>

			<ul class="navigation">

				<li class="first"><a href="index.html">Overview</a></li>

				<li><a href="variables.html">Variables</a></li>

				<li><a href="nesting.html">Nesting</a></li>

				<li class="last"><a href="functions.html">Functions</a></li>

			</ul>

		</div>

		<div id="content">

			<h1>Overview of {LESS}</h1>

			<p><strong>{less} </strong>is a dynamic stylesheet language originally designed by Alexis Sellier. It was designed to make working with complex CSS files easier and faster by working as a preprocessor.</p>

			<div class="know">

				<h1>How is it Generated?</h1>

				<p>{less} can be generated at run time, run from the server, or compiled into a CSS document.</p>

			</div>

			<p>{less} allows a develop to use several methodologies to simplify the design process. These include: </p>

			<ul>

				<li><strong>variables</strong>, </li>

				<li><strong>mixens</strong>, </li>

				<li><strong>functions</strong>, </li>

				<li>and <strong>operations</strong>.</li>

			</ul>

<p>You will find working with {less} to be similar to working with CSS at first, as that syntax is still valid. However, you will also find that as you start using some of the cool {less} features, you will start being able to do more and more with {less} and making your designs even easier.</p>

		</div>

		<div id="footer">

			<p>Demo site created for Infinite Skills</p>

		</div>

	</div>

</body>

</html>

 No newline at end of file

body {

	font-family: Tahoma, Arial, sans-serif;

	font-size: 16px;

}

#container {

	margin: auto;

	width: 80%;

	max-width: 1050px;

	min-width: 350px;

}

#header {

	background-color: #3586d8;

	border-top-right-radius: 10px;

	border-top-left-radius: 10px;

	margin: 0;

}

	.title {

		font-size: 2rem;

		font-weight: bold;

		color: #FFF;

		margin: 10px 1rem;

		padding-top: 1rem;

		text-shadow: #000 1px 2px;

	}

.navigation {

	background: #143352;

	height: 32px;

	padding: 5px 0;

	margin: 0;

	border-bottom: 2px solid #000;

}

.navigation li {

	display: inline-block;

	float: left;

	margin: 5px;

	list-style: url(none) none outside;

	font-size: 1.1rem;

}

.navigation li .first {

	margin-left: 1rem;

}

	.navigation li a, .navigation li a:visited {

		padding: 5px;

		decoration: none;

		text-decoration: none;

		color: #FFF;

		font-weight: bold;

		border-radius: 10px;

	}

	.navigation li a:hover {

		color: #111;

		background-color: #CCC;

	}

#content {

	clear: both;

	margin: 0;

	padding: 0;

	min-height: 350px;

}

	#content h1 {

		background-color: #143352;

		color: #FFF;

	}

	#content h1, #content h2, #content p {

		padding-left: 1rem;

	}

	#content ul {

		margin-left: 3rem;

	}

	#content h2 {

		border-bottom: 3px #143352 solid;

		color: #143352;

	}

	.know {

		width: 35%;

		float: right;

		border: 1px solid #143352;

		border-radius: 10px;

		margin: 0 10px 10px 10px;

	}

		.know h1 {

			background-color: #143352;

			color: #FFF;

			margin-top: 0;

			font-size: 1.6rem;

			border-top-right-radius: 9px;

			border-top-left-radius: 9px;

		}

	pre {

		padding: 2rem;

		background-color: #ddd;

		font-family:"Lucida Console", Monaco, monospace;

		border-radius: 10px;

		clear: both;

	}

#footer {

	clear: both;

	border-top: 1px solid #143352;

}

	#footer p {

		font-size: .8rem;

	}

<!DOCTYPE HTML>

<html>

<head>

	<meta charset="utf-8">

	<title>Overview of {LESS}</title>

	<link rel="stylesheet/less" type="text/css" href="styles.less">

	<script type="text/javascript" src="less.js"></script>

</head>

<body>

	<div id="container">

		<div id="header">

			<p class="title">Introduction to {LESS}</p>

			<ul class="navigation">

				<li class="first"><a href="index.html">Overview</a></li>

				<li><a href="variables.html">Variables</a></li>

				<li><a href="nesting.html">Nesting</a></li>

				<li class="last"><a href="functions.html">Functions</a></li>

			</ul>

		</div>

		<div id="content">

			<h1>Overview of {LESS}</h1>

			<p><strong>{less} </strong>is a dynamic stylesheet language originally designed by Alexis Sellier. It was designed to make working with complex CSS files easier and faster by working as a preprocessor.</p>

			<div class="know">

				<h1>How is it Generated?</h1>

				<p>{less} can be generated at run time, run from the server, or compiled into a CSS document.</p>

			</div>

			<p>{less} allows a develop to use several methodologies to simplify the design process. These include: </p>

			<ul>

				<li><strong>variables</strong>, </li>

				<li><strong>mixens</strong>, </li>

				<li><strong>functions</strong>, </li>

				<li>and <strong>operations</strong>.</li>

			</ul>

<p>You will find working with {less} to be similar to working with CSS at first, as that syntax is still valid. However, you will also find that as you start using some of the cool {less} features, you will start being able to do more and more with {less} and making your designs even easier.</p>

		</div>

		<div id="footer">

			<p>Demo site created for Infinite Skills</p>

		</div>

	</div>

</body>

</html>

 No newline at end of file