Permalink
Browse files

v1.1.3 & some cleanup

  • Loading branch information...
cloudhead committed May 27, 2011
1 parent be92699 commit be4b2e012e2955ae7281d4d0ac4b54dfa580f962
@@ -1,33 +0,0 @@
-<div id="sub_header_wrapper">
- <div id="sub_header">
- <h1>About LESS</h1>
- </div>
-</div>
-<div id="container">
-
- <div id="content" class="about_content">
- <h2>Why LESS?</h2>
- <p>LESS was inspired by its predecessors—especially <a href="http://www.sass-lang.com">Sass</a>, a ruby project which provides an ingenious solution to a lot of the common problems CSS designers and web developers face when developping large websites.
-
- <p>So why make an alternative to Sass? It's simple: <strong>syntax</strong>. One of the key features of Sass is its indentation-based syntax, which gives you curly-brace and semi-column free code. But the cost of this is having to learn a new syntax and having to rebuild your current stylesheets.</p> <p>LESS <em>embraces</em> CSS, and any additional functionality it comes with, is integrated in such a way as to make it as seamless as possible. Thus, you can gradually move your CSS to LESS, or if you're only interesting in using variables, or operations, you aren't forced to learning a whole new language.</p><br />
- <h2>Who are we?</h2><br />
- <h3>Alexis Sellier</h3><br />
- <div style="overflow: auto; margin-bottom: 30px;">
- <img src="http://www.gravatar.com/avatar/1f9b35d45523be9e74151de0caa212c0.jpg" class="avatar" alt="" />
- <ul class="about_me">
- <li>Is also known as <code>cloudhead</code></li>
- <li>Created and programmed <span>LESS</span></li>
- <li>Likes to be contacted through <a href="http://twitter.com/cloudhead">Twitter</a> or by email: <code>self at cloudhead dot net</code></li>
- </ul>
- </div>
-
- <h3>Dmitry Fadeyev</h3><br />
- <img src="http://www.gravatar.com/avatar/719456ed638ef07b88e4d3ead822afc5.jpg" class="avatar" alt="" />
- <ul class="about_me">
- <li>Created this website, and helps with the language design</li>
- <li>Can be contacted through <a href="http://twitter.com/usabilitypost">Twitter</a> or via email, <code>dmitry at usabilitypost dot com</code></li>
- <li>Runs <a href="http://www.usabilitypost.com">UsabilityPost</a>, a blog about good design, user experience and usability.</li>
- <li>Working on <a href="http://itsworkable.com">Workable</a>, a web-based task management and collaboration app.</li>
- </ul>
- <br /><br />
- </div>
@@ -1,20 +0,0 @@
-<article class="post">
- <header>
- <h1><%= title %></h1>
- <span class="date"><%= date %></span>
- </header>
-
- <section class="content">
- <%= body %>
- </section>
-
- <section class="comments">
- <% if @config[:disqus] %>
- <div id="disqus_thread"></div>
- <script type="text/javascript" src="http://disqus.com/forums/<%= @config[:disqus] %>/embed.js"> </script>
- <noscript><a href="http://<%= @config[:disqus] %>.disqus.com/?url=ref">View the discussion thread.</a></noscript>
- <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
- <% end %>
- </section>
-</article>
-
No changes.
View
@@ -1,250 +0,0 @@
- <div id="sub_header_wrapper">
- <div id="sub_header">
- <h1>LESS Documentation</h1>
- </div>
- </div>
- <div id="container">
- <div id="content" class="docs_content">
- <h2>Installation</h2>
-
-<p>LESS is an extension of CSS. You can write LESS code just like you would write CSS, except you need to compile it to CSS. That's what the <strong>gem</strong> is for.
-If you are on <strong>Mac OS X</strong>, you can install the gem by typing the following command in the terminal:</p>
-
-<pre><code>$ sudo gem install less
-</code></pre>
-
-<p>On <strong>Windows</strong> or <strong>Linux</strong>, make sure you have <code>ruby</code> and <code>ruby-gems</code> installed first.
-If you need help installing <code>ruby</code> please check out <a href="http://ruby-lang.org">ruby-lang.org</a> for more details.</p>
-<br />
-<h2>Using the gem</h2>
-
-<h3>From the command-line</h3>
-
-<p>The command line tool is called <code>lessc</code>, and it looks something like this:</p>
-
-<pre><code>$ lessc source [destination]
-</code></pre>
-
-<p>The <code>source</code> is the LESS file you want to compile, and the <code>destination</code> is the (optional) CSS file you want to compile it to. If you don't specify a destination, <code>lessc</code> will base it on the source you specified:</p>
-
-<pre><code>$ lessc style.less style.css
-$ lessc style.less
-</code></pre>
-
-<p>Are equivalent.</p>
-
-<h4>Watching</h4>
-
-<p><code>lessc</code> also comes with an option to watch your <code>.less</code> file for any change, and recompile it automatically:</p>
-
-<pre><code>$ lessc style.less --watch
-</code></pre>
-
-<p>Now, whenever you save your file, <code>lessc</code> will try to compile it. If there are errors, it will ask you to fix them before continuing.</p>
-
-<pre><code>* Watching for changes in style.less... Ctrl-C to abort.
-: Change detected... * [Updated] style.css
-:
-</code></pre>
-
-<p>You can think of <code>:</code> as a pair of eyes watching your file.</p>
-
-<h3>From Ruby</h3>
-
-<pre><code>require 'less'
-Less.parse "div { width: 1 + 1 }"
-</code></pre>
-
-<p>which will output</p>
-
-<pre><code>div { width: 2; }
-</code></pre>
-
-<p>Here are a couple of other ways to invoke the compiler:</p>
-
-<pre><code>Less::Engine.new("a { color: blue }").to_css
-Less::Engine.new(File.new("style.less")).to_css
-
-less = Less::Engine.new(".post { color: blue }").to_tree
-less[".post"].properties # =&gt; [color: `blue`]
-</code></pre>
-<br /><br />
-<h2>The Language</h2>
-
-<p>As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use <em>existing</em> CSS syntax. This makes learning LESS a <em>breeze</em>, and if in doubt, lets you fall back to CSS.</p>
-
-<h3>Variables</h3>
-
-<p>These are pretty self-explanatory:</p>
-
-<pre><code>@nice-blue: #5B83AD;
-@light-blue: @nice-blue + #111;
-
-#header { color: @light-blue; }
-</code></pre>
-
-<p>Outputs:</p>
-
-<pre><code>#header { color: #6c94be; }
-</code></pre>
-
-<p>Note that variables are actually 'constants' in that they can only be defined once.</p>
-
-<h3>Mixins</h3>
-
-<p>Mixins are a way of including ('mixing in') a bunch of properties from one rule-set into another rule-set. So say we have the following class:</p>
-
-<pre><code>.bordered {
- border-top: dotted 1px black;
- border-bottom: solid 2px black;
-}
-</code></pre>
-
-<p>And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:</p>
-
-<pre><code>#menu a {
- color: #111;
- .bordered;
-}
-
-.post a {
- color: red;
- .bordered;
-}
-</code></pre>
-
-<p>The properties of the <code>.bordered</code> class will now appear in both <code>#menu a</code> and <code>.post a</code>. (Note that you can also use <code>#id</code>s as mixins)</p>
-
-<h3>Nested rules</h3>
-
-<p>LESS gives you the ability to use <em>nesting</em> instead of, or in combination with cascading. Lets say we have the following CSS:</p>
-
-<pre><code>#header { color: black; }
-#header .navigation {
- font-size: 12px;
-}
-#header .logo {
- width: 300px;
-}
-#header .logo:hover {
- text-decoration: none;
-}
-</code></pre>
-
-<p>In LESS, we can also write it this way:</p>
-
-<pre><code>#header {
- color: black;
-
- .navigation {
- font-size: 12px;
- }
- .logo {
- width: 300px;
- :hover { text-decoration: none }
- }
-}
-</code></pre>
-
-<p>The resulting code is more concise, and mimics the structure of your <code>html</code>.</p>
-
-<h3>Operations</h3>
-
-<p>Any number, color or variable can be operated on. Here are a couple of examples:</p>
-
-<pre><code>@base: 5%;
-@filler: @base * 2;
-@other: @base + @filler;
-
-color: #888 / 4;
-background-color: @base-color + #111;
-height: 100% / 2 + @filler;
-</code></pre>
-
-<p>The output is pretty much what you expect—LESS understands the difference between colors and units. If a unit is used in an operation, like in:</p>
-
-<pre><code>@var: 1px + 5;
-</code></pre>
-
-<p>LESS will use that unit for the final output—<code>6px</code> in this case.</p>
-
-<h3>Namespaces &amp; Accessors</h3>
-
-<p>Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in LESS—say you want to bundle some mixins and variables under <code>#bundle</code>, for later re-use, or for distributing:</p>
-
-<pre><code>#bundle {
- .button {
- display: block;
- border: 1px solid black;
- background-color: grey;
- :hover { background-color: white }
- }
- .tab { ... }
- .citation { ... }
-}
-</code></pre>
-
-<p>Now if we want to mixin the <code>.button</code> class in our <code>#header a</code>, we can do:</p>
-
-<pre><code>#header a {
- color: orange;
- #bundle &gt; .button;
-}
-</code></pre>
-
-<p>LESS also allows you to access specific properties or variables from different rule-sets:</p>
-
-<pre><code>#defaults {
- @width: 960px;
- @color: black;
-}
-
-.article { color: #294366; }
-
-.comment {
- width: #defaults[@width];
- color: .article['color'];
-}
-</code></pre>
-
-<p>Variables and accessors can be used almost interchangeably, use whichever is best suited for the situation—accessors might make more sense if that property only needs to be accessed once.</p>
-
-<h3>Scope</h3>
-
-<p>Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on. Note that the order of declaration <em>does</em> matter.</p>
-
-<pre><code>@var: red;
-
-#page {
- @var: white;
- #header {
- color: @var; // white
- }
-}
-</code></pre>
-
-<h3>Comments</h3>
-
-<p>Both C-style and inline comments are authorized:</p>
-
-<pre><code>/* One hell of a comment */
-@var: red;
-
-// Get in line!
-@var: white;
-</code></pre>
-
-<h3>Importing</h3>
-
-<p>Importing works pretty much as expected. You can import a <code>.less</code> file, and all the variables in it will be available. If the file is a <code>.less</code>, the extension is optional:</p>
-
-<pre><code>@import "library";
-@import "typo.css";
-</code></pre>
-
-<h3>That's it!</h3>
-
-<p>LESS is a pretty concise language! For more information, you can drop me an email (contact info in the <a href="/about">about section</a>)</p>
-
-
- </div>
@@ -8,8 +8,8 @@
<span>operations</span> and <span>functions</span>. LESS runs on both the <span>client-side</span> (IE 6+, Webkit, Firefox) and
server-side, with <span>Node.js</span>.
</h3>
- <a id="download" href="http://lesscss.googlecode.com/files/less-1.1.0.min.js">
- <img src="/images/download-button.png" /></a><div id="download-info">version <code>1.1.0</code></div>
+ <a id="download" href="http://lesscss.googlecode.com/files/less-1.1.3.min.js">
+ <img src="/images/download-button.png" /></a><div id="download-info">version <code>1.1.3</code></div>
</section>
<section id="example">

0 comments on commit be4b2e0

Please sign in to comment.