Permalink
Browse files

(loosly) update docs according to the new old guidelines

  • Loading branch information...
seven-phases-max committed Jun 1, 2017
1 parent 72e1206 commit 4c17dad7e0bbae88df67d4fe9b36745765823af5
View
@@ -1,7 +1,7 @@
/*
* lesscss.org <https://github.com/less/less-docs>
*
* Copyright (c) 2014, Alexis Sellier, LESS Core Team, contributors.
* Copyright (c) 2017, Alexis Sellier, Less Core Team, contributors.
* Licensed under the MIT license.
*/
View
@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2014 Alexis Sellier, the LESS Core Team, Contributors.
Copyright (c) 2017 Alexis Sellier, the Less Core Team, Contributors.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
View
@@ -127,7 +127,7 @@ node data/utils/pkg && grunt
```
## License
Copyright (c) 2016, Alexis Sellier, LESS Core Team, Contributors
Copyright (c) 2017, Alexis Sellier, Less Core Team, Contributors
Documentation released under [Creative Commons](./LICENSE-CC).
Documentation source code released under the [MIT License](./LICENSE-MIT).
Less.js source code is released under the [Apache 2 License](https://github.com/less/less.js/blob/master/LICENSE).
Less source code is released under the [Apache 2 License](https://github.com/less/less.js/blob/master/LICENSE).
View
@@ -1,6 +1,6 @@
# lesscss.org
> Official website and documentation for LESS/Less.js
> Official website and documentation for Less/Less.js
### [Visit the website](http://lesscss.org)
@@ -10,4 +10,4 @@ title: Learn More
### Videos
* [Learning LESS](https://www.packtpub.com/web-development/learning-less-video), by Anthony Killeen
* [Learning Less](https://www.packtpub.com/web-development/learning-less-video), by Anthony Killeen
@@ -57,7 +57,7 @@ html.lt-ie9 header {
}
```
A ruleset can be now assigned to a variable or passed in to a mixin and can contain the full set of less features, e.g.
A ruleset can be now assigned to a variable or passed in to a mixin and can contain the full set of Less features, e.g.
```less
@my-ruleset: {
@@ -325,7 +325,7 @@ and extend with variable in target selector matches nothing:
@variable: .bucket;
```
Both of the previous examples compile into:
Both of the above examples compile into:
```less
.bucket {
@@ -343,7 +343,7 @@ However, `:extend` attached to an interpolated selector works:
@variable: .selector;
```
previous less compiles into:
compiles to:
```less
.bucket, .selector {
@@ -520,7 +520,7 @@ or have simplified html and use extend in your less. e.g.
#### Reducing CSS Size
Mixins copy all of the properties into a selector, which can lead to unnecessary duplication. Therefore you can use extends instead of mixins to move the selector up to the properties you wish to use, which leads to less css being generated.
Mixins copy all of the properties into a selector, which can lead to unnecessary duplication. Therefore you can use extends instead of mixins to move the selector up to the properties you wish to use, which leads to less CSS being generated.
Example - with mixin:
@@ -1,6 +1,6 @@
> Import styles from other style sheets
In standard CSS, `@import` at-rules must precede all other types of rules. But Less.js doesn't care where you put `@import` statements.
In standard CSS, `@import` at-rules must precede all other types of rules. But Less doesn't care where you put `@import` statements.
Example:
@@ -23,7 +23,7 @@ Examples:
```less
@import "foo"; // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php"; // foo.php imported as a less file
@import "foo.php"; // foo.php imported as a Less file
@import "foo.css"; // statement left in place, as-is
```
@@ -1,6 +1,6 @@
#### [Download Source Code]({{ less.sourcearchive }}{{ less.version }}.zip)
Get the latest Less.js source code by downloading it directly from GitHub.
Get the latest Less source code by downloading it directly from GitHub.
#### [Clone or Fork via GitHub]({{ less.repository.url }})
@@ -10,7 +10,7 @@ Fork the project and send us a pull request!
#### [Install with Bower](http://bower.io)
Install the Less.js project and JavaScript by running the following in the command line:
Install less.js script by running the following in the command line:
```bash
bower install less
@@ -4,7 +4,7 @@ title: Getting Started
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.
Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with less is our [online editor](http://lesscss.org/less-preview/).
Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with Less is our [online editor](http://lesscss.org/less-preview/).
For example:
@@ -79,7 +79,7 @@ See [Usage]({{resolve 'usage'}}) for more information.
See the [Usage]({{resolve 'usage'}}) section for details of other tools.
<!-- # Command-line with Rhino
> Each less.js release contains also rhino-compatible version.
> Each Less release contains also rhino-compatible version.
Command line rhino version requires two files:
* less-rhino-&lt;version&gt;.js - compiler implementation,
@@ -2,12 +2,12 @@
title: Browser Support
---
Less only supports running on modern browsers (recent versions of Chrome, Firefox, Safari and IE). While it is possible to use LESS on the client side in production, please be aware that there are performance implications for doing so (although the latest releases of LESS are quite a bit faster). Also, sometimes cosmetic issues can occur if a JavaScript error occurs. This is a trade off of flexibility vs. speed. For the fastest performance possible for a static web site, we recommend compiling LESS on the server side.
Less only supports running on modern browsers (recent versions of Chrome, Firefox, Safari and IE). While it is possible to use Less on the client side in production, please be aware that there are performance implications for doing so (although the latest releases of Less are quite a bit faster). Also, sometimes cosmetic issues can occur if a JavaScript error occurs. This is a trade off of flexibility vs. speed. For the fastest performance possible for a static web site, we recommend compiling Less on the server side.
Note that PhantomJS does not currently implement `Function.prototype.bind` so you will require a es-5 shim for this function to run under PhantomJS (We use PhantomJS for tests and we append an es5-shim to make it work).
There are reasons to use client-side less in production, such as if you want to allow users to tweak variables which will affect the theme and you want to show it to them in real-time - in this instance a user is not worried about waiting for a style to update before seeing it.
There are reasons to use client-side script in production, such as if you want to allow users to tweak variables which will affect the theme and you want to show it to them in real-time - in this instance a user is not worried about waiting for a style to update before seeing it.
If you need to run less in an older browser, please use an [es-5 shim](https://github.com/kriskowal/es5-shim) which will add the javascript features that less requires.
If you need to run less.js in an older browser, please use an [es-5 shim](https://github.com/kriskowal/es5-shim) which will add the javascript features that less.js requires.
In addition, if you use options as attributes on the script or link tags, you will require browser support for `JSON.parse` or an appropriate polyfill.
@@ -173,7 +173,7 @@ Compress using built-in compression.
```bash
less --clean-css
```
In v2 of less, Clean CSS is no longer included as a direct dependency. To use clean css with lessc, use the [clean css plugin](https://github.com/less/less-plugin-clean-css).
In v2 of less, Clean CSS is no longer included as a direct dependency. To use `clean-css` with `lessc`, use the [`clean-css` plugin](https://github.com/less/less-plugin-clean-css).
#### Source Map Output Filename
@@ -182,7 +182,7 @@ lessc --source-map
lessc --source-map=file.map
```
Tells less to generate a sourcemap. If you have the sourcemap option without a filename it will use the source less file name but with the extension map.
Tells Less to generate a sourcemap. If you have the sourcemap option without a filename it will use the source Less file name but with the extension map.
#### Source Map Rootpath
@@ -245,7 +245,7 @@ lessc -rp=resources/
lessc --rootpath=resources/
```
Allows you to add a path to every generated import and url in your css. This does not affect less import statements that are processed, just ones that are left in the output css.
Allows you to add a path to every generated import and url in your css. This does not affect Less import statements that are processed, just ones that are left in the output css.
For instance, if all the images the css use are in a folder called resources, you can use this option to add this on to the URL's and then have the name of that folder configurable.
@@ -17,13 +17,13 @@ make sure the paths are setup. If you start your favourite command line and type
## Usage
If you go to the root of the less repository you should be able to do `grunt test` - this should run all the tests. For the browser specific only, run `grunt browsertest` If you want to try out the current version of less against a file, from here do `node bin/lessc path/to/file.less`
If you go to the root of the Less repository you should be able to do `grunt test` - this should run all the tests. For the browser specific only, run `grunt browsertest` If you want to try out the current version of less against a file, from here do `node bin/lessc path/to/file.less`
To debug the browser tests, run `grunt browsertest-server` then go to http://localhost:8088/tmp/browser/ to see the test runner pages.
Optional: To get the current version of the less compiler do `npm -g install less` - npm is the node package manager and "-g" installs it to be available globally.
Optional: To get the current version of the Less compiler do `npm -g install less` - npm is the node package manager and "-g" installs it to be available globally.
You should now be able to do `lessc file.less` and if there is an appropriate file.less then it will be compiled and output to the stdout. You can then compare it to running locally (`node bin/lessc file.less`).
You should now be able to do `lessc file.less` and if there is an appropriate `file.less` then it will be compiled and output to the stdout. You can then compare it to running locally (`node bin/lessc file.less`).
Other grunt commands
@@ -33,7 +33,7 @@ Other grunt commands
## How to Run Less in Other Environments
If you look in the libs folder you will see `less`, `less-node`, `less-browser`. The less folder is pure javascript with no environment
If you look in the libs folder you will see `less`, `less-node`, `less-browser`. The `less` folder is pure javascript with no environment
specifics. if you require `less/libs/less`, you get a function that takes an environment object and an array of file managers. The file
managers are the same file managers that can also be written as a plugin.
@@ -2,7 +2,7 @@
title: Editors and Plugins
---
Also see: [GUIs for Less.js](#guis-for-less)
Also see: [GUIs for Less](#guis-for-less)
## Editors and IDEs
@@ -52,7 +52,7 @@ notes: Entreaty for contributors. Please filter out all purely advertising and n
| [homeless](https://github.com/pixelass/homeless) | Mixin library |
| [LESS Elements](http://lesselements.com/) | Set of mixins |
| [LESS Hat](http://lesshat.com/) | Mixins library |
| [lessley](https://github.com/pixelass/lessley) | A jasmine like testing suite written in pure less |
| [lessley](https://github.com/pixelass/lessley) | A jasmine like testing suite written in pure Less |
| [Lessmore](https://github.com/belyan/lessmore) | Mixins library. Cross-browser support for the CSS3 features and more |
| [LESS-bidi](https://github.com/danielkatz/less-bidi) | Set of mixins for creating bi-directional styling |
| [LESS-Mix](http://denysdovhan.github.io/LESS-Mix/) | Mixins library |
@@ -61,7 +61,7 @@ notes: Entreaty for contributors. Please filter out all purely advertising and n
| [more-less](https://github.com/roelvanhintum/More-Less) | Mixin lib supporting Less 1.7 |
| [More.less](https://github.com/weinitz/More.less) | Mixins, animations, shapes and more |
| [more-or-less](https://github.com/pixelass/more-or-less) | for-loops and other functions + css3 mixins |
| [normalize.less](https://github.com/segundofdez/normalize.less) | Modularized famous normalize.css using less |
| [normalize.less](https://github.com/segundofdez/normalize.less) | Modularized famous normalize.css using Less |
| [Oban](http://oban.io/) | Collection of mixins |
| [Preboot](http://getpreboot.com/) | Collection of variables and mixins. The precursor to Bootstrap |
| [prelude-mixins](https://github.com/amazingSurge/prelude-mixins) | Collection of mixins |
@@ -38,7 +38,7 @@ Get more info: [http://koala-app.com/](http://koala-app.com/)
![koala screenshot](http://koala-app.com/img/screenshot.png)
#### [Prepros](https://prepros.io/)
> Prepros is a tool to compile LESS, Sass, Compass, Stylus, Jade and much more.
> Prepros is a tool to compile Less, Sass, Compass, Stylus, Jade and much more.
Get more info at [https://prepros.io/](https://prepros.io/)
View
@@ -26,7 +26,7 @@ lessc --plugin=path_to_plugin=options
Using a Plugin in Code
----------------------
In Node, require the plugin and pass it to less in an array as an option plugins. E.g.
In Node, require the plugin and pass it to `less` in an array as an option plugins. E.g.
```js
var myPlugin = require("my-plugin");
@@ -110,7 +110,7 @@ List of Less Plugins
For Plugin Authors
--------------------------
Less supports some entry points that allow an author to integrate with less. We may add some more in the future.
Less supports some entry points that allow an author to integrate with it. We may add some more in the future.
The plugin itself has a very simple signature, like this
```js
@@ -120,7 +120,7 @@ The plugin itself has a very simple signature, like this
minVersion: [2, 0, 0] /* optional */
}
```
So, the plugin gets the less object, which in v2 has more classes on it (making it easy to extend), a plugin manager which provides some hooks to add visitors, file managers and post processors.
So, the plugin gets the `less` object, which in v2 has more classes on it (making it easy to extend), a plugin manager which provides some hooks to add visitors, file managers and post processors.
If your plugin supports `lessc`, there are a few more details and the signature looks like this
@@ -2,7 +2,7 @@
title: Programmatic usage
---
The main entry point into less is the less.render function. This takes the following format
The main entry point into `less` is the `less.render` function. This takes the following format
```js
less.render(lessInput, options)
@@ -8,7 +8,7 @@ title: Third Party Compilers
* **[assemble-less](https://github.com/assemble/assemble-less)**: Full-featured Grunt.js plugin for compiling Less files to CSS, with additional options for maintaining libraries of Less components and themes. For advanced users, this plugin allows you to define and manage Less "packages" or "bundles" using JSON, [Lo-dash](https://github.com/bestiejs/lodash)(underscore) templates (e.g. `<%= bootstrap.less %>`), and [node-glob](https://github.com/isaacs/node-glob) / [minimatch](https://github.com/isaacs/minimatch) (e.g. `'../src/**/*.less"`). _assemble-less_ also has a number of options including minifying CSS
* **[gulp-less](https://github.com/plus3network/gulp-less)**: Please note that this plugin discards `source-map` options, opting to instead using the [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) library.
* **[autoless](https://github.com/jgonera/autoless)**: A Less files watcher, with dependency tracking (changes to imported files cause other files to be updated too) and growl notifications.
* **[Connect Middleware for Less.js](https://github.com/emberfeather/less.js-middleware)**: Connect Middleware for Less.js compiling
* **[Connect Middleware for Less](https://github.com/emberfeather/less.js-middleware)**: Connect Middleware for Less compiling
## Other Technologies
@@ -2,19 +2,19 @@
title: Using Less in the Browser
---
We recommend using less in the browser only for development or when you need to dynamically compile less and cannot do it serverside.
This is because less is a large javascript file and compiling less before the user can see the page means a delay for the user. In addition,
We recommend using Less in the browser only for development or when you need to dynamically compile Less code and cannot do it serverside.
This is because less.js is a large javascript file and compiling Less before the user can see the page means a delay for the user. In addition,
consider that mobile devices will compile slower. For development consider if using a watcher and live reload (e.g. with grunt or gulp) would
be better suited.
To use less in the browser, you firstly need to include the less script.
To use Less in the browser, you firstly need to include the less.js script.
```html
<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options -->
<!-- Here: include any Less plugin scripts, any required browser shims and optionally set less = any options -->
<script src="less.js"></script>
```
This will find any less style tags on the page
This will find any Less style tags on the page
```html
<link rel="stylesheet/less" type="text/css" href="styles.less" />
@@ -24,7 +24,7 @@ and create style tags with the compiled css synchronously.
### Setting Options
You can set options either programmatically, by setting them on a less object before the script tag - this then effects all initial link tags and programmatic usage of less.
You can set options either programmatically, by setting them on a `less` object before the script tag - this then effects all initial link tags and programmatic usage of Less.
```html
<script>
@@ -12,11 +12,11 @@ Command Line Usage
### Clean CSS
We have removed the dependency on clean css and moved it to a [plugin](https://github.com/less/less-plugin-clean-css).
We have removed the dependency on `clean-css` and moved it to a [plugin](https://github.com/less/less-plugin-clean-css).
This allows us to:
1. update the dependency and integration without a less release
2. not tie people who do not use clean css into having it downloaded by npm.
1. update the dependency and integration without a Less release
2. not tie people who do not use `clean-css` into having it downloaded by npm.
The usage is similar, just install the plugin (`npm install -g less-plugin-clean-css`) then tell less to use it by using the
`--clean-css` argument.
@@ -47,4 +47,4 @@ Browser Usage
The browser usage has not changed significantly. Options set on the `less` object are exposed as `less.options` after the less script has run, rather than polluting `less`.
It is now possible to specify options on the script and less tags, which should simplify option setting in the browser. See the browser usage section for more information.
It is now possible to specify options on the script and Less tags, which should simplify option setting in the browser. See the browser usage section for more information.
Oops, something went wrong.

0 comments on commit 4c17dad

Please sign in to comment.