Skip to content

Commit 6d5473e

Browse files
lukeapagelukeapage
committed
update readme
1 parent 3d338ce commit 6d5473e

File tree

1 file changed

+2
-302
lines changed

1 file changed

+2
-302
lines changed

‎README.md

Lines changed: 2 additions & 302 deletions
Original file line numberDiff line numberDiff line change
@@ -14,265 +14,16 @@ Options for adding Less.js to your project:
1414
* [Download the latest release][download]
1515
* Clone the repo: `git clone git://github.com/less/less.js.git`
1616

17-
18-
19-
## Feature Highlights
20-
LESS extends CSS with dynamic features such as:
21-
22-
* [nesting](#nesting)
23-
* [variables](#variables)
24-
* [operations](#operations)
25-
* [mixins](#mixins)
26-
* [extend](#extend) (selector inheritance)
27-
28-
To learn about the many other features Less.js has to offer please visit [http://lesscss.org](http://lesscss.org) and [the Less.js wiki][wiki]
29-
30-
31-
### Examples
32-
#### nesting
33-
Take advantage of nesting to make code more readable and maintainable. This:
34-
35-
```less
36-
.nav > li > a {
37-
border: 1px solid #f5f5f5;
38-
&:hover {
39-
border-color: #ddd;
40-
}
41-
}
42-
```
43-
44-
renders to:
45-
46-
```css
47-
.nav > li > a {
48-
border: 1px solid #f5f5f5;
49-
}
50-
.nav > li > a:hover {
51-
border-color: #ddd;
52-
}
53-
```
54-
55-
56-
#### variables
57-
Updated commonly used values from a single location.
58-
59-
```less
60-
// Variables ("inline" comments like this can be used)
61-
@link-color: #428bca; // appears as "sea blue"
62-
63-
/* Or "block comments" that span
64-
multiple lines, like this */
65-
a {
66-
color: @link-color; // use the variable in styles
67-
}
68-
```
69-
70-
Variables can also be used in `@import` statements, URLs, selector names, and more.
71-
72-
73-
74-
#### operations
75-
Continuing with the same example above, we can use our variables even easier to maintain with _operations_, which enables the use of addition, subraction, multiplication and division in your styles:
76-
77-
```less
78-
// Variables
79-
@link-color: #428bca;
80-
@link-color-hover: darken(@link-color, 10%);
81-
82-
// Styles
83-
a {
84-
color: @link-color;
85-
}
86-
a:hover {
87-
color: @link-color-hover;
88-
}
89-
```
90-
renders to:
91-
92-
```css
93-
a {
94-
color: #428bca;
95-
}
96-
a:hover {
97-
color: #3071a9;
98-
}
99-
```
100-
101-
#### mixins
102-
##### "implicit" mixins
103-
Mixins enable you to apply the styles of one selector inside another selector like this:
104-
105-
```less
106-
// Variables
107-
@link-color: #428bca;
108-
109-
// Any "regular" class...
110-
.link {
111-
color: @link-color;
112-
}
113-
a {
114-
font-weight: bold;
115-
.link; // ...can be used as an "implicit" mixin
116-
}
117-
```
118-
119-
renders to:
120-
121-
```css
122-
.link {
123-
color: #428bca;
124-
}
125-
a {
126-
font-weight: bold;
127-
color: #428bca;
128-
}
129-
```
130-
131-
So any selector can be an "implicit mixin". We'll show you a DRYer way to do this below.
132-
133-
134-
135-
##### parametric mixins
136-
Mixins can also accept parameters:
137-
138-
```less
139-
// Transition mixin
140-
.transition(@transition) {
141-
-webkit-transition: @transition;
142-
-moz-transition: @transition;
143-
-o-transition: @transition;
144-
transition: @transition;
145-
}
146-
```
147-
148-
used like this:
149-
150-
```less
151-
// Variables
152-
@link-color: #428bca;
153-
@link-color-hover: darken(@link-color, 10%);
154-
155-
//Transition mixin would be anywhere here
156-
157-
a {
158-
font-weight: bold;
159-
color: @link-color;
160-
.transition(color .2s ease-in-out);
161-
// Hover state
162-
&:hover {
163-
color: @link-color-hover;
164-
}
165-
}
166-
```
167-
168-
renders to:
169-
170-
```css
171-
a {
172-
font-weight: bold;
173-
color: #428bca;
174-
-webkit-transition: color 0.2s ease-in-out;
175-
-moz-transition: color 0.2s ease-in-out;
176-
-o-transition: color 0.2s ease-in-out;
177-
transition: color 0.2s ease-in-out;
178-
}
179-
a:hover {
180-
color: #3071a9;
181-
}
182-
```
183-
184-
185-
#### extend
186-
The `extend` feature can be thought of as the _inverse_ of mixins. It accomplishes the goal of "borrowing styles", but rather than copying all the rules of _Selector A_ over to _Selector B_, `extend` copies the name of the _inheriting selector_ (_Selector B_) over to the _extending selector_ (_Selector A_). So continuing with the example used for [mixins](#mixins) above, extend works like this:
187-
188-
```less
189-
// Variables
190-
@link-color: #428bca;
191-
192-
.link {
193-
color: @link-color;
194-
}
195-
a:extend(.link) {
196-
font-weight: bold;
197-
}
198-
// Can also be written as
199-
a {
200-
&:extend(.link);
201-
font-weight: bold;
202-
}
203-
```
204-
205-
renders to:
206-
207-
```css
208-
.link, a {
209-
color: #428bca;
210-
}
211-
a {
212-
font-weight: bold;
213-
}
214-
```
215-
216-
## Usage
217-
218-
### Compiling and Parsing
219-
Invoke the compiler from node:
220-
221-
```javascript
222-
var less = require('less');
223-
224-
less.render('.class { width: (1 + 1) }', function (e, css) {
225-
console.log(css);
226-
});
227-
```
228-
229-
Outputs:
230-
231-
```css
232-
.class {
233-
width: 2;
234-
}
235-
```
236-
237-
You may also manually invoke the parser and compiler:
238-
239-
```javascript
240-
var parser = new(less.Parser);
241-
242-
parser.parse('.class { width: (1 + 1) }', function (err, tree) {
243-
if (err) { return console.error(err) }
244-
console.log(tree.toCSS());
245-
});
246-
```
247-
248-
249-
### Configuration
250-
You may also pass options to the compiler:
251-
252-
```javascript
253-
var parser = new(less.Parser)({
254-
paths: ['.', './src/less'], // Specify search paths for @import directives
255-
filename: 'style.less' // Specify a filename, for better error messages
256-
});
257-
258-
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
259-
tree.toCSS({ compress: true }); // Minify CSS output
260-
});
261-
```
262-
26317
## More information
26418

265-
For general information on the language, configuration options or usage visit [lesscss.org](http://lesscss.org) or [the less wiki][wiki].
19+
For general information on the language, configuration options or usage visit [lesscss.org](http://lesscss.org).
26620

26721
Here are other resources for using Less.js:
26822

26923
* [stackoverflow.com][so] is a great place to get answers about Less.
270-
* [node.js tools](https://github.com/less/less.js/wiki/Converting-LESS-to-CSS) for converting Less to CSS
271-
* [GUI compilers for Less](https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js)
27224
* [Less.js Issues][issues] for reporting bugs
27325

27426

275-
27627
## Contributing
27728
Please read [CONTRIBUTING.md](./CONTRIBUTING.md). Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).
27829

@@ -284,57 +35,7 @@ Please report documentation issues in [the documentation project](https://github
28435

28536
### Development
28637

287-
#### Install Less.js
288-
289-
Start by either [downloading this project][download] manually, or in the command line:
290-
291-
```shell
292-
git clone https://github.com/less/less.js.git "less"
293-
```
294-
and then `cd less`.
295-
296-
297-
#### Install dependencies
298-
299-
To install all the dependencies for less development, run:
300-
301-
```shell
302-
npm install
303-
```
304-
305-
If you haven't run grunt before, install grunt-cli globally so you can just run `grunt`
306-
307-
```shell
308-
npm install grunt-cli -g
309-
```
310-
311-
You should now be able to build Less.js, run tests, benchmarking, and other tasks listed in the Gruntfile.
312-
313-
## Using Less.js Grunt
314-
315-
Tests, benchmarking and building is done using Grunt `~0.4.1`. If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to install and use Grunt plugins, which are necessary for development with Less.js.
316-
317-
The Less.js [Gruntfile](Gruntfile.js) is configured with the following "convenience tasks" :
318-
319-
#### test - `grunt`
320-
Runs jshint, nodeunit and headless jasmine tests using [phantomjs](http://code.google.com/p/phantomjs/). You must have phantomjs installed for the jasmine tests to run.
321-
322-
#### test - `grunt benchmark`
323-
Runs the benchmark suite.
324-
325-
#### build for testing browser - 'grunt browser'
326-
This builds less.js and puts it in 'test/browser/less.js'
327-
328-
#### build - `grunt stable | grunt beta | grunt alpha`
329-
Builds Less.js from from the `/lib/less` source files. This is done by the developer releasing a new release, do not do this if you are creating a pull request.
330-
331-
#### readme - `grunt readme`
332-
Build the README file from [a template](build/README.md) to ensure that metadata is up-to-date and (more likely to be) correct.
333-
334-
Please review the [Gruntfile](Gruntfile.js) to become acquainted with the other available tasks.
335-
336-
**Please note** that if you have any issues installing dependencies or running any of the Gruntfile commands, please make sure to uninstall any previous versions, both in the local node_modules directory, and clear your global npm cache, and then try running `npm install` again. After that if you still have issues, please let us know about it so we can help.
337-
38+
Read [Developing Less](http://lesscss.org/usage/#developing-less).
33839

33940
## Release History
34041
See the [changelog](CHANGELOG.md)
@@ -347,5 +48,4 @@ Licensed under the [Apache License](LICENSE).
34748

34849
[so]: http://stackoverflow.com/questions/tagged/twitter-bootstrap+less "StackOverflow.com"
34950
[issues]: https://github.com/less/less.js/issues "GitHub Issues for Less.js"
350-
[wiki]: https://github.com/less/less.js/wiki "The official wiki for Less.js"
35151
[download]: https://github.com/less/less.js/zipball/master "Download Less.js"

0 commit comments

Comments
 (0)