Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Compare: Home

Showing with 1 addition and 263 deletions.
  1. +1 −263 Home.textile
View
264 Home.textile
@@ -17,266 +17,4 @@ and you'll get the dotless compiler installed to your PATH and the dotless.Core.
h2. Download binary release
-Just head to our [[downloads page|http://github.com/dotless/dotless/downloads]] and grab the latest package, just copy the files to your project folder.
-
-h1. Using .less
-
-h2. From the command line
-
-The command line tool is dotless.Compiler.exe, and it looks something like this:
-
-```bat
-$ dotless.Compiler source [destination]
-```
-
-The source is the .LESS file you want to compile, and the destination is the (optional) CSS file you want to compile it to. If you don't specify a destination, dotless.Compiler will base it on the source you specified. If the extension of the source file is ".less" you can optionally omit it:
-
-```bat
-$ dotless.Compiler style.less style.css
-$ dotless.Compiler style
-```
-
-Are equivalent.
-
-h2. Watching
-
-dotless.Compiler also comes with an option to watch your .less files for any change, and recompile it automatically:
-
-```bat
-$ dotless.Compiler style.less --watch
-```
-
-Now, whenever you save your file, or any file which it imports, dotless.Compiler will re-compile it. If there are errors, it will ask you to fix them before continuing.
-
-```bat
-Compiling style.less -> style.css [Done]
-Hit Enter to stop watching
-Watching style.less for changes
-Watching import.less for changes
-Found change in 'style.less'. Recompiling...
-Compiling style.less -> style.css [Done]
-```
-
-h2. From code
-
-Add a reference to dotless.Core.dll
-
-```c#
-Less.Parse("div { width: 1 + 1 }");
-```
-
-which will output
-
-```css
-div {
- width: 2;
-}
-```
-
-h1. The language
-
-h2. Variables
-
-These are pretty self-explanatory:
-
-```css
-@nice-blue: #5B83AD;
-@light-blue: @nice-blue + #111;
-
-#header {
- color: @light-blue;
-}
-```
-Outputs:
-
-```css
-#header {
- color: #6c94be;
-}
-```
-
-Note that variables are actually 'constants' in that they can only be defined once.
-
-h2. Mixins
-
-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 mixin:
-
-```css
-.rounded_corners(@radius: 5px) {
- -moz-border-radius: @radius;
- -webkit-border-radius: @radius;
- border-radius: @radius;
-}
-```
-
-And we want to use these properties inside other rule-sets. We just have to specify the name of the mixin where we want the properties to go, passing any parameters, like so:
-
-```css
-#menu a {
- color: #111;
- .rounded_corners;
-}
-
-.post a {
- color: red;
- .rounded_corners(10px);
-}
-```
-
-@#menu@ a will now have rounded corners with a 5px radius and .post a with a 10px radius.
-
-You can also use normal classes like a mixin with no arguments just by using its name (as in @#menu@ a above)
-
-h2. Nested Rules
-
-.LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:
-
-```css
-#header { color: black; }
-#header .navigation {
- font-size: 12px;
-}
-#header .logo {
- width: 300px;
-}
-#header .logo:hover {
- text-decoration: none;
-}
-```
-
-In .LESS, we can also write it this way:
-
-```css
-#header {
- color: black;
-
- .navigation {
- font-size: 12px;
- }
- .logo {
- width: 300px;
- &:hover { text-decoration: none }
- }
-}
-```
-
-The resulting code is more concise, and mimics the structure of your html.
-
-h2. Operators
-
-Any number, color or variable can be operated on. Here are a couple of examples:
-
-```css
-@base: 5%;
-@filler: @base * 2;
-@other: @base + @filler;
-
-@base-color: #888 / 4;
-background-color: @base-color + #111;
-height: 100% / 2 + @filler;
-```
-
-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:
-
-```css
-@var: 1px + 5;
-```
-
-.LESS will use that unit for the final output — 6px in this case.
-
-h2. Functions
-
-.LESS defines some useful functions which are called using the normal CSS function syntax
-
-```css
-#main {
- color: hsl(0, 100%, 50%)
-}
-```
-
-Is compiled to
-
-```css
-#main {
- color: #ff0000;
-}
-```
-
-See the [[function reference]] for a full list of available functions.
-
-h2. Namespaces
-
-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 #bundle, for later re-use, or for distributing:
-
-```css
-#bundle {
- .button {
- display: block;
- border: 1px solid black;
- background-color: grey;
- &:hover { background-color: white }
- }
- .tab { ... }
- .citation { ... }
-}
-```
-
-Now if we want to mixin the .button class in our #header a, we can do:
-
-```css
-#header a {
- color: orange;
- #bundle > .button;
-}
-```
-
-h2. Scope
-
-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 does matter.
-
-```css
-@var: red;
-
-#page {
- @var: white;
- #header {
- color: @var; // white
- }
-}
-```
-
-h2. Comments
-
-Both block and inline comments are authorized:
-
-```css
-#error {
- /* One hell of a comment */
- color: red;
-
- // Get in line!
- background: white;
-}
-```
-
-Inline comments are removed from the output css and by default block comments are kept. So the above would output:
-
-```css
-#error {
- /* One hell of a comment */
- color: red;
- background: white;
-}
-```
-
-h2. Importing
-
-Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. If the file is a .less the extension is optional:
-
-```css
-@import "library";
-@import "import.less";
-@import "typo.css";
-```
-
-If the file is a .css however, the @import statement will not import the contents of the file. It will instead leave the @import statment in the output. This is so the browser can cache the contents of your static css files.
+Just head to our [[downloads page|http://github.com/dotless/dotless/downloads]] and grab the latest package, just copy the files to your project folder.
Something went wrong with that request. Please try again.