diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 index 4dece5f6..00000000 --- a/.bowerrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "directory": "vendor" -} \ No newline at end of file diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index cf3da82b..00000000 --- a/.gitattributes +++ /dev/null @@ -1,9 +0,0 @@ -# Set default behaviour, in case users don't have core.autocrlf set. -*.* text=lf -*.* text eol=lf -*.* eol=lf - -*.jpg binary -*.gif binary -*.png binary -*.jpeg binary \ No newline at end of file diff --git a/.gitignore b/.gitignore index 53ee59b1..abc5cb78 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,8 @@ -# live site -_gh_pages - -# node.js node_modules npm-debug.log -# local dev tmp temp -vendor TODO.md + *.sublime-* -.idea diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index f57a8ff4..00000000 --- a/.jshintrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "curly": true, - "eqeqeq": true, - "immed": true, - "latedef": true, - "newcap": true, - "noarg": true, - "sub": true, - "undef": true, - "boss": true, - "eqnull": true, - "node": true -} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index a5c1b7d4..00000000 --- a/.travis.yml +++ /dev/null @@ -1,6 +0,0 @@ -language: node_js -node_js: - - "0.8" -before_script: - - npm install -g grunt-cli - - npm install grunt diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 30cf00ea..00000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,58 +0,0 @@ -## Contributing to the Wiki - -**Formatting Standards** - -For consistency across all examples in the wiki, and to ensure that our code examples are readable, we ask that you please follow these guidelines when contributing to the wiki: - -* Four spaces for indentation, and always use proper indentation -* Multiple-line formatting (one property and value per line) -* Double quotes only, never single quotes -* Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`) -* End all lines with a semi-colon -* For multiple, comma-separated selectors, place each selector on it's own line -* Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes. This is important to do in your own code as well, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks). -* When HTML is in your examples, use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags with no trailing slash) -* All page files should have globally unique names regardless of where they are located in the repository. - - -## Tools - -### Assemble - -* Visit [Assemble's documentation](http://assemble.io/docs/) site to learn more about customization and configuration. -* Markdown: [Markdown Cheatsheet](http://assemble.io/docs/Cheatsheet-Markdown.html) - - -## Coding Style - -Examples: - -**Good** - -```css -body { - padding-top: 80px; - font-size: 12px; -} -``` - -**Bad** - -```css -body { -padding-top: 80px; -font-size: 12px; -} -``` - -**Bad** - -```css -body { padding-top: 80px; font-size: 12px } -``` - -### Feature Requests, Bugs and Pull Requests - -* If you would like to request a feature, suggest an improvement, or report a bug, please [submit an Issue](https://github.com/cloudhead/less.js/issues?state=open). -* Feature requests are more likely to get attention if you include a clearly described use case. -* If you wish to submit a pull request, please [read this first](https://github.com/cloudhead/less.js/blob/master/CONTRIBUTING).md. diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 77a92077..00000000 --- a/Gruntfile.js +++ /dev/null @@ -1,100 +0,0 @@ -/* - * lesscss.org - * https://github.com/less/less-docs - * Copyright (c) 2013 - * Licensed under the MIT license. - */ - -'use strict'; - -module.exports = function(grunt) { - - - // Project configuration. - grunt.initConfig({ - - // Project metadata - pkg: grunt.file.readJSON('package.json'), - site: grunt.file.readYAML('_config.yml'), - - config: { - src: 'src', - dist: '<%= site.dest %>' - }, - - - /** - * Lint JavaScript - */ - jshint: { - options: {jshintrc: '.jshintrc'}, - all: [ - 'Gruntfile.js', - 'templates/helpers/*.js' - ] - }, - - - /** - * Generate HTML - */ - assemble: { - options: { - // Custom property for metadata - site: '<%= site %>', - - // Initialize Assemble extensions - // plugins: ['permalinks'], - helpers: ['helper-prettify', 'templates/helpers/*.js'], - - // Templates and data - layouts: 'templates/layouts', - partials: ['templates/includes/*.hbs'], - data: ['data/*.{json,yml}'], - - // Dest config - assets: '<%= site.dest %>/assets', - flatten: true - }, - pages: { - // options: { - // permalinks: {preset: 'pretty'} - // }, - src: 'templates/*.hbs', - dest: '<%= site.dest %>/' - } - }, - - - /** - * Compile LESS to CSS - */ - less: { - options: { - paths: ['theme/bootstrap', 'theme/components'] - }, - bootstrap: { - src: ['theme/theme.less'], - dest: '<%= assemble.options.assets %>/css/docs.css' - } - }, - - - /** - * Before generating any new files clear out - * any previously-created files. - */ - clean: { - example: ['<%= site.dest %>/*.html'] - } - }); - - // Load npm plugins to provide necessary tasks. - grunt.loadNpmTasks('assemble'); - grunt.loadNpmTasks('assemble-less'); - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - - // Default tasks to be run. - grunt.registerTask('default', ['clean', 'jshint', 'less', 'assemble']); -}; diff --git a/LICENSE-CC b/LICENSE-CC deleted file mode 100644 index 1d658d6d..00000000 --- a/LICENSE-CC +++ /dev/null @@ -1,319 +0,0 @@ -Creative Commons Legal Code - -Attribution 3.0 Unported - - CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE - LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN - ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS - INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES - REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR - DAMAGES RESULTING FROM ITS USE. - -License - -THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE -COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY -COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS -AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. - -BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE -TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY -BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS -CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND -CONDITIONS. - -1. Definitions - - a. "Adaptation" means a work based upon the Work, or upon the Work and - other pre-existing works, such as a translation, adaptation, - derivative work, arrangement of music or other alterations of a - literary or artistic work, or phonogram or performance and includes - cinematographic adaptations or any other form in which the Work may be - recast, transformed, or adapted including in any form recognizably - derived from the original, except that a work that constitutes a - Collection will not be considered an Adaptation for the purpose of - this License. For the avoidance of doubt, where the Work is a musical - work, performance or phonogram, the synchronization of the Work in - timed-relation with a moving image ("synching") will be considered an - Adaptation for the purpose of this License. - b. "Collection" means a collection of literary or artistic works, such as - encyclopedias and anthologies, or performances, phonograms or - broadcasts, or other works or subject matter other than works listed - in Section 1(f) below, which, by reason of the selection and - arrangement of their contents, constitute intellectual creations, in - which the Work is included in its entirety in unmodified form along - with one or more other contributions, each constituting separate and - independent works in themselves, which together are assembled into a - collective whole. A work that constitutes a Collection will not be - considered an Adaptation (as defined above) for the purposes of this - License. - c. "Distribute" means to make available to the public the original and - copies of the Work or Adaptation, as appropriate, through sale or - other transfer of ownership. - d. "Licensor" means the individual, individuals, entity or entities that - offer(s) the Work under the terms of this License. - e. "Original Author" means, in the case of a literary or artistic work, - the individual, individuals, entity or entities who created the Work - or if no individual or entity can be identified, the publisher; and in - addition (i) in the case of a performance the actors, singers, - musicians, dancers, and other persons who act, sing, deliver, declaim, - play in, interpret or otherwise perform literary or artistic works or - expressions of folklore; (ii) in the case of a phonogram the producer - being the person or legal entity who first fixes the sounds of a - performance or other sounds; and, (iii) in the case of broadcasts, the - organization that transmits the broadcast. - f. "Work" means the literary and/or artistic work offered under the terms - of this License including without limitation any production in the - literary, scientific and artistic domain, whatever may be the mode or - form of its expression including digital form, such as a book, - pamphlet and other writing; a lecture, address, sermon or other work - of the same nature; a dramatic or dramatico-musical work; a - choreographic work or entertainment in dumb show; a musical - composition with or without words; a cinematographic work to which are - assimilated works expressed by a process analogous to cinematography; - a work of drawing, painting, architecture, sculpture, engraving or - lithography; a photographic work to which are assimilated works - expressed by a process analogous to photography; a work of applied - art; an illustration, map, plan, sketch or three-dimensional work - relative to geography, topography, architecture or science; a - performance; a broadcast; a phonogram; a compilation of data to the - extent it is protected as a copyrightable work; or a work performed by - a variety or circus performer to the extent it is not otherwise - considered a literary or artistic work. - g. "You" means an individual or entity exercising rights under this - License who has not previously violated the terms of this License with - respect to the Work, or who has received express permission from the - Licensor to exercise rights under this License despite a previous - violation. - h. "Publicly Perform" means to perform public recitations of the Work and - to communicate to the public those public recitations, by any means or - process, including by wire or wireless means or public digital - performances; to make available to the public Works in such a way that - members of the public may access these Works from a place and at a - place individually chosen by them; to perform the Work to the public - by any means or process and the communication to the public of the - performances of the Work, including by public digital performance; to - broadcast and rebroadcast the Work by any means including signs, - sounds or images. - i. "Reproduce" means to make copies of the Work by any means including - without limitation by sound or visual recordings and the right of - fixation and reproducing fixations of the Work, including storage of a - protected performance or phonogram in digital form or other electronic - medium. - -2. Fair Dealing Rights. Nothing in this License is intended to reduce, -limit, or restrict any uses free from copyright or rights arising from -limitations or exceptions that are provided for in connection with the -copyright protection under copyright law or other applicable laws. - -3. License Grant. Subject to the terms and conditions of this License, -Licensor hereby grants You a worldwide, royalty-free, non-exclusive, -perpetual (for the duration of the applicable copyright) license to -exercise the rights in the Work as stated below: - - a. to Reproduce the Work, to incorporate the Work into one or more - Collections, and to Reproduce the Work as incorporated in the - Collections; - b. to create and Reproduce Adaptations provided that any such Adaptation, - including any translation in any medium, takes reasonable steps to - clearly label, demarcate or otherwise identify that changes were made - to the original Work. For example, a translation could be marked "The - original work was translated from English to Spanish," or a - modification could indicate "The original work has been modified."; - c. to Distribute and Publicly Perform the Work including as incorporated - in Collections; and, - d. to Distribute and Publicly Perform Adaptations. - e. For the avoidance of doubt: - - i. Non-waivable Compulsory License Schemes. In those jurisdictions in - which the right to collect royalties through any statutory or - compulsory licensing scheme cannot be waived, the Licensor - reserves the exclusive right to collect such royalties for any - exercise by You of the rights granted under this License; - ii. Waivable Compulsory License Schemes. In those jurisdictions in - which the right to collect royalties through any statutory or - compulsory licensing scheme can be waived, the Licensor waives the - exclusive right to collect such royalties for any exercise by You - of the rights granted under this License; and, - iii. Voluntary License Schemes. The Licensor waives the right to - collect royalties, whether individually or, in the event that the - Licensor is a member of a collecting society that administers - voluntary licensing schemes, via that society, from any exercise - by You of the rights granted under this License. - -The above rights may be exercised in all media and formats whether now -known or hereafter devised. The above rights include the right to make -such modifications as are technically necessary to exercise the rights in -other media and formats. Subject to Section 8(f), all rights not expressly -granted by Licensor are hereby reserved. - -4. Restrictions. The license granted in Section 3 above is expressly made -subject to and limited by the following restrictions: - - a. You may Distribute or Publicly Perform the Work only under the terms - of this License. You must include a copy of, or the Uniform Resource - Identifier (URI) for, this License with every copy of the Work You - Distribute or Publicly Perform. You may not offer or impose any terms - on the Work that restrict the terms of this License or the ability of - the recipient of the Work to exercise the rights granted to that - recipient under the terms of the License. You may not sublicense the - Work. You must keep intact all notices that refer to this License and - to the disclaimer of warranties with every copy of the Work You - Distribute or Publicly Perform. When You Distribute or Publicly - Perform the Work, You may not impose any effective technological - measures on the Work that restrict the ability of a recipient of the - Work from You to exercise the rights granted to that recipient under - the terms of the License. This Section 4(a) applies to the Work as - incorporated in a Collection, but this does not require the Collection - apart from the Work itself to be made subject to the terms of this - License. If You create a Collection, upon notice from any Licensor You - must, to the extent practicable, remove from the Collection any credit - as required by Section 4(b), as requested. If You create an - Adaptation, upon notice from any Licensor You must, to the extent - practicable, remove from the Adaptation any credit as required by - Section 4(b), as requested. - b. If You Distribute, or Publicly Perform the Work or any Adaptations or - Collections, You must, unless a request has been made pursuant to - Section 4(a), keep intact all copyright notices for the Work and - provide, reasonable to the medium or means You are utilizing: (i) the - name of the Original Author (or pseudonym, if applicable) if supplied, - and/or if the Original Author and/or Licensor designate another party - or parties (e.g., a sponsor institute, publishing entity, journal) for - attribution ("Attribution Parties") in Licensor's copyright notice, - terms of service or by other reasonable means, the name of such party - or parties; (ii) the title of the Work if supplied; (iii) to the - extent reasonably practicable, the URI, if any, that Licensor - specifies to be associated with the Work, unless such URI does not - refer to the copyright notice or licensing information for the Work; - and (iv) , consistent with Section 3(b), in the case of an Adaptation, - a credit identifying the use of the Work in the Adaptation (e.g., - "French translation of the Work by Original Author," or "Screenplay - based on original Work by Original Author"). The credit required by - this Section 4 (b) may be implemented in any reasonable manner; - provided, however, that in the case of a Adaptation or Collection, at - a minimum such credit will appear, if a credit for all contributing - authors of the Adaptation or Collection appears, then as part of these - credits and in a manner at least as prominent as the credits for the - other contributing authors. For the avoidance of doubt, You may only - use the credit required by this Section for the purpose of attribution - in the manner set out above and, by exercising Your rights under this - License, You may not implicitly or explicitly assert or imply any - connection with, sponsorship or endorsement by the Original Author, - Licensor and/or Attribution Parties, as appropriate, of You or Your - use of the Work, without the separate, express prior written - permission of the Original Author, Licensor and/or Attribution - Parties. - c. Except as otherwise agreed in writing by the Licensor or as may be - otherwise permitted by applicable law, if You Reproduce, Distribute or - Publicly Perform the Work either by itself or as part of any - Adaptations or Collections, You must not distort, mutilate, modify or - take other derogatory action in relation to the Work which would be - prejudicial to the Original Author's honor or reputation. Licensor - agrees that in those jurisdictions (e.g. Japan), in which any exercise - of the right granted in Section 3(b) of this License (the right to - make Adaptations) would be deemed to be a distortion, mutilation, - modification or other derogatory action prejudicial to the Original - Author's honor and reputation, the Licensor will waive or not assert, - as appropriate, this Section, to the fullest extent permitted by the - applicable national law, to enable You to reasonably exercise Your - right under Section 3(b) of this License (right to make Adaptations) - but not otherwise. - -5. Representations, Warranties and Disclaimer - -UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR -OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY -KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, -INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, -FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF -LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, -WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION -OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU. - -6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE -LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR -ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES -ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS -BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. - -7. Termination - - a. This License and the rights granted hereunder will terminate - automatically upon any breach by You of the terms of this License. - Individuals or entities who have received Adaptations or Collections - from You under this License, however, will not have their licenses - terminated provided such individuals or entities remain in full - compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will - survive any termination of this License. - b. Subject to the above terms and conditions, the license granted here is - perpetual (for the duration of the applicable copyright in the Work). - Notwithstanding the above, Licensor reserves the right to release the - Work under different license terms or to stop distributing the Work at - any time; provided, however that any such election will not serve to - withdraw this License (or any other license that has been, or is - required to be, granted under the terms of this License), and this - License will continue in full force and effect unless terminated as - stated above. - -8. Miscellaneous - - a. Each time You Distribute or Publicly Perform the Work or a Collection, - the Licensor offers to the recipient a license to the Work on the same - terms and conditions as the license granted to You under this License. - b. Each time You Distribute or Publicly Perform an Adaptation, Licensor - offers to the recipient a license to the original Work on the same - terms and conditions as the license granted to You under this License. - c. If any provision of this License is invalid or unenforceable under - applicable law, it shall not affect the validity or enforceability of - the remainder of the terms of this License, and without further action - by the parties to this agreement, such provision shall be reformed to - the minimum extent necessary to make such provision valid and - enforceable. - d. No term or provision of this License shall be deemed waived and no - breach consented to unless such waiver or consent shall be in writing - and signed by the party to be charged with such waiver or consent. - e. This License constitutes the entire agreement between the parties with - respect to the Work licensed here. There are no understandings, - agreements or representations with respect to the Work not specified - here. Licensor shall not be bound by any additional provisions that - may appear in any communication from You. This License may not be - modified without the mutual written agreement of the Licensor and You. - f. The rights granted under, and the subject matter referenced, in this - License were drafted utilizing the terminology of the Berne Convention - for the Protection of Literary and Artistic Works (as amended on - September 28, 1979), the Rome Convention of 1961, the WIPO Copyright - Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 - and the Universal Copyright Convention (as revised on July 24, 1971). - These rights and subject matter take effect in the relevant - jurisdiction in which the License terms are sought to be enforced - according to the corresponding provisions of the implementation of - those treaty provisions in the applicable national law. If the - standard suite of rights granted under applicable copyright law - includes additional rights not granted under this License, such - additional rights are deemed to be included in the License; this - License is not intended to restrict the license of any rights under - applicable law. - - -Creative Commons Notice - - Creative Commons is not a party to this License, and makes no warranty - whatsoever in connection with the Work. Creative Commons will not be - liable to You or any party on any legal theory for any damages - whatsoever, including without limitation any general, special, - incidental or consequential damages arising in connection to this - license. Notwithstanding the foregoing two (2) sentences, if Creative - Commons has expressly identified itself as the Licensor hereunder, it - shall have all rights and obligations of Licensor. - - Except for the limited purpose of indicating to the public that the - Work is licensed under the CCPL, Creative Commons does not authorize - the use by either party of the trademark "Creative Commons" or any - related trademark or logo of Creative Commons without the prior - written consent of Creative Commons. Any permitted use will be in - compliance with Creative Commons' then-current trademark usage - guidelines, as may be published on its website or otherwise made - available upon request from time to time. For the avoidance of doubt, - this trademark restriction does not form part of this License. - - Creative Commons may be contacted at http://creativecommons.org/. diff --git a/LICENSE-MIT b/LICENSE-MIT deleted file mode 100644 index 4739f8d0..00000000 --- a/LICENSE-MIT +++ /dev/null @@ -1,22 +0,0 @@ -Copyright (c) 2013 Jon Schlinkert - -Permission is hereby granted, free of charge, to any person -obtaining a copy of this software and associated documentation -files (the "Software"), to deal in the Software without -restriction, including without limitation the rights to use, -copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the -Software is furnished to do so, subject to the following -conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index bd96e9bd..00000000 --- a/README.md +++ /dev/null @@ -1,102 +0,0 @@ -# lesscss.org - -> Official website and documentation for LESS/Less.js - -## Quickstart - -Assemble and Grunt are used to build the docs. To get started: - -1. Download the docs -2. In the root of the project, run `npm install` -3. Run the `grunt` command to build the docs - -If all worked properly, then you're ready to begin contributing to the docs! - -### Documentation - -All documentation content can be found in the `./content` directory. Please read the **contributing** section below if you wish to add documentation. - - -## The Plan - -1. Clean up and organize all of the documentation in the [content](./content) directory, which means -2. Consistent naming conventions for files, consistent coding styles in documents -3. Organize information and favor individual files for sections of content, rather than long documents -4. Last, a new theme. - - -## Contributing -### Coding Style -> Please help us make the documentation as _consist, readable, and maintainable_ by conforming to these guidelines when contributing: - -#### Markdown standards - -* Use `#` for titles, not underlines. Underlines aren't as flexible, aren't always highlighted properly in code highlighters -* Always add a space between the `#` and the heading -* Wrap inline code with a **single backtick**, -* wrap blocks of code with **three backticks** (code fences). -* With code blocks, _always use the correct language_ after to the first code fence. Althought Ghtub does not highlight LESS, our documentation is more likely to show up in GitHub's and Google's search results when the correct language is used. Examples: pleas use `` ```less `` for LESS, and `` ```css `` for CSS. - - -#### LESS standards - -* Two spaces for indentation, never tabs, and always use proper indentation -* Multiple-line formatting (one property and value per line) -* For multiple, comma-separated selectors, place each selector on it's own line -* Double quotes only, never single quotes -* Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`) -* End _all_ lines with a semi-colon -* Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes. This is important to do in your own code as well, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks). -* When HTML is in your examples, use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags with _no trailing slash_) - -Examples: - -**Good** - -```css -body { - padding-top: 80px; - font-size: 12px; -} -``` - -**Bad** - -```css -body { -padding-top: 80px; -font-size: 12px; -} -``` - -**Bad** - -```css -body { padding-top: 80px; font-size: 12px } -``` - -Also, please ensure that all documentation files should have globally unique names, regardless of where they are located in the repository. This makes it easier to use conveniences like file globbing, and it's good practice anyway. - -### Feature Requests, Bugs and Pull Requests - -* If you would like to request a feature, suggest an improvement, or report a bug, please [submit an Issue](https://github.com/cloudhead/less.js/issues?state=open). -* Feature requests are more likely to get attention if you include a clearly described use case. -* If you wish to submit a pull request, please [read this first](https://github.com/cloudhead/less.js/blob/master/CONTRIBUTING).md. - -## Tools - -The documentation site is generated using [Assemble](http://assemble.io). Please visit that project [to report bugs](https://github.com/assemble/assemble/issues?state=open), or to learn more about usage and customization. - - -## Build the docs - -Update the project with the most recent metadata from the Less.js project, such as current version number, description, and so on, and then run Grunt with the following command: - -```bash -node data/utils/pkg && grunt -``` - -## License -Copyright (c) 2013, Less.js Core Team, Contributors -Documentation released under [Creative Commons](./LICENSE-CC). -Documentation source code released under the [MIT License](./LICENSE-MIT). \ No newline at end of file diff --git a/_config.yml b/_config.yml deleted file mode 100644 index a60ecdb4..00000000 --- a/_config.yml +++ /dev/null @@ -1,31 +0,0 @@ -# Build -root: _gh_pages -dest: <%= site.root %> - - -# Less.js metadata -current_version: <%= less.version %> - -# Site metadata -brand: lesscss.org -title: Less.js -lead: LESS « The Dynamic Stylesheet Language -description: > - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. - LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only). -license: - type: MIT License - url: ./license/index.html - - -# URLs -repo: https://github.com/less/less.js -download: - source: https://github.com/less/less.js/archive/master.zip - latest: https://raw.github.com/less/less.js/master/dist/less-<%= pkg.version %>.min.js - -cdn: //cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js - -# SEO/SEM -google_analytics: false -google_site_id: false \ No newline at end of file diff --git a/content/FAQ.md b/content/FAQ.md deleted file mode 100644 index b02251f0..00000000 --- a/content/FAQ.md +++ /dev/null @@ -1,25 +0,0 @@ -## How do I install LESS? -For general installation instructions, please read the [[Getting Started]] guide. If you need more specific information after having read that, read the comprehensive [[Installing LESS]] guide. - - - -## Use LESS on Windows -LESS works fine on Windows, because [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) both work fine on Windows. Usually the problematic part is [Cygwin](http://www.cygwin.com/), because it bundles an outdated version of Node.js. - -The best way to avoid this issue is to use the [msysGit installer](http://msysgit.github.com/) to install the `git` binary and the [Node.js installer](http://nodejs.org/#download) to install the `node` and `npm` binaries, and to use the built-in [Windows command prompt](http://www.cs.princeton.edu/courses/archive/spr05/cos126/cmd-prompt.html) or [PowerShell](http://support.microsoft.com/kb/968929) instead of Cygwin. - - - -## Why doesn't my asynchronous task complete? -Chances are this is happening because you have forgotten to call the [this.async](LESS.task#wiki-this-async) method to tell LESS that your task is asynchronous. For simplicity's sake, LESS uses a synchronous coding style, which can be switched to asynchronous by calling `this.async()` within the task body. - -Note that passing `false` to the `done()` function tells LESS that the task has failed. - -For example: - -```javascript -LESS.registerTask('asyncme', 'My asynchronous task.', function() { - var done = this.async(); - doSomethingAsync(done); -}); -``` diff --git a/content/Frameworks-using-LESS.md b/content/Frameworks-using-LESS.md deleted file mode 100644 index 895ef1a0..00000000 --- a/content/Frameworks-using-LESS.md +++ /dev/null @@ -1,13 +0,0 @@ -# Frameworks that use LESS.js - - * [Bootstrap, from Twitter](http://twitter.github.com/bootstrap/) -* [Pre: An enjoyable CSS framework use LESS](https://github.com/yuanyan/pre) - * [Flaw{LESS} CSS Framework](http://github.com/DominikGuzei/flawless.css) - * [Centage!](http://centage.peruste.net) - * [More Less](https://github.com/pailoro/Moreless) - * [Perkins](http://p.erkins.com/) - * [Golden Grid System](https://github.com/jonikorpi/Golden-Grid-System) - * [Ruby Less](https://github.com/cowboyd/less.rb) - * [Less In Rails Asset Pipeline](https://github.com/metaskills/less-rails) - * [Foundation (Branch:Less)](https://github.com/zurb/foundation/tree/less) - * [Graphite, for ASP.NET platform](http://graphite.estate.nl/) \ No newline at end of file diff --git a/content/GUI-compilers-that-use-LESS.js.md b/content/GUI-compilers-that-use-LESS.js.md deleted file mode 100644 index 2f6a42d8..00000000 --- a/content/GUI-compilers-that-use-LESS.js.md +++ /dev/null @@ -1,105 +0,0 @@ -**Tip**: try out the different LESS tools available for your platform, to see which one fits you best. - -_This page focuses on GUI compilers. For command line usage and tools see [[Command Line Usage]]._ - - -## Cross platform - -### [Crunch!](http://crunchapp.net/) - -> Crunch is not just a LESS compiler, it is also a LESS editor for Windows and Mac. - -If you work a lot with LESS files, you should definitely try it out. Crunch is built on the Adobe AIR platform. Get more info: [http://crunchapp.net/](http://crunchapp.net/). - -![Crunch screenshot](http://crunchapp.net/img/Crunch.png) - - -### [Mixture](http://mixture.io/) - -> A rapid prototyping and static site generation tool for designers and developers - -Mixture brings together a collection of awesome tools and best practices. It's quick, no-fuss, super-powerful and works with your favourite editor. - -Get more info: [http://mixture.io/](http://mixture.io) - -![mixture screenshot](https://s3.amazonaws.com/mixture-mixed/1/775/assets/img/img1.jpg) - - -### [SimpLESS](http://wearekiss.com/simpless) - -> SimpLESS is a minimalistic LESS compiler. Just drag, drop and compile. - -One of the unique features of SimpLESS is that it supports 'prefixing' your CSS by using [http://prefixr.com.](http://prefixr.com). SimpLESS is built on the Titanium platform. Get more info: [http://wearekiss.com/simpless](http://wearekiss.com/simpless) - -![SimpLESS screenshot](http://wearekiss.com/lib/img/simpless/app-windows.png?1) - - -### [Koala](http://koala-app.com/) - -> Koala is a cross-platform GUI application for compiling less, sass and coffeescript. - -Features: cross platform, compile error notification supports and compile options supports. - -Get more info: [http://koala-app.com/](http://koala-app.com/) - -![koala screenshot](http://koala-app.com/images/screenshots/windows.png) - - - - -## Specific platforms - -### Windows - -#### [Prepros App](http://alphapixels.com/prepros) ->Prepros is a free and open source app that can compile less, sass, stylus, jade, haml and much more with live browser refresh. - -Get more info at [http://alphapixels.com/prepros](http://alphapixels.com/prepros) - -![Prepros screenshot](http://alphapixels.com/prepros/img/prepros.jpg) - -#### [WinLess](http://winless.org) - -> WinLess started out as a clone of LESS.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments. - -Get more info: [http://winless.org](http://winless.org) - -![WinLess screenshot](http://files.web-mark.nl/winless/style/images/WinLess_Screenshot.png) - - -### OSx - -#### [LESS.app](http://incident57.com/less) - -> LESS.app was the first GUI compiler for LESS. LESS.app has a 'Compiler' tab where you can see the compiler results. - -Get more info: [http://incident57.com/less](http://incident57.com/less) - -![LESS.app screenshot](http://incident57.com/less/images/hero-window.png) - -#### [CodeKit](http://incident57.com/codekit) - -> CodeKit is the sucessor to LESS.app, and supports LESS among many other preprocessing languages, such as SASS, Jade, Markdown, and many more. - -Get more info: [http://incident57.com/codekit](http://incident57.com/codekit) - -![CodeKit screenshot](http://incident57.com/codekit/images/hero-window.png) - -#### [LiveReload](http://livereload.com) - -> CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work. - -Get more info: [http://livereload.com](http://livereload.com) - -![LiveReload screenshot](http://assets.livereload.com/embedded-images/LiveReload-LESS-screenshot-on-white.png) - -### Linux - -#### [Plessc](https://github.com/Mte90/Plessc) - -> Plessc is a gui fronted made with PyQT. - -Auto compile, log viewer, open the less file with the editor choosen, settings for compile the file. -Get more info: [https://github.com/Mte90/Plessc](https://github.com/Mte90/Plessc) - -![Plessc screenshot](https://github.com/Mte90/Plessc/raw/master/screenshot.png) \ No newline at end of file diff --git a/content/Home.md b/content/Home.md deleted file mode 100644 index 26d8efec..00000000 --- a/content/Home.md +++ /dev/null @@ -1,79 +0,0 @@ -# Welcome to the Less.js wiki! - -> Documentation for Less.js, the official compiler for the LESS language - -**About LESS** - -As an extension to CSS, LESS is not only backwards compatible with CSS, but LESS uses _existing CSS syntax_ for the extra features it adds. This makes learning LESS a _breeze_, and allows you to you fall back to CSS if in doubt. - -For more information about the language and features visit [lesscss.org][website] - - -### Getting Started -* About - -**External Resources** -* Example LESS Projects -* [StackOverflow: Questions tagged with "LESS"][stackoverflow] -* [Sitepoint, "A Comprehensive Introduction to LESS"][sitepoint-article] -* [Net Tuts+, "Quick Tip: You Need to Check out LESS.js"][nettuts] -* [Hongkiat.com, "LESS CSS Tutorial: Designing a Slick Navigation Bar"][hongkiatNavbar] -* [Hongkiat.com, "Working Effectively With LESS: Tips And Tools"][hongkiatEffective] - - -## Usage - -### Usage and compiling - -* Client Side Usage -* Converting LESS to CSS -* Command Line Usage -* Command Line Options|Options -* Browser Options - -**GUI tools** -* GUI compilers that use LESS.js -* Editors and Plugins - - -### General information -* Function Reference -* Include Data URI Base64 encoded images easily -* Frameworks that use LESS.js -* Combining 960grid with LESS.js - - -### Language Features - -* Variables TODO -* Mixins TODO -* Extends TODO -* Pattern Matching TODO -* Nested Rules TODO -* Operations TODO -* Functions|Function-Reference -* Namespaces TODO -* Scope TODO -* Comments TODO -* Importing TODO - - -## Developer information -* Roadmap -* [Contributing][contributing] -* Developing Less.js -* Other ports of LESS|Ports of LESS - - - - -[website]: http://lesscss.org/ "Less.js Official Website" -[contributing]: https://github.com/cloudhead/less.js/blob/master/CONTRIBUTING.md "Contributing to Less.js" -[issues]: https://github.com/cloudhead/less.js/issues?state=open "Visit GitHub Issues for Less.js" - -[nettuts]: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/ "Quick Tip: You Need to Check out LESS.js" -[sitepoint-article]: http://www.sitepoint.com/a-comprehensive-introduction-to-less/ "Introduction to LESS" -[stackoverflow]: http://stackoverflow.com/questions/tagged/less "Questions tagged with 'LESS'" - -[hongkiatNavbar]: http://www.hongkiat.com/blog/less-css-tutorial-design-slick-menu-nav-bar/ -[hongkiatEffective]: http://www.hongkiat.com/blog/less-tips-tools/ \ No newline at end of file diff --git a/content/Installing-LESS.md b/content/Installing-LESS.md deleted file mode 100644 index 44393eb6..00000000 --- a/content/Installing-LESS.md +++ /dev/null @@ -1,49 +0,0 @@ -# Installing Less.js - -For general installation instructions, please read the [[Getting Started]] guide. If you need more specific information after having read that, read on. - - - -## Overview -Less.js is comprised of two parts: `lessc`. - -1. The npm module `lessc` should be installed locally to your project. It contains the code and logic for running tasks, loading plugins, etc. -1. The npm module `lessc-cli` should be installed globally. It puts the `lessc` command in your PATH so you can execute it anywhere. By itself, it doesn't do anything; its job is to load and run the lessc that has been installed locally to your project, regardless of its version. - -It is preferable to specify lessc and lessc plugins as [devDependencies](https://npmjs.org/doc/json.html#devDependencies) in your project's [package.json](https://npmjs.org/doc/json.html) and instruct users to do `npm install` than to have users install lessc and lessc plugins manually. Utilizing `package.json` makes the task of installing lessc (and any other dev dependencies) much easier and less error-prone. - -## Installing lessc -As the "Installing lessc and lessc plugins" section of the [[Getting Started]] guide explains, run `npm install lessc --save-dev` and npm will install the latest official version of lessc in your project folder, adding it to your `package.json` devDependencies. - -Note that a [tilde version range][] will be automatically specified in `package.json`. This is good, as new patch releases of the latest version will be installable by npm. - -[tilde version range]: https://npmjs.org/doc/json.html#Tilde-Version-Ranges - -### Installing a specific version of lessc -If you need a specific version of lessc, run `npm install lessc@VERSION --save-dev` where `VERSION` is the version you need, and npm will install that version of lessc in your project folder, adding it to your `package.json` devDependencies. - -Note that a [tilde version range][] will be automatically specified in `package.json`. This is typically good, as new patch releases of the specified version will be installable by npm. If you don't want this behavior, manually edit your `package.json` and remove the ~ (tilde) from the version number. This will lock in the exact version that you have specified. - -### Installing a published development version of lessc -Periodically, as new functionality is being developed, lessc builds will be published to npm. These builds will _not_ be published as a `@latest` official release, and will typically have a build number or alpha/beta/release candidate designation. - -Like installing a specific version of lessc, run `npm install lessc@VERSION --save-dev` where `VERSION` is the version you need, and npm will install that version of lessc in your project folder, adding it to your `package.json` devDependencies. - -Note that regardless of the version you specify, a [tilde version range][] will be specified in `package.json`. **This is very bad**, as new, possibly incompatible, patch releases of the specified development version may be installed by npm, breaking your build. - -_In this case it is **very important** that you manually edit your `package.json` and remove the ~ (tilde) from the version number. This will lock in the exact development version that you have specified._ - -### Installing an unpublished development version of lessc -If you want to install a bleeding-edge, unpublished version of lessc, follow the instructions for specifying a [git URL as a dependency](https://npmjs.org/doc/json.html#Git-URLs-as-Dependencies) and be sure to specify an actual commit SHA (not a branch name) as the `commit-ish`. This will guarantee that your project always uses that exact version of lessc. - -The specified git URL may be that of the official lessc repo or a fork. - -## Installing lessc-cli -As the "Installing the CLI" section of the [[Getting Started]] guide explains, run `npm install -g lessc-cli` and npm will install the latest official version of lessc-cli. This will put the `lessc` command in your system path, allowing it to be run from any directory. - -**If you have installed lessc globally in the past, you will need to remove it with `npm uninstall -g lessc` first.** - -### Installing lessc-cli locally -You may install lessc-cli locally to a project using `npm install lessc-cli --save-dev` but instead of being able to access the `lessc` command from anywhere, you'll need to specify its explicit local path, which will be something like `./node_modules/.bin/lessc`. - -Using lessc-cli in this way is unsupported. \ No newline at end of file diff --git a/content/LESS-project-and-community.md b/content/LESS-project-and-community.md deleted file mode 100644 index cff98bec..00000000 --- a/content/LESS-project-and-community.md +++ /dev/null @@ -1,14 +0,0 @@ -## Community and Contributions - - - - - - - -### Grid Systems - - * [960 Grid|combining-960grid-with-less-js] - - -### Frameworks diff --git a/content/Overview.md b/content/Overview.md deleted file mode 100644 index a4f1c4df..00000000 --- a/content/Overview.md +++ /dev/null @@ -1,219 +0,0 @@ -As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS. - -## Variables - -These are pretty self-explanatory: - -```less -@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. - - -## 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 class: - -```css -.bordered { - border-top: dotted 1px black; - border-bottom: solid 2px black; -} -``` - -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: - -```less -#menu a { - color: #111; - .bordered; -} - -.post a { - color: red; - .bordered; -} -``` - -The properties of the `.bordered` class will now appear in both `#menu a` and `.post a`. (Note that you can also use `#ids` as mixins.) - - -**Learn more** - * [[More about mixins|mixins]] - * [[Parametric Mixins|parametric-mixins]] - - -## Nested rules - -LESS gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS: - -```css -#header { - color: black; -} -#header .navigation { - font-size: 12px; -} -#header .logo { - width: 300px; -} -``` - -In LESS, we can also write it this way: - -```less -#header { - color: black; - .navigation { - font-size: 12px; - } - .logo { - width: 300px; - } -} -``` - -The resulting code is more concise, and mimics the structure of your HTML. - -You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (`&` represents the current selector parent): - -```less -.clearfix { - display: block; - zoom: 1; - - &:after { - content: " "; - display: block; - font-size: 0; - height: 0; - clear: both; - visibility: hidden; - } -} -``` - -## Operations - -Any number, color or variable can be operated on. Here are a couple of examples: - -```less -@base: 5%; -@filler: @base * 2; -@other: @base + @filler; - -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: - -```less -@var: 1px + 5; -``` - -LESS will use that unit for the final output—`6px` in this case. - -## Functions - -LESS provides a variety of functions which transform colors, manipulate strings and do maths. -They are documented fully in the function reference. - -Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, -increases the saturation of a base color by 5% and then sets the background color to one that is lightened by -25% and spun by 8 degrees: - -``` - @base: #f04615; - @width: 0.5; - - .class { - width: percentage(0.5); // returns `50%` - color: saturate(@base, 5%); - background-color: spin(lighten(@base, 25%), 8); - } -``` - - -## Namespaces & Accessors - -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 reuse or distributing: - -```less -#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: - -```less -#header a { - color: orange; - #bundle > .button; -} -``` - - -## 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. - -```less - @var: red; - - #page { - @var: white; - #header { - color: @var; // white - } - } -``` - -## Comments - -Both C-style and inline comments may be used: - -```less -/* One hell of a comment */ -@var: red; - -// Get in line! -@var: white; -``` - - -## 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 "typo.css"; -``` \ No newline at end of file diff --git a/content/Release-History.md b/content/Release-History.md deleted file mode 100644 index 7fbaee3d..00000000 --- a/content/Release-History.md +++ /dev/null @@ -1,174 +0,0 @@ -# Release History - -**TODO**: - -* Clean up v1.4.0 changes. Sort into "breaking changes", "features" and "bugs" -* Use assemble and grunt-github-api to build this dynamically from the official changelog - ---- - -### v1.4.x-beta - -> Released: 2013-03-07 - -**Breaking changes** -* maths is now only done inside brackets - disable with strictMaths -* units must be consistent - disable with strictUnits -* variables from mixins do not leak into the parent scope -* @import defaults to only importing the same file once - -**Features** -TODO... -**Bugs** -TODO... - -Unsorted - - support for `:extend()` in selectors (e.g. `input:extend(.button) {}`) and `&:extend();` in ruleset (e.g. `input { &:extend(.button all); }`) - - maths is now only done inside brackets. This means font: statements, media queries and the calc function can use a simpler format without being escaped. Disable this with --strict-maths-off in lessc and strictMaths:false in JavaScript. - - units are calculated, e.g. 200cm+1m = 3m, 3px/1px = 3. If you use units inconsistently you will get an error. Suppress this error with --strict-units-off in lessc or strictUnits:false in JavaScript - - `(~"@var")` selector interpolation is removed. Use @{var} in selectors to have variable selectors - - default behaviour of import is to import each file once. `@import-once` has been removed. - - You can specify options on imports to force it to behave as css or less `@import (less) "file.css"` will process the file as less - - variables in mixins no longer 'leak' into their calling scope - - added data-uri function which will inline an image into the output css. If ieCompat option is true and file is too large, it will fallback to a url() - - significant bug fixes to our debug options - - other parameters can be used as defaults in mixins e.g. .a(@a, @b:@a) - - an error is shown if properties are used outside of a ruleset - - added extract function which picks a value out of a list, e.g. extract(12 13 14, 3) => 3 - - added luma, hsvhue, hsvsaturation, hsvvalue functions - - added pow, pi, mod, tan, sin, cos, atan, asin, acos and sqrt math functions - - added convert function, e.g. convert(1rad, deg) => value in degrees - - lessc makes output directories if they don't exist - - lessc `@import` supports https and 301's - - lessc "-depends" option for lessc writes out the list of import files used in makefile format - - lessc "-lint" option just reports errors - - other bug fixes - ---- - -### v1.3.3 - -> Released: 2012-12-30 - - - Fix critical bug with mixin call if using multiple brackets - - when using the filter contrast function, the function is passed through if the first argument is not a color - ---- - -### v1.3.2 - -> Released: 2012-12-28 - - - browser and server url re-writing is now aligned to not re-write (previous lessc behaviour) - - url-rewriting can be made to re-write to be relative to the entry file using the relative-urls option (less.relativeUrls option) - - rootpath option can be used to add a base path to every url - - Support mixin argument seperator of ';' so you can pass comma seperated values. e.g. `.mixin(23px, 12px;);` - - Fix lots of problems with named arguments in corner cases, not behaving as expected - - hsv, hsva, unit functions - - fixed lots more bad error messages - - fix `@import-once` to use the full path, not the relative one for determining if an import has been imported already - - support `:not(:nth-child(3))` - - mixin guards take units into account - - support unicode descriptors (`U+00A1-00A9`) - - support calling mixins with a stack when using `&` (broken in 1.3.1) - - support `@namespace` and namespace combinators - - when using % with colour functions, take into account a colour is out of 256 - - when doing maths with a % do not divide by 100 and keep the unit - - allow url to contain % (e.g. %20 for a space) - - if a mixin guard stops execution a default mixin is not required - - units are output in strings (use the unit function if you need to get the value without unit) - - do not infinite recurse when mixins call mixins of the same name - - fix issue on important on mixin calls - - fix issue with multiple comments being confused - - tolerate multiple semi-colons on rules - - ignore subsequant `@charset` - - syncImport option for node.js to read files syncronously - - write the output directory if it is missing - - change dependency on cssmin to ycssmin - - lessc can load files over http - - allow calling less.watch() in non dev mode - - don't cache in dev mode - - less files cope with query parameters better - - sass debug statements are now chrome compatible - - modifyVars function added to re-render with different root variables - ---- - -### v1.3.1 - -> Released: 2012-10-18 - -- Support for comment and @media debugging statements -- bug fix for async access in chrome extensions -- new functions tint, shade, multiply, screen, overlay, hardlight, difference, exclusion, average, negation, softlight, red, green, blue, contrast -- allow escaped characters in attributes -- in selectors support @{a} directly, e.g. .a.@{a} { color: black; } -- add fraction parameter to round function -- much better support for & selector -- preserve order of link statements client side -- lessc has better help -- rhino version fixed -- fix bugs in clientside error handling -- support dpi, vmin, vm, dppx, dpcm units -- Fix ratios in media statements -- in mixin guards allow comparing colors and strings -- support for -*-keyframes (for -khtml but now supports any) -- in mix function, default weight to 50% -- support @import-once -- remove duplicate rules in output -- implement named parameters when calling mixins -- many numerous bug fixes - ---- - -### v1.3.0 - -> Released: 2012-03-10 - -- @media bubbling -- Support arbitrary entities as selectors -- [Variadic argument support](https://gist.github.com/1933613) -- Behaviour of zero-arity mixins has [changed](https://gist.github.com/1933613) -- Allow `@import` directives in any selector -- Media-query features can now be a variable -- Automatic merging of media-query conditions -- Fix global variable leaks -- Fix error message on wrong-arity call -- Fix an `@arguments` behaviour bug -- Fix `::` selector output -- Fix a bug when using @media with mixins - ---- - -### v1.2.1 - -> Released: 2012-01-15 - -- Fix imports in browser -- Improve error reporting in browser -- Fix Runtime error reports from imported files -- Fix `File not found` import error reporting - ---- - -### v1.2.0 - -> Released: 2012-01-07 - -- Mixin guards -- New function `percentage` -- New `color` function to parse hex color strings -- New type-checking stylesheet functions -- Fix Rhino support -- Fix bug in string arguments to mixin call -- Fix error reporting when index is 0 -- Fix browser support in WebKit and IE -- Fix string interpolation bug when var is empty -- Support `!important` after mixin calls -- Support vanilla @keyframes directive -- Support variables in certain css selectors, like `nth-child` -- Support @media and @import features properly -- Improve @import support with media features -- Improve error reports from imported files -- Improve function call error reporting -- Improve error-reporting \ No newline at end of file diff --git a/content/Tools.md b/content/Tools.md deleted file mode 100644 index 216674cc..00000000 --- a/content/Tools.md +++ /dev/null @@ -1,8 +0,0 @@ - - - - -**LESS2CSS** - -[LESS2CSS](http://less2css.org/) is an online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile LESS to CSS in real-time. - diff --git a/content/about/about.md b/content/about/about.md deleted file mode 100644 index 8144d6cb..00000000 --- a/content/about/about.md +++ /dev/null @@ -1,2 +0,0 @@ -LESS was developed by [Alexis Sellier](http://cloudhead.io), more commonly known as [cloudhead](http://cloudhead.io). The Less.js project is now mantained and extended by the community and the core LESS team. - diff --git a/content/about/history.md b/content/about/history.md deleted file mode 100644 index 98e08a84..00000000 --- a/content/about/history.md +++ /dev/null @@ -1,3 +0,0 @@ -LESS was created in 2009 by Alexis Sellier, more commonly known as @cloudhead. - -{{!TODO: need more background}} \ No newline at end of file diff --git a/content/about/ports.md b/content/about/ports.md deleted file mode 100644 index e9a44024..00000000 --- a/content/about/ports.md +++ /dev/null @@ -1,14 +0,0 @@ -## Java -* [LESS Engine](https://github.com/Asual/lesscss-engine) (Runs less.js in the Rhino JVM-based JavaScript interpreter) -* [LESS CSS Compiler for Java](https://github.com/marceloverdijk/lesscss-java) (Runs less.js in the Rhino JVM-based JavaScript interpreter) -* [Less4j](https://github.com/SomMeri/less4j) (Native Java implementation.) - -## .Net -* [LESS CSS for .Net](http://www.dotlesscss.org/) - -## PHP -* [lessphp](http://leafo.net/lessphp/docs/) -* [BW LESS CSS](http://wordpress.org/extend/plugins/bw-less-css/) (WordPress Plugin) - -## Ruby -* [Less.js In Ruby's V8 Engine](https://github.com/cowboyd/less.rb) \ No newline at end of file diff --git a/content/about/translations.md b/content/about/translations.md deleted file mode 100644 index 3b46b3b3..00000000 --- a/content/about/translations.md +++ /dev/null @@ -1,11 +0,0 @@ -+ Chinese: http://lesscss.net -+ Danish: http://lesscss.dk -+ French: http://luckymarmot.com/lesscss -+ German: http://lesscss.de -+ Indonesian: http://bertzzie.com/post/7/dokumentasi-less-bahasa-indonesia -+ Japanese: http://less-ja.studiomohawk.com/ -+ Polish: http://ciembor.github.com/lesscss.org/ -+ Portugese: http://giovanneafonso.github.io/lesscss.org/ -+ Russian: http://lesscss.ru -+ Ukrainian: http://komaval.github.com/lesscss.org/ -+ Belorussian: (Out of date) http://www.designcontest.com/show/lesscss-be \ No newline at end of file diff --git a/content/doc.md b/content/doc.md deleted file mode 100644 index 660757d7..00000000 --- a/content/doc.md +++ /dev/null @@ -1,288 +0,0 @@ - -## Nested Media Queries - -Media queries can be nested in the same way as selectors e.g. - -``` - .one { - @media (width: 400px) { - font-size: 1.2em; - @media print and color { - color: blue; - } - } - } -``` - -Will output - -``` - @media (width: 400px) { - .one { - font-size: 1.2em; - } - } - @media (width: 400px) and print and color { - .one { - color: blue; - } - } -``` - -## Importing - -You can import both CSS and LESS files. Only LESS files import statements are processed, CSS file import statements are kept as they are. If you want to import a CSS file, and don't want LESS to process it, just use the `.css` extension: - -``` - @import "lib.css"; -``` - -Compilation makes only one change to CSS file imports: top level CSS file imports are moved on top of the sheet, right after @charset declarations. - -Input file with import statement: - -``` - h1 { color: green; } - @import "import/official-branding.css?urlParameter=23"; -``` - -import statement has been moved on top: - -``` - @import "import/official-branding.css?urlParameter=23"; - h1 { color: green; } -``` - -Content of imported LESS file is copied into importing style sheet and compiled together with it. Importing and imported files share all mixins, namespaces, variables and other structures. - -In addition, if the import statement has media queries specified in it, imported content is enclosed in the `@Media` declaration. - -Imported "library.less": - -``` - @imported-color: red; - h1 { color: green; } -``` - -Main file imports the above library.less file: - -``` - @import "library.less" screen and (max-width: 400px); // import with media queries - @import "library.less"; // import without media queries - - .class { - color: @importedColor; // use imported variable - } -``` - -Compiled output: - -``` - // Corresponds to import with media queries - @media screen and (max-width: 400px) { - h1 { color: green; } - } - - // Corresponds to import without media queries - h1 { color: green; } - .class { - // Use imported variable - color: #ff0000; - } -``` - -LESS file import statement does not have to be located on top of the style sheet. It can be placed also inside rulesets, mixins or other LESS structures. - -Import into ruleset: - -``` - pre { - @import "library.less"; - color: @importedColor; - } -``` - -both variable and ruleset defined in "library.less" have been copied into the `pre` ruleset: - -``` - pre { - color: #ff0000; // variable defined in library.less was available - } - pre h1 { // ruleset defined in library.less was nested into 'pre' ruleset - color: green; - } -``` - -In v1.3.0 - v1.3.3 `@import` imports a file multiple times and you can override this behaviour with `@import-once`. - -In v1.4.0 `@import-once` has been removed and `@import` imports once by default. This means that with the following - -``` - @import "file.less"; - @import "file.less"; -``` - -The second file is ignored. - -Any file that does not end with `.css` is considered less file and processed. In addition, if the file name has no extension or parameters, the ".less" suffix is added on the end. Both of these are equivalent: - -``` - @import "lib.less"; - @import "lib"; -``` - -In v1.4.0 you can force a file to be interpreted as a particular type by specifying an option, e.g. - -``` - @import (css) "lib"; -``` - -Will output.. - -``` - @import "lib"; -``` - -and - -``` - @import (less) "lib.css"; -``` - -Will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added. - - -## String interpolation - -Variables can be embedded inside strings in a similar way to Ruby or PHP, with the `@{name}` construct: - -``` - @base-url: "http://assets.fnord.com"; - background-image: url("@{base-url}/images/bg.png"); -``` - -## Escaping - -Sometimes you might need to output a CSS value which is either not valid CSS syntax, -or uses proprietary syntax which LESS doesn't recognize. - -To output such value, we place it inside a string prefixed with `~`, for example: - -``` - .class { - filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; - } -``` - -This is called an "escaped value", which will result in: - -``` - .class { - filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); - } -``` - -Escaped values can use the interpolation exactly the same way as strings: - -``` - .class { - @what: "Stuff"; - filter: ~"ms:alwaysHasItsOwnSyntax.For.@{what}()"; - } -``` - - -## Selector Interpolation - -If you want to use LESS variables inside selectors, you can do this by referencing the variable using `@{selector}` as -in string interpolation. For example: - -``` - @name: blocked; - .@{name} { - color: black; - } -``` - -will output - -``` - .blocked { - color: black; - } -``` - -Note: prior to LESS 1.3.1 a `(~"@{name}")` type of selector was supported. Support for this will be removed in 1.4.0. - - -## Media Queries as Variables - -If you want to use less variables inside media, you can do this using the usual variable variable referencing syntax `@variable`. For example: - -``` - @singleQuery: ~"(max-width: 500px)"; - @media screen, @singleQuery { - set { - padding: 3 3 3 3; - } - } -``` - -compiles into: - -``` - @media screen, (max-width: 500px) { - set { - padding: 3 3 3 3; - } - } -``` - -The variable must contain whole media query. This would cause an error: `@media screen and @partial {`. - -In 1.4.0, without strict maths off, you can also include variables in media values, e.g. `@media screen, (max-width: @width) {`. - -## JavaScript evaluation - -JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature -as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If possible, try to think of a -function that can be added to achieve the same purpose and ask for it on github. We have plans to allow expanding the -default functions available. However, if you still want to use JavaScript in .less, this is done by wrapping the expression -with back-ticks: - -``` - @var: `"hello".toUpperCase() + '!'`; -``` - -Becomes: - -``` - @var: "HELLO!"; -``` - -Note that you may also use interpolation and escaping as with strings: - -``` - @str: "hello"; - @var: ~`"@{str}".toUpperCase() + '!'`; -``` - -Becomes: - -``` - @var: HELLO!; -``` - -It is also possible to access the JavaScript environment: - -``` - @height: `document.body.clientHeight`; -``` - -If you want to parse a JavaScript string as a hex color, you may use the `color` function: - -``` - @color: color(`window.colors.baseColor`); - @darkcolor: darken(@color, 10%); -``` - diff --git a/content/examples/data-URI.md b/content/examples/data-URI.md deleted file mode 100644 index 3ffa6c00..00000000 --- a/content/examples/data-URI.md +++ /dev/null @@ -1,42 +0,0 @@ -Here's a little bash script that converts a folder full of PNGs to a .less file, designed to be included in a "main" .less file, referencing all images encoded as base64 data URIs, along with their sizes. - - #!/bin/bash - - SRC="$1" - DST="$2" - TMP="$(mktemp)" - - find "$SRC" -name "*.png" | while read i; do - j="$(basename "$i")" - f="$(echo "${j%.png}" | tr "@#&%+-. " "_")" - echo "@gfx_$f: \"data:$(file -b --mime-type "$i");base64,$(base64 -w0 "$i")\";" - echo "@size_$f: $(gm identify -format "%wpx %hpx" "$i" 2>/dev/null);" - done > "$TMP"; - mv "$TMP" "$DST" - -You may need to change paths/params to `mktemp`, `file`, `base64` and `gm` [GraphicsMagick] according to your setup. - -Say you have UITableNextButton.png and UITableNextButton@2x.png in your source folder, the script produces this result (base64 data cut to save space) : - - @gfx_UITableNextButton: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAfCAYAAAA(...)"; - @size_UITableNextButton: 29px 31px; - @gfx_UITableNextButton_2x: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA+CAYA(...)"; - @size_UITableNextButton_2x: 58px 62px; - -This allows you to create a .less file like this: - - @import "gfx.less" //file produced by the script - .UITableNextButton { - background: url(@gfx_UITableNextButton) no-repeat center center; - -webkit-background-size: @size_UITableNextButton; - } - - @media only screen and (-webkit-min-device-pixel-ratio: 2) { - .UITableNextButton { - background-image: url(@gfx_UITableNextButton_2x); - } - } - -That speeds things a lot and keeps your code nice, clean, and readable. - -You can put lots of .png files in your source folder, the final compilation of your .less file will only include the assets needed and drop the ones unused. \ No newline at end of file diff --git a/content/examples/example.md b/content/examples/example.md deleted file mode 100644 index 65edc616..00000000 --- a/content/examples/example.md +++ /dev/null @@ -1,21 +0,0 @@ -Write some LESS: - -```less -@base: #f938ab; - -.box-shadow(@style, @c) when (iscolor(@c)) { - -webkit-box-shadow: @style @c; - -moz-box-shadow: @style @c; - box-shadow: @style @c; -} -.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { - .box-shadow(@style, rgba(0, 0, 0, @alpha)); -} -.box { - color: saturate(@base, 5%); - border-color: lighten(@base, 30%); - div { - .box-shadow(0 0 5px, 30%) - } -} -``` \ No newline at end of file diff --git a/content/features.md b/content/features.md deleted file mode 100644 index 9c8f636e..00000000 --- a/content/features.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -published: false -description: feature reference ---- - -WIP - this needs to be updated to be a "TOC" for features. - -# LESS Features - - -## Major Features - - * Variables - * Mixins - * Parametric Mixins - * Extends - * Pattern Matching - * Nested Rules - * Operations - * Functions - * Namespaces - * Scope - * Comments - * Importing - -## Usage - - * Command Line - * Processing Options - - - -Data URI, Base64-Encoded Images - - - -Selectors - Rule Sets - Parent Reference - -Interpolation -Selector Interpolation - -Built-in Functions - - - - -Rest Params -Comments -Conditionals -Iteration -@import -@media -@font-face -@keyframes -@extend -url() -CSS Literal -CSS Style Syntax -Char Escaping -Executable -Error Reporting -Connect Middleware -Introspection API -JavaScript API -CSS3 Extensions with Nib -Try Stylus Online! \ No newline at end of file diff --git a/content/features/Parent-Selectors.md b/content/features/Parent-Selectors.md deleted file mode 100644 index 7e682658..00000000 --- a/content/features/Parent-Selectors.md +++ /dev/null @@ -1,65 +0,0 @@ - - -# Parent selectors -> changing selector order, using :hover in a nested rule - - -When using **Nested rules**, it can be very useful to prepend a selector to the inherited (parent) scope. This feature is known as "Parent Selectors", and can be done by putting the parent selector before an ampersand `&`. - -For example, when using Modernizr, you might want to specify different rules based on supported features: - -```css -.header { - .menu { - border-radius: 5px; - .no-borderradius & { - background-image: url('images/button-background.png'); - } - } -} -``` - -The selector `.no-borderradius &` will be combined with the inherited scope, `.header .menu`, to form the selector `.no-borderradius .header .menu`. - -```css -.header .menu { - border-radius: 5px; -} -.no-borderradius .header .menu { - background-image: url('images/button-background.png'); -} -``` - -## Advanced Usage of `&` - -The & symbol can be used in selectors in order to reverse the ordering of the nesting and to multiply classes. - -For example: - -``` - .child, .sibling { - .parent & { - color: black; - } - & + & { - color: red; - } - } -``` - -Will output - -``` - .parent .child, - .parent .sibling { - color: black; - } - .child + .child, - .child + .sibling, - .sibling + .child, - .sibling + .sibling { - color: red; - } -``` - -You can also use & in mixins in order to reference nesting that is outside of your mixin. diff --git a/content/features/css-guards.md b/content/features/css-guards.md deleted file mode 100644 index f33924b7..00000000 --- a/content/features/css-guards.md +++ /dev/null @@ -1,25 +0,0 @@ - - -# CSS Guards -> if's around selectors - -Guards can also be applied to css selectors, which is syntactic sugar for declaring the mixin and then calling it immediately. - -For instance, before 1.5.0 you would have had to do this. - -```less -.my-optional-style() when (@my-option = true) { - button { - color: white; - } -} -.my-optional-style(); -``` - -you can now write the guard straight on to styles - -```less -button when (@my-option = true) { - color: white; -} -``` \ No newline at end of file diff --git a/content/features/default-function.md b/content/features/default-function.md deleted file mode 100644 index 1723fa9f..00000000 --- a/content/features/default-function.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -published: false ---- -From: [@seven-phases-max/pr#1606](https://github.com/less/less.js/pull/1606) - - -# Default Function -> Available inside guard conditions and returns `true` only if no other mixin matches. (see #1584) - -## Usage: - -```less -mixin(1) {x: 11} -mixin(2) {y: 22} -mixin(@x) when (default()) {z: @x} - -div { - mixin(3); -} - -div.special { - mixin(1); -} - -``` -### Expressions - -It is possible to use the value returned by `default` with guard operators. For example `.mixin() when not(default()) {}` will match only if there's at least one more mixin definition that matches`.mixin()` call: - -```less -.mixin(@value) when (ispixel(@value)) {width: @value} -.mixin(@value) when not(default()) {padding: (@value / 5)} - -div-1 { - .mixin(100px); -} - -div-2 { - /* ... */ - .mixin(100%); -} -``` -result: - -```less -div-1 { - width: 100px; - padding: 20px; -} -div-2 { - /* ... */ -} -``` - -Another example: - -```less -.expr-example { - .m(@x) when (@x = true) {v1: @x} - .m(@x) when (@x = false) {v2: @x} - .m(@x) when (@x = default()) {v3: @x} - - &-true {.m(true)} - &-false {.m(false)} -} -``` -result: - -```less -.expr-example-true { - v1: true; -} -.expr-example-false { - v2: false; - v3: false; -} -``` - -### Outside of guards - -`default` is available as built-in function only inside guard expressions. If used outside of a mixin guard condition it is interpreted as a regular CSS value: - -```less -div { - property1: default(); - property2: default(42); -} -``` -result: - -```less -div { - property1: default(); - property2: default(42); -} -``` - -### Advanced usage and multiple `default()` calls -It is allowed to make multiple `default()` calls in the same guard condition or in a different conditions of a mixins with the same name: - -```less -div { - .m(@x) when (default()), not(default()) {always: @x} - .m(@x) when (default()) and not(default()) {never: @x} - - .m(1); // OK -} -``` -However LESS will throw a error if it detects a *potential* conflict between multiple mixin definitions using `default()`: - -```less -div { - .m(@x) when (default()) {} - .m(@x) when not(default()) {} - - .m(1); // Error -} -``` -In above example it is impossible to determine what value each `default()` call should return since they recursively depend on each other. - -This "multiple `default()` calls" analysis is not too deep and very simple as its main intention is mostly to notify a user of possibly incorrect `default` usage, hence -> detects a *potential* conflict - -The following also causes a error: - -```less -div { - .m(@x) when (default()) {default: @x} // (1) - .m(@x) when not(default()) {not-default: @x} // (2) - .m(3) {case-3: 3} // (3) - - .m(3); // Error -} -``` -Although there's no direct conflict with `.m(3);` since (1) and (2) do not interfere because of (3), the whole mixin family is interpreted as erroneous (basically, it is the same error as in previous example). - -And finally, here's advanced *correct* "multiple `default()` calls" usage (not too practical perhaps, but to illustrate why this is allowed at all): - -```less -.x { - .m(red) {case-1: darkred} - .m(blue) {case-2: darkblue} - .m(@x) when (iscolor(@x)) and (default()) {default-color: @x} - .m('foo') {case-1: I am 'foo'} - .m('bar') {case-2: I am 'bar'} - .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default} - - &-blue {.m(blue)} - &-green {.m(green)} - &-foo {.m('foo')} - &-baz {.m('baz')} -} -``` -result: - -```less -.x-blue { - case-2: #00008b; -} -.x-green { - default-color: #008000; -} -.x-foo { - case-1: I am 'foo'; -} -.x-baz { - default-string: and I am the default; -} -``` -[And more examples in included tests...](https://github.com/seven-phases-max/less.js/blob/mutually-exclusive-guards/test/less/mixins-guards-default-func.less) \ No newline at end of file diff --git a/content/features/extend.md b/content/features/extend.md deleted file mode 100644 index 9a5bfaa2..00000000 --- a/content/features/extend.md +++ /dev/null @@ -1,540 +0,0 @@ - - -# Extend -> Extend is a LESS Pseudo-Class which merges the selector it is put on with ones that match what it references. - -Released [v1.4.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -## Overview - -```less -nav ul { - &:extend(.inline); - background: blue; -} -``` -In the rule set above, the `:extend` selector will apply the "extending selector" (`nav ul`) onto the `.inline` class _wherever the `.inline` class appears_. The declaration block will be kept as-is, but without any reference to the extend (because extend isn't css). - -So the following: - -```less -nav ul { - &:extend(.inline); - background: blue; -} -.inline { - color: red; -} -``` -Outputs -```css -nav ul { - background: blue; -} -.inline, -nav ul { - color: red; -} -``` - -Notice how the `nav ul:extend(.inline)` selector gets output as `nav ul` - the extend gets removed before output and the selector block left as-is. If no properties are put in that block then it gets removed from the output (but the extend still may affect other selectors). - -## Syntax Overview -The extend is either attached to a selector or placed into a ruleset. It looks like a pseudoclass with selector parameter optionally followed by the keyword `all`: - -Example: - -```less -.a:extend(.b) { -} -// the above block does the same thing as the below block -.a { - &:extend(.b); -} -``` - -```less -.c:extend(.d all) { - // extends all instances of ".d" e.g. ".x.d" or ".d.x" -} -.c:extend(.d) { - // extends only instances where the selector will be output as just ".d" -} -``` - -It can contain one more classes to extend, seperated by commas. - -Example: - -```less -.e:extend(.f) { -} -.e:extend(.g) { -} -// the above an the below do the same thing -.e:extend(.f, .g) { -} -``` - -### Attached to Selector -Extend attached to a selector looks like an ordinary pseudoclass with selector as a parameter. A selector can contain multiple extend clauses, but all extends must be at the end of the selector. - -* Extend after the selector: `pre:hover:extend(div pre)`. -* Space between selector and extend is allowed: `pre:hover :extend(div pre)`. -* Multiple extends are allowed: `pre:hover:extend(div pre):extend(.bucket tr)` - Note this is the same as `pre:hover:extend(div pre, .bucket tr)` -* This is NOT allowed: `pre:hover:extend(div pre).nth-child(odd)`. Extend must be last. - -If a ruleset contains multiple selectors, any of them can have the extend keyword. Multiple selectors with extend in one ruleset: -``` -.big-bucket:extend(.bucket), .big-bag:extend(.bag), .big-division { - // body -} -``` - -### Inside Ruleset -Extend can be placed into rulesets body using `&:extend(selector)` syntax. Placing extend into a body is a shortcut for placing it into every single selector of that ruleset. - - -Extend inside a body: -``` -pre:hover, .some-class { - &:extend(div pre); -} -``` - -is exactly the same as adding an extend after each selector: -``` -pre:hover:extend(div pre), .some-class:extend(div pre) { -} -``` - -### Nested Selectors -Extend is able to match nested selectors. Following less: - -Example: - -``` -.bucket { - tr { // nested ruleset with target selector - color: blue; - } -} -.some-class:extend(.bucket tr) { } // nested ruleset is recognized -``` -Outputs -``` -.bucket tr, .some-class { - color: blue; -} -``` - -Essentially the extend looks at the compiled css, not the original less. - -Example: - -``` -.bucket { - tr & { // nested ruleset with target selector - color: blue; - } -} -.some-class:extend(tr .bucket) { } // nested ruleset is recognized -``` -Outputs -``` -tr .bucket, .some-class { - color: blue; -} -``` - - -### Exact Matching -Extend by default looks for exact match between selectors. It does matter whether selector uses leading start or not. It does not matter that two nth-expressions have the same meaning, they need to have to same form in order to be matched. The only exception are quotes in attribute selector, less knows they have the same meaning and matches them. - -Example: - -``` -.a.class, -.class.a, -.class > .a { - color: blue; -} -.test:extend(.class) {} // this will NOT match the any selectors above -``` - -Leading star does matter. Selectors `*.class` and `.class` are equivalent, but extend will not match them: -``` -*.class { - color: blue; -} -.noStar:extend(.class) {} // this will NOT match the *.class selector -``` -Outputs -``` -*.class { - color: blue; -} -``` - -Order of pseudoclasses does matter. Selectors `link:hover:visited` and `link:visited:hover` match the same set of elements, but extend treats them as different: -``` -link:hover:visited { - color: blue; -} -.selector:extend(link:visited:hover) {} -``` -Outputs -``` -link:hover:visited { - color: blue; -} -``` - -Nth expression form does matter. Nth-expressions `1n+3` and `n+3` are equivalent, but extend will not match them: -``` -:nth-child(1n+3) { - color: blue; -} -.child:extend(n+3) {} // -``` -Outputs -``` -:nth-child(1n+3) { - color: blue; -} -``` - -Quote type in attribute selector does not matter, all are equivalent. - -Example: - -``` -[title=identifier] { - color: blue; -} -[title='identifier'] { - color: blue; -} -[title="identifier"] { - color: blue; -} -.noQuote:extend([title=identifier]) {} -.singleQuote:extend([title='identifier']) {} -.doubleQuote:extend([title="identifier"]) {} -``` -Outputs -``` -[title=identifier], .noQuote, .singleQuote, .doubleQuote { - color: blue; -} -[title='identifier'], .noQuote, .singleQuote, .doubleQuote { - color: blue; -} -[title="identifier"], .noQuote, .singleQuote, .doubleQuote { - color: blue; -} -``` - -## Extend All - -When you specify the all keyword last in an extend argument it tells less to match that selector as part of another selector. The selector will be copied and the matched part of the selector only will then be replaced with the extend, making a new selector. - -Example: - -```less -.a.b.test, -.test.c { - color: orange; -} -.test { - &:hover { - color: green; - } -} - -.replacement :extend(.test all) { -} - -``` -Outputs -```css -.a.b.test, -.test.c, -.a.b.replacement, -.replacement.c { - color: orange; -} -.test:hover, -.replacement:hover { - color: green; -} -``` - -You can think of this mode of operation as essentially doing a non-destructive search and replace. - -### Selector Interpolation -Extend is NOT able to match selectors with variables. If selector contains variable, extend will ignore it. There is a pending feature request for this but it is not an easy change. -However, extend can be attached to interpolated selector. - -Selector with variable will not be matched: -``` -@variable: .bucket; -@{variable} { // interpolated selector - color: blue; -} -.some-class:extend(.bucket) { } // does nothing, match is not found -``` - -and extend with variable in target selector matches nothing: -``` -.bucket { - color: blue; -} -.some-class:extend(@{variable}) { } // interpolated selector matches nothing -@variable: .bucket; -``` - -Two previous examples compile into: -``` -.bucket { - color: blue; -} -``` - -Extend attached to interpolated selector works: -``` -.bucket { - color: blue; -} -@{variable}:extend(.bucket) { } -@variable: .selector; -``` - -previous less compiles into: -``` -.bucket, .selector { - color: blue; -} -``` - -## Scoping / Extend Inside Media - -Extend written inside media declaration should matches only selectors inside that media declaration: -``` -@media print { - .screenClass:extend(.selector) {} // extend inside media - .selector { // this will be matched - it is in the same media - color: black; - } -} -.selector { // ruleset on top of style sheet - extend ignores it - color: red; -} -@media screen { - .selector { // ruleset inside another media - extend ignores it - color: blue; - } -} -``` - -compiles into: -``` -@media print { - .selector, .screenClass { // ruleset inside the same media was extended - color: black; - } -} -.selector { // ruleset on top of style sheet was ignored - color: red; -} -@media screen { - .selector { // ruleset inside another media was ignored - color: blue; - } -} -``` - -Extend written inside media declaration does not match selectors inside nested declaration: -``` -@media screen { - .screenClass:extend(.selector) {} // extend inside media - @media (min-width: 1023px) { - .selector { // ruleset inside nested media - extend ignores it - color: blue; - } - } -} -``` - -compiles into: -``` -@media screen and (min-width: 1023px) { - .selector { // ruleset inside another nested media was ignored - color: blue; - } -} -``` - -Top level extend matches everything including selectors inside nested media: -``` -@media screen { - .selector { // ruleset inside nested media - top level extend works - color: blue; - } - @media (min-width: 1023px) { - .selector { // ruleset inside nested media - top level extend works - color: blue; - } - } -} - -.topLevel:extend(.selector) {} // top level extend matches everything -``` - -compiles into: -``` -@media screen { - .selector, .topLevel { // ruleset inside media was extended - color: blue; - } -} -@media screen and (min-width: 1023px) { - .selector, .topLevel { // ruleset inside nested media was extended - color: blue; - } -} -``` - -### Duplication Detection - -There is not currently any duplication detection. - -Example: - -```css -.alert-info, .widget { - // declarations -} - -.alert:extend(.alert-info, .widget) { -} -``` -Outputs -```css -.alert, .widget, .alert, .alert-info { - // declarations -} -``` - -## Use Cases - -### Classic Use Case - -The classic use case is to avoid adding a base class. For example, if you have - -```css -.animal { - background-color: black; - color: white; -} -``` - -and you want to have a subtype of animal which overrides the background color then you have two options, firstly change your html - -```html -Bear -``` -```css -.animal { - background-color: black; - color: white; -} -.bear { - background-color: brown; -} -``` - -or have simplified html and use extend in your less. e.g. - -```html -Bear -``` -```css -.animal { - background-color: black; - color: white; -} -.bear { - &:extend(.animal); - background-color: brown; -} -``` - -### 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. - -Example - with mixin: - -```less -.my-inline-block() { - display: inline-block; - font-size: 0; -} -.thing1 { - .my-inline-block; -} -.thing2 { - .my-inline-block; -} -``` -Outputs -```css -.thing1 { - display: inline-block; - font-size: 0; -} -.thing2 { - display: inline-block; - font-size: 0; -} -``` - -Example (with extends): - -```less -.my-inline-block { - display: inline-block; - font-size: 0; -} -.thing1 { - &:extend(.my-inline-block); -} -.thing2 { - &:extend(.my-inline-block); -} -``` -Outputs -```css -.my-inline-block, -.thing1, -.thing2 { - display: inline-block; - font-size: 0; -} -``` - -### Combining Styles / a more advanced mixin - -Another use-case is as an alternative for a mixin - because mixins can only be used with simple selectors, if you have two different blocks on html, but need to apply the same styles to both you can use extends to relate two areas. - -Example: - -```less -li.list > a { - // list styles -} -button.list-style { - &:extend(li.list > a); // use the same list styles -} -``` \ No newline at end of file diff --git a/content/features/import-directives.md b/content/features/import-directives.md deleted file mode 100644 index 4a7c853f..00000000 --- a/content/features/import-directives.md +++ /dev/null @@ -1,134 +0,0 @@ - - -# Import Directives -> How to combine files - -Standard CSS Import statements may be treated differently by less depending on the file extension. If the file has a css extension, it will be treated as css and the import statement left as-is (see the inline option below). If it has any other extension it will be treated as less and imported. -If it does not have an extension, ".less" will be appended and it will be included as a imported less file. - -Example: -``` -@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.css"; // statement left as-is -``` - -See the options below which can override this behaviour. - -# Import Options -> LESS offers several extensions to the CSS `@import` directive to provide more flexibility over what you can do with external files. - -Syntax: `@import (keyword) "filename";` - -The following import directives have been implemented: - -* `reference`: use a less file but do not output it -* `once`: only include the file once (default behaviour) -* `inline`: include the sourcefile in the output but do not process -* `less`: treat the file as a less file, no matter what the file extension -* `css`: treat the file as a css file, no matter what the file extension -* `multiple`: include the file multiple times - - -## reference -> Use `@import (reference)` to import external files, but without adding the imported styles to the compiled output unless referenced. - -Released [v1.5.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -Example: `@import (reference) "foo.less";` - -`reference` is one of the most powerful features in the LESS language. Imagine that `reference` marks every directive and selector with a _reference flag_ in the imported file, imports as normal, but when the CSS is generated, "reference" selectors (as well as any media queries containing only reference selectors) are not output. `reference` styles will not show up in your generated CSS unless the reference styles are used as [mixins][] or [extended][]. - -Additionally, **`reference`** produces different results depending on which method was used (mixin or extend): - -* **[extend](#extend)**: When a selector is extended, only the new selector is marked as _not referenced_, and it is pulled in at the position of the reference `@import` statement. -* **[mixins](#mixins)**: When a `reference` style is used as an [[implicit mixin|Mixins]], its rules are are mixed-in, marked "not reference", and appear in the referenced place as normal. - -### reference example -This allows you to pull in only specific, targeted styles from a library such as [Bootstrap](https://github.com/twbs/bootstrap) by doing something like this: - -```less -.navbar:extend(.navbar all) {} -``` - -And you will pull in only `.navbar` related styles from Bootstrap. - - -## inline -> Use `@import (inline)` to include external files, but not process them. - -Released [v1.5.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -Example: `@import (inline) "not-less-compatible.css";` - -You will use this when a css file may not be less compatible - this is because although less supports most known standards css, it does not support comments in some places and does not support all known css hacks without modifying the css. -So you can use this to include the file in the output so that all css will be in one file. - -## less -> Use `@import (less)` to treat imported files as LESS, regardless of file extension. - -Released [v1.4.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -Example: - -```less -@import (less) "foo.css"; -``` - -## css -> Use `@import (css)` to treat imported files as regular CSS, regardless of file extension. This means the import statement will be left as it is. - -Released [v1.4.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -Example: - -```less -@import (css) "foo.less"; -``` -outputs -```less -@import "foo.less"; -``` - - -## once -> The default behavior of `@import` statements. It means the file is imported only once and subsequent import statements for that file will be ignored. - -Released [v1.4.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -This option is automatically enabled by default on all `@import` statements. - -Example: - -```less -@import (once) "foo.less"; -@import (once) "foo.less"; // this statement will be ignored -``` - - -## multiple -> Use `@import (multiple)` to allow importing of multiple files with the same name. This is the opposite behaviour to once. - -Released [v1.4.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -Example: - -```less -// file: foo.less -.a { - color: green; -} -// file: main.less -@import (once) "foo.less"; -@import (once) "foo.less"; -``` -Outputs -```less -.a { - color: green; -} -.a { - color: green; -} -``` diff --git a/content/features/loops.md b/content/features/loops.md deleted file mode 100644 index 3739e0fd..00000000 --- a/content/features/loops.md +++ /dev/null @@ -1,57 +0,0 @@ - - -# Loops -> Creating loops - -In LESS a mixin can call itself. Such recursive mixins, when combined with [Guard Expressions](#) and [Pattern Matching](#), can be used to create various iterative/loop structures. - -Example: -```less -.loop(@counter) when (@counter > 0) { - .loop((@counter - 1)); // next iteration - width: (10px * @counter); // code for each iteration -} - -div { - .loop(5); // launch the loop -} -``` -Output: -```css -div { - width: 10px; - width: 20px; - width: 30px; - width: 40px; - width: 50px; -} -``` - -The typical example of using a recursive loop to generate CSS grid classes: -```less -.generate-columns(4); - -.generate-columns(@n, @i: 1) when (@i <= @n) { - - .column-@{i} { - width: (@i * 100% / @n); - } - - .generate-columns(@n, (@i + 1)); -} -``` -Output: -```css -.column-1 { - width: 25%; -} -.column-2 { - width: 50%; -} -.column-3 { - width: 75%; -} -.column-4 { - width: 100%; -} -``` diff --git a/content/features/merge.md b/content/features/merge.md deleted file mode 100644 index f177398e..00000000 --- a/content/features/merge.md +++ /dev/null @@ -1,30 +0,0 @@ - - -# Merge -> Combine properties - -The `merge` feature allows for aggregating values from multiple properties into a comma separated list under a single property. `merge` is useful for properties such as background and transform. - -Released [v1.5.0](https://github.com/less/less.js/blob/master/CHANGELOG.md) - -Example: - -```less -.mixin() { - box-shadow+: inset 0 0 10px #555; -} -.myclass { - .mixin(); - box-shadow+: 0 0 20px black; -} -``` -Outputs -```css -.myclass { - box-shadow: inset 0 0 10px #555, 0 0 20px black; -} -``` - -To avoid any unintentional joins, `merge` requires an explicit `+` flag on each join pending declaration. - -Note: although convention on the transform property is to have space separated, comma separation is supported which is why there is no option on this feature for whether to generate space or comma separated. diff --git a/content/features/mixin-guards.md b/content/features/mixin-guards.md deleted file mode 100644 index 9db37cba..00000000 --- a/content/features/mixin-guards.md +++ /dev/null @@ -1,115 +0,0 @@ - - -# Mixin Guards -> Conditional mixins - -Guards are useful when you want to match on *expressions*, as opposed to simple values or arity. If you are -familiar with functional programming, you have probably encountered them already. - -In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement -conditional execution via **guarded mixins** instead of if/else statements, in the vein of `@media` -query feature specifications. - -Let's start with an example: - -```less -.mixin (@a) when (lightness(@a) >= 50%) { - background-color: black; -} -.mixin (@a) when (lightness(@a) < 50%) { - background-color: white; -} -.mixin (@a) { - color: @a; -} -``` - -The key is the **`when`** keyword, which introduces a guard sequence (here with only one guard). Now if we run the following -code: - -```less -.class1 { .mixin(#ddd) } -.class2 { .mixin(#555) } -``` - -Here's what we'll get: - -```css -.class1 { - background-color: black; - color: #ddd; -} -.class2 { - background-color: white; - color: #555; -} -``` - -The full list of comparison operators usable in guards are: **`> >= = =< <`**. Additionally, the keyword `true` -is the only truthy value, making these two mixins equivalent: - -``` -.truth (@a) when (@a) { ... } -.truth (@a) when (@a = true) { ... } -``` - -Any value other than the keyword `true` is falsy: - -```less -.class { - .truth(40); // Will not match any of the above definitions. -} -``` - -Guards can be separated with a comma '`,`'--if any of the guards evaluates to true, it's -considered as a match: - -```less -.mixin (@a) when (@a > 10), (@a < -10) { ... } -``` - -Note that you can also compare arguments with each other, or with non-arguments: - -``` - @media: mobile; - - .mixin (@a) when (@media = mobile) { ... } - .mixin (@a) when (@media = desktop) { ... } - - .max (@a; @b) when (@a > @b) { width: @a } - .max (@a; @b) when (@a < @b) { width: @b } -``` - -Lastly, if you want to match mixins based on value type, you can use the *is\** functions: - -``` - .mixin (@a; @b: 0) when (isnumber(@b)) { ... } - .mixin (@a; @b: black) when (iscolor(@b)) { ... } -``` - -Here are the basic type checking functions: - -* `iscolor` -* `isnumber` -* `isstring` -* `iskeyword` -* `isurl` - -If you want to check if a value, in addition to being a number, is in a specific unit, you may use one of: - -* `ispixel` -* `ispercentage` -* `isem` -* `isunit` - -Last but not least, you may use the **`and`** keyword to provide additional conditions inside a guard: - -``` - .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } -``` - -And the **`not`** keyword to negate conditions: - -``` - .mixin (@b) when not (@b > 0) { ... } -``` \ No newline at end of file diff --git a/content/features/mixins-as-functions.md b/content/features/mixins-as-functions.md deleted file mode 100644 index 76362e49..00000000 --- a/content/features/mixins-as-functions.md +++ /dev/null @@ -1,49 +0,0 @@ - - -# Mixins as Functions -> Return variables from mixins - -All variables defined in a mixin are visible and can be used in caller's scope (unless the caller defines its own variable with the same name). - -Example: -```less -.mixin() { - @width: 100%; - @height: 200px; -} - -.caller { - .mixin(); - width: @width; - height: @height; -} - -``` -Output: -```css -.caller { - width: 100%; - height: 200px; -} -``` - -Thus variables defined in a mixin can act as its return values. This allows us to create a mixin that can be used almost like a function. - -Example: -```less -.average(@x, @y) { - @average: ((@x + @y) / 2); -} - -div { - .average(16px, 50px); // "call" the mixin - padding: @average; // use its "return" value -} - -``` -Output: -```css -div { - padding: 33px; -} -``` diff --git a/content/features/mixins-parametric.md b/content/features/mixins-parametric.md deleted file mode 100644 index b3b10ca6..00000000 --- a/content/features/mixins-parametric.md +++ /dev/null @@ -1,234 +0,0 @@ - - -# Parametric Mixins -> How to pass arguments to mixins - -Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in. - -For example: - -```less -.border-radius (@radius) { - border-radius: @radius; - -moz-border-radius: @radius; - -webkit-border-radius: @radius; -} -``` - -And here's how we can mix it into various rulesets: - -```less -#header { - .border-radius(4px); -} -.button { - .border-radius(6px); -} -``` - -Parametric mixins can also have default values for their parameters: - -```less -.border-radius (@radius: 5px) { - -moz-border-radius: @radius; - -webkit-border-radius: @radius; - border-radius: @radius; -} -``` - -We can invoke it like this now: - -```less -#header { - .border-radius; -} -``` - -And it will include a 5px border-radius. - -You can also use parametric mixins which don't take parameters. This is useful if you want to hide the ruleset from the CSS output, -but want to include its properties in other rulesets: - -```less -.wrap () { - text-wrap: wrap; - white-space: -moz-pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; -} - -pre { .wrap } -``` - -Which would output: - -```css -pre { - text-wrap: wrap; - white-space: -moz-pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; -} -``` - -### Mixins With Multiple Parameters -Parameters are either *semicolon* or *comma* separated. It is recommended to use *semicolon*. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator. - -Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists: - -* two arguments and each contains comma separated list: `.name(1, 2, 3; something, else)`, -* three arguments and each contains one number: `.name(1, 2, 3)`, -* use dummy semicolon to create mixin call with one argument containing comma separated css list: `.name(1, 2, 3;)`, -* comma separated default value: `.name(@param1: red, blue;)`. - -It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. `.mixin(green);`, then properties of all mixins with exactly one mandatory parameter will be used: - -```less -.mixin(@color) { - color-1: @color; -} -.mixin(@color; @padding:2) { - color-2: @color; - padding-2: @padding; -} -.mixin(@color; @padding; @margin: 2) { - color-3: @color; - padding-3: @padding; - margin: @margin @margin @margin @margin; -} -.some .selector div { - .mixin(#008000); -} -``` - -compiles into: - -```css -.some .selector div { - color-1: #008000; - color-2: #008000; - padding-2: 2; -} -``` - - -### The `@arguments` variable - -`@arguments` has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful -if you don't want to deal with individual parameters: - -```less -.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; -} -.big-block { - .box-shadow(2px; 5px); -} -``` - -Which results in: - -```css -.big-block { - -webkit-box-shadow: 2px 5px 1px #000; - -moz-box-shadow: 2px 5px 1px #000; - box-shadow: 2px 5px 1px #000; -} -``` - -### Advanced arguments and the `@rest` variable - -You can use `...` if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable. - -```less -.mixin (...) { // matches 0-N arguments -.mixin () { // matches exactly 0 arguments -.mixin (@a: 1) { // matches 0-1 arguments -.mixin (@a: 1; ...) { // matches 0-N arguments -.mixin (@a; ...) { // matches 1-N arguments -``` - -Furthermore: - -```less -.mixin (@a; @rest...) { - // @rest is bound to arguments after @a - // @arguments is bound to all arguments -} -``` - -## Pattern-matching - -Sometimes, you may want to change the behaviour of a mixin, -based on the parameters you pass to it. Let's start with something -basic: - -```less -.mixin (@s; @color) { ... } - -.class { - .mixin(@switch; #888); -} -``` - -Now let's say we want `.mixin` to behave differently, based on the value of `@switch`, -we could define `.mixin` as such: - -```less -.mixin (dark; @color) { - color: darken(@color, 10%); -} -.mixin (light; @color) { - color: lighten(@color, 10%); -} -.mixin (@_; @color) { - display: block; -} -``` - -Now, if we run: - -```less -@switch: light; - -.class { - .mixin(@switch; #888); -} -``` - -We will get the following CSS: - -```css -.class { - color: #a2a2a2; - display: block; -} -``` - -Where the color passed to `.mixin` was lightened. If the value of `@switch` was `dark`, -the result would be a darker color. - -Here's what happened: - -* The first mixin definition didn't match because it expected `dark` as the first argument. -* The second mixin definition matched, because it expected `light`. -* The third mixin definition matched because it expected any value. - -Only mixin definitions which matched were used. Variables match and bind to any value. -Anything other than a variable matches only with a value equal to itself. - -We can also match on arity, here's an example: - -```less -.mixin (@a) { - color: @a; -} -.mixin (@a; @b) { - color: fade(@a; @b); -} -``` - -Now if we call `.mixin` with a single argument, we will get the output of the first definition, -but if we call it with *two* arguments, we will get the second definition, namely `@a` faded to `@b`. \ No newline at end of file diff --git a/content/features/mixins.md b/content/features/mixins.md deleted file mode 100644 index 21c38652..00000000 --- a/content/features/mixins.md +++ /dev/null @@ -1,147 +0,0 @@ - - -# Mixins -> "mix-in" properties from existing styles - -You can mix-in class selectors and id selectors, e.g. - -```less -.a, #b { - color: red; -} -.mixin-class { - .a(); -} -.mixin-id { - #b(); -} -``` - -When you call the mixin, the parenthesis are optional. - -```less - .a(); //these lines do the same thing - .a; -``` - -## Not outputting the mixin - -If you want to create a mixin but you do not want that mixin to be output, you can put parenthesis around it. - -```less -.my-mixin { - color: black; -} -.my-other-mixin() { - background: white; -} -.class { - .my-mixin; - .my-other-mixin; -} -``` -outputs -```css -.my-mixin { - color: black; -} -.class { - color: black; - background: white; -} -``` - -## Selectors in mixins - -Mixins can contain more than just properties, they can contain selectors to. - -For example. - -```less -.my-hover-mixin() { - &:hover { - border: 1px solid red; - } -} -button { - .my-hover-mixin(); -} -``` -Outputs -```css -button:hover { - border: 1px solid red; -} -``` - -## Namespaces - -If you want to mixin properties inside a more complicated selector, you can stack up multiple id's or classes. - -```less -#outer { - .inner { - color: red; - } -} - -.c { - #outer > .inner; -} -``` - -and again the > is optional - -```less - #outer > .inner; // all do the same thing - #outer > .inner(); - #outer.inner; - #outer.inner(); -``` - -One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won't conflict with another library. - -e.g. - -```less -#my-library { - .my-mixin() { - color: black; - } -} -// which can be used like this -.class { - #my-library > .my-mixin(); -} -``` - -## The Keyword !important -Use the !important keyword after mixin call to mark all properties brought by it as !important: - -Sample input: - -```less -.mixin (@a: 0) { - border: @a; - boxer: @a; -} -.unimportant { - .mixin(1); -} -.important { - .mixin(2) !important; -} -``` - -compiled into: - -```css -.unimportant { - border: 1; - boxer: 1; -} -.important { - border: 2 !important; - boxer: 2 !important; -} -``` \ No newline at end of file diff --git a/content/features/nested.md b/content/features/nested.md deleted file mode 100644 index 1fb9bfff..00000000 --- a/content/features/nested.md +++ /dev/null @@ -1,210 +0,0 @@ -##Nested Rules - -LESS allows you to use nesting as well as normal CSS cascading. For example, you can produce the following CSS: - -```css -#header { - color: black; -} -#header .navigation { - font-size:12px; -} -#header .logo { - width: 300px; -} -#header .logo:hover { - text-decoration: none; -} -``` - -With the following LESS: - -```less -#header { - color: black; - - .navigation { - font-size: 12px; - } - - .logo { - width: 300px; - - &:hover { - text-decoration: none; - } - } -} -``` - -This syntax is a better representation of the DOM structure that you are styling. Note that by default -the nested style produces output with the descendent syntax of CSS. To produce other relationships, you can use `&`. -The `&` acts as a placeholder for the parent selector (where the parent selector includes the components of all ancestor selectors). - -For example: - -```less -.bordered { - &.float { - float: left; - } - .top { - margin: 5px; - &:hover { - background-color: #ffdddd; - } - } -} -``` - -Will output - -```css -.bordered.float { - float: left; -} -.bordered .top { - margin: 5px; -} -.bordered .top:hover { - background-color: #ffdddd; -} -``` - -###Nested Media Queries - -Media queries can be nested in the same way as selectors, and output will create the appropriate rules within -media queries. - -For example: - -```less -.one { - @media (width: 400px) { - font-size: 1.2em; - @media print and color { - color: blue; - } - } -} -``` - -Will output - -```css -@media (width: 400px) { - .one { - font-size: 1.2em; - } -} -@media (width: 400px) and print and color { - .one { - color: blue; - } -} -``` - -###Advanced Usage of & - -You can use the `&` to prepend a selector to the inherited (parent) scope. [Parent selector](Parent-Selectors.md) describes this in more detail. - -The `&` combinator can also be used to multiply classes, and can be used with comma seperated selectors. - -For example: - -```less -.child, .sibling { - .parent & { - color: black; - } - & + & { - color: red; - } - &.adopted { - color: blue; - } -} -``` - -Will output -```css -.parent .child, -.parent .sibling { - color: black; -} -.child + .child, -.child + .sibling, -.sibling + .child, -.sibling + .sibling { - color: red; -} -.child.adopted, -.sibling.adopted { - color: blue; -} -``` - -You can also use `&` to produce class names. - -For Example: - -```less -.button { - &-ok { - background-image: url("ok.png"); - } - &-cancel { - background-image: url("cancel.png"); - } - - &&-custom { - background-image: url("button.png"); - } -} -``` - -Will output - -```css -.button-ok { - background-image: url("ok.png"); -} -.button-cancel { - background-image: url("cancel.png"); -} -.button.button-custom { - background-image: url("button.png"); -} -``` - -The `&` combinator can also be used with mixins. In the case of mixins, `&` refers to the selector for the scope -that is mixing in the other class. - -For example: -```less -.mixin { - &:hover { - color:cyan; - } -} -.blue { - .mixin; - color:blue; -} - -``` - -Will output - -```css -.mixin:hover { - color: cyan; -} - -.blue { - color: blue; -} -.blue:hover { - color: cyan; -} -``` diff --git a/content/features/scope.md b/content/features/scope.md deleted file mode 100644 index 8754a4d4..00000000 --- a/content/features/scope.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -published: false ---- - - - -# Scope -> How variables are evaluated - -## Tips & Tricks - -Credit: [less/less.js/issues/1472](https://github.com/less/less.js/issues/1472#issuecomment-22213697) - -Here is a trick for defining variables and keeping them in some private scope, preventing them from leaking to the global space. - -```less -& { - // Vars - @height: 100px; - @width: 20px; - // Don't define any prop:value on this scope (as doing so will generate (wrong) output). - - .test { - height: @height; - width: @width; - } -} - -.rest { - height: @height; // Name error: variable @height is undefined -} -``` - -Here, `@height` and `@width` are only defined for the scope created by `& { ... }` You can also nest an scope inside a rule: - -```less -.some-module { - @height: 200px; - @width: 200px; - text-align: left; - line-height: @height; // 200px - - & { - // Override original values - @height: 100px; - @width: auto; - - .some-module__element { - height: @height; // 100px - width: @width; // 200px - } - - .some-module__element .text { - line-height: (@height / 2); // 50px - } - } - - & { - // Override original values - @height: 50px; - - .some-module__another-element { - height: @height; // 50px - width: @width; // 200px - } - - .some-module__another-element .text { - line-height: (@height / 2); // 25px - } - } -} -``` \ No newline at end of file diff --git a/content/features/strictmath.md b/content/features/strictmath.md deleted file mode 100644 index f7b0b359..00000000 --- a/content/features/strictmath.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -published: false ---- - - -# strictMath -> Make your less more css compatible. - - - - -## Example - -```less -(1 + 1) // => 2 -1 + 1 // => 1+1 -``` - diff --git a/content/features/variables.md b/content/features/variables.md deleted file mode 100644 index 7dde36ba..00000000 --- a/content/features/variables.md +++ /dev/null @@ -1,180 +0,0 @@ - - -# Variables -> Control commonly used values in a single location. - -It's not uncommon to see the same value repeated dozens _if not hundreds of times_ across your stylesheets: - -```css -a, .link { - color: #428bca; -} -.widget { - color: #fff; - background: #428bca; -} -``` - -Variables make your code easier to maintain by giving you a way to control those values from a single location: - -```less -// Variables -@link-color: #428bca; // sea blue -@link-color-hover: (@link-color, 10%); - -// Usage -a, .link { - color: @link-color; -} -a:hover { - color: @link-color-hover; -} -.widget { - color: #fff; - background: @link-color; -} -``` - - -## Variable Interpolation - -The examples above focused on using variables to control _values in CSS rules_, but they can also be used in other places as well, such as selector names, URLs and `@import` statements. - -### Selectors - -`example.less` - -``` less -// Variables -@mySelector: banner; - - -// Usage -.@{mySelector} { - font-weight: bold; - line-height: 40px; - margin: 0 auto; -} -``` -Compiles to: - -``` css -.banner { - font-weight: bold; - line-height: 40px; - margin: 0 auto; -} -``` - -### URLs - -```less -// Variables -@images: "../img"; - - -// Usage -body { - color: #444; - background: url("@{images}}/white-sand.png"); -} -``` - -### `@import` statements (limited support) - -Syntax: `@import "@{themes}/tidal-wave.less";` - -Note that currently, only variables which have been declared in the root or current scope will be considered and that only the current file and calling files will be considered when looking for a variable. -This means that this usage is typically limited to when you an inject a variable into the compile process or define a variable at the beginning of your root file. - -When you are importing a css file and not using the inline option (e.g. the import statement will be kept intact) then the above does not apply. - -Example: - -``` less -// Variables -@themes: "../../src/themes"; - -// Usage -@import "@{themes}/tidal-wave.less"; -``` - -Version: 1.4.0 - -### Properties - -Under consideration - -As of v1.5.0, variables **cannot** be used on _CSS properties_ themselves, so this is not possible: - -``` less -.widget { - .@{myProperty}: #fff; -} -``` -There have been requests for this feature, if you wish to add your vote to this request you can do so on the [GitHub Issues for Less.js](). - -## Variable Names - -It is also possible to define variables with a variable name: - - @fnord: "I am fnord."; - @var: "fnord"; - content: @@var; - -Which compiles to: - - content: "I am fnord."; - -When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value. - -For instance: - - @var: 0; - .class1 { - @var: 1; - .class { - @var: 2; - three: @var; - @var: 3; - } - one: @var; - } - -Compiles to: - - .class1 .class { - three: 3; - } - .class { - one: 1; - } - -## Tip - -> Variables are lazy loaded and do not have to be declared before being used. - -Valid less snippet: - - lazy-eval { - width: @var; - } - - @var: @a; - @a: 9%; - -this is valid less too: - - .lazy-eval-scope { - width: @var; - @a: 9%; - } - - @var: @a; - @a: 100%; - -both compile into: - - .lazy-eval-scope { - width: 9%; - } diff --git a/content/front/browser-support.md b/content/front/browser-support.md deleted file mode 100644 index 5b6f4423..00000000 --- a/content/front/browser-support.md +++ /dev/null @@ -1,5 +0,0 @@ -Less only supports running on modern browsers (modern versions of chrome, firefox and IE10). We do not want to encourage people to use Less client side in production - this is because it adds a performance degradation for the user, who gets a pause (even if it is sub 1 second) while the less is compiled to css. - -There are reasons to use less browser side in production, such as if you want to allow someone to tweak variables which will effect 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 shim in the functions that less requires. \ No newline at end of file diff --git a/content/front/getting-started.md b/content/front/getting-started.md deleted file mode 100644 index b8c7dd87..00000000 --- a/content/front/getting-started.md +++ /dev/null @@ -1,37 +0,0 @@ -Less is a CSS pre-processor - 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, themable 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. - -For example. - -```less -@base: #f938ab; - -.box-shadow(@style, @c) when (iscolor(@c)) { - -webkit-box-shadow: @style @c; - -moz-box-shadow: @style @c; - box-shadow: @style @c; -} -.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { - .box-shadow(@style, rgba(0, 0, 0, @alpha)); -} -.box { - color: saturate(@base, 5%); - border-color: lighten(@base, 30%); - div { .box-shadow(0 0 5px, 30%) } -} -``` - -compiles to - -```css -.box { - color: #fe33ac; - border-color: #fdcdea; -} -.box div { - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -} -``` \ No newline at end of file diff --git a/content/front/using.md b/content/front/using.md deleted file mode 100644 index bed31708..00000000 --- a/content/front/using.md +++ /dev/null @@ -1,137 +0,0 @@ -# Server-side usage - -## Installation - -The easiest way to install LESS on the server, is via npm, the [node.js](http://nodejs.org/) package manager, as so: - -```bash -$ npm install -g less -``` - -## Command-line usage - -Once installed, you can invoke the compiler from the command-line, as such: - -```bash -$ lessc styles.less -``` - -This will output the compiled CSS to `stdout`, you may then redirect it to a file of your choice: - -```bash -$ lessc styles.less > styles.css -``` - -To output minified CSS, simply pass the `-x` option. If you would like more involved minification, -the [Clean CSS](https://github.com/GoalSmashers/clean-css) is also available with -the `--clean-css` option. - -To see all the command line options run lessc without parameters. - -## Usage in Code - -You can invoke the compiler from node, as such: - -```js -var less = require('less'); - -less.render('.class { width: (1 + 1) }', function (e, css) { - console.log(css); -}); -``` - -which will output - -```css -.class { - width: 2; -} -``` - -you may also manually invoke the parser and compiler: - -```js -var parser = new(less.Parser); - -parser.parse('.class { width: (1 + 1) }', function (err, tree) { - if (err) { - return console.error(err) - } - console.log(tree.toCSS()); -}); -``` - -## Configuration - -You may pass some options to the compiler: - -```js -var parser = new(less.Parser)({ - paths: ['.', './lib'], // Specify search paths for @import directives - filename: 'style.less' // Specify a filename, for better error messages -}); - -parser.parse('.class { width: (1 + 1) }', function (e, tree) { - tree.toCSS({ - // Minify CSS output - compress: true - }); -}); -``` - -## Grunt - -Less also integrates with the popular build framework grunt, using the (grunt-contrib-less)[https://github.com/gruntjs/grunt-contrib-less] plugin. - -## Third Party Tools - -There are a selection of tools available to run in your particular environment and these are documented in the Github wiki. - -* [Command Line Tools](https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS) -* [GUI Tools](https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js) - -# client-side usage - -> Using less.js in the browser is great for development, but it's not recommended for production - -Client-side is the easiest way to get started and good for developing with LESS. But in production, when performance and reliability is important, _we recommend pre-compiling using node.js or one of the many third party tools available_. - -## Getting started - -Link your `.less` stylesheets with the `rel` attribute set to "`stylesheet/less`": - -```html - -``` - -Next, [download less.js](https://github.com/less/less.js/archive/master.zip) and include it in a `` tag in the `` element of your page: - -```html - -``` - -### FAQ - -* Make sure you include your stylesheets **before** the script. -* When you link more than one `.less` stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other. - -## Browser Options - -Options are defined by setting them on a global LESS object **before** the ``: - -``` html - - - -``` \ No newline at end of file diff --git a/content/functions/color-blending.md b/content/functions/color-blending.md deleted file mode 100644 index 317722e4..00000000 --- a/content/functions/color-blending.md +++ /dev/null @@ -1,786 +0,0 @@ -These operations are _similar_ as the blend modes found in image editors like Photoshop, Firework or GIMP, so you can use them to make your CSS colors match your images. - - -## multiply - -> Multiply two colors. For each two colors their RGB channel are multiplied then divided by 255. The result is a darker color. - -Parameters: - -* `color1`: A color object to multiply against. -* `color2`: A color object to multiply against. - -Returns: `color` - -**Examples**: - -```less -multiply(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/000000/ffffff&text=000000) - -```less -multiply(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/331400/ffffff&text=331400) - -```less -multiply(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/662900/ffffff&text=662900) - -```less -multiply(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/993d00/ffffff&text=993d00) - -```less -multiply(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/cc5200/ffffff&text=cc5200) - -```less -multiply(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - -```less -multiply(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) - -```less -multiply(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/006600/ffffff&text=006600) - -```less -multiply(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - - - -## screen - -> Do the opposite effect from `multiply`. The result is a brighter color. - -Parameters: - -* `color1`: A color object to _screen_ against. -* `color2`: A color object to _screen_ against. - -Returns: `color` - -Example: - -```less -screen(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - -```less -screen(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/ff8533/ffffff&text=ff8533) - -```less -screen(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/ffa366/ffffff&text=ffa366) - -```less -screen(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/ffc299/000000&text=ffc299) - -```less -screen(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/ffe0cc/000000&text=ffe0cc) - -```less -screen(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/ffffff/000000&text=ffffff) - -```less -screen(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - -```less -screen(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/ffff00/ffffff&text=ffff00) - -```less -screen(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/ff66ff/000000&text=ff66ff) - - - -## overlay - -> Combines the effect from both `multiply` and `screen`. Conditionally make light channels lighter and dark channels darker. **Note**: The results of the conditions are determined by the first color parameter. - -Parameters: - -* `color1`: A color object to overlay another. Also it is the determinant color to make the result lighter or darker. -* `color2`: A color object to be _overlayed_. - -Returns: `color` - -Example: - -```less -overlay(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) - -```less -overlay(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/ff2900/ffffff&text=ff2900) - -```less -overlay(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/ff5200/ffffff&text=ff5200) - -```less -overlay(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/ff7a00/ffffff&text=ff7a00) - -```less -overlay(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/ffa300/ffffff&text=ffa300) - -```less -overlay(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/ffcc00/ffffff&text=ffcc00) - -```less -overlay(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) - -```less -overlay(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/ffcc00/ffffff&text=ffcc00) - -```less -overlay(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) - - - -## softlight - -> Similar to `overlay` but avoid pure black resulting in pure black, and pure white resulting in pure white. - -Parameters: - -* `color1`: A color object to _soft light_ another. -* `color2`: A color object to be _soft lighten_. - -Returns: `color` - -Example: - -```less -softlight(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/ff2900/ffffff&text=ff2900) - -```less -softlight(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/ff4100/ffffff&text=ff4100) - -```less -softlight(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/ff5a00/ffffff&text=ff5a00) - -```less -softlight(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/ff7200/ffffff&text=ff7200) - -```less -softlight(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/ff8b00/ffffff&text=ff8b00) - -```less -softlight(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/ffa300/ffffff&text=ffa300) - -```less -softlight(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/ff2900/ffffff&text=ff2900) - -```less -softlight(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/ffa300/ffffff&text=ffa300) - -```less -softlight(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/ff2900/ffffff&text=ff2900) - - - -## hardlight - -> Similar to `overlay` but use the second color to detect light and dark channels instead of using the first color. - -Parameters: - -* `color1`: A color object to overlay another. -* `color2`: A color object to be _overlayed_. Also it is the determinant color to make the result lighter or darker. - -Returns: `color` - -Example: - -```less -hardlight(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/000000/ffffff&text=000000) - -```less -hardlight(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/662900/ffffff&text=662900) - -```less -hardlight(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/cc5200/ffffff&text=cc5200) - -```less -hardlight(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/ff8533/ffffff&text=ff8533) - -```less -hardlight(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/ff2900/ffffff&text=ff2900) - -```less -hardlight(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/ffffff/000000&text=ffffff) - -```less -hardlight(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) - -```less -hardlight(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) - -```less -hardlight(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) - - - -## difference - -> Substracts the second color from the first color. The operation is made per RGB channels. The result is a darker color. - -Parameters: - -* `color1`: A color object to act as the minuend. -* `color2`: A color object to act as the subtrahend. - -Returns: `color` - -Example: - -```less -difference(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - -```less -difference(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/cc3333/ffffff&text=cc3333) - -```less -difference(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/990066/ffffff&text=990066) - -```less -difference(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/663399/ffffff&text=663399) - -```less -difference(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/3366cc/ffffff&text=3366cc) - -```less -difference(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/0099ff/ffffff&text=0099ff) - -```less -difference(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/006600/ffffff&text=006600) - -```less -difference(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/ff9900/ffffff&text=ff9900) - -```less -difference(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/ff66ff/000000&text=ff66ff) - - - -## exclusion - -> Similar effect to `difference` with lower contrast. - -Parameters: - -* `color1`: A color object to act as the minuend. -* `color2`: A color object to act as the subtrahend. - -Returns: `color` - -Example: - -```less -exclusion(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - -```less -exclusion(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/cc7033/ffffff&text=cc7033) - -```less -exclusion(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/997a66/ffffff&text=997a66) - -```less -exclusion(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/668599/ffffff&text=668599) - -```less -exclusion(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/338fcc/ffffff&text=338fcc) - -```less -exclusion(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/0099ff/ffffff&text=0099ff) - -```less -exclusion(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/006600/ffffff&text=006600) - -```less -exclusion(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/ff9900/ffffff&text=ff9900) - -```less -exclusion(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/ff66ff/000000&text=ff66ff) - - - -## average - -> Compute the average of two colors. The operation is made per RGB channels. - -Parameters: - -* `color1`: A color object. -* `color2`: A color object. - -Returns: `color` - -Example: - -```less -average(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/803300/ffffff&text=803300) - -```less -average(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/994d1a/ffffff&text=994d1a) - -```less -average(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/b36633/ffffff&text=b36633) - -```less -average(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/cc804d/ffffff&text=cc804d) - -```less -average(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/e69966/ffffff&text=e69966) - -```less -average(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/ffb380/000000&text=ffb380) - -```less -average(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/ff3300/ffffff&text=ff3300) - -```less -average(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/80b300/ffffff&text=80b300) - -```less -average(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/803380/ffffff&text=803380) - - - - -## negation - -> Do the opposite effect from `difference`. - -The result is a brighter color. **Note**: The _opposite_ effect doesn't mean the _inverted_ effect as resulting to an _addition_ operation. - -Parameters: - -* `color1`: A color object to act as the minuend. -* `color2`: A color object to act as the subtrahend. - -Returns: `color` - -Example: - -```less -negation(#ff6600, #000000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/000000/ffffff&text=000000) -![Color 3](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) - -```less -negation(#ff6600, #333333); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/333333/ffffff&text=333333) -![Color 3](http://placehold.it/100x40/cc9933/ffffff&text=cc9933) - -```less -negation(#ff6600, #666666); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/666666/ffffff&text=666666) -![Color 3](http://placehold.it/100x40/99cc66/ffffff&text=99cc66) - -```less -negation(#ff6600, #999999); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/999999/ffffff&text=999999) -![Color 3](http://placehold.it/100x40/66ff99/ffffff&text=66ff99) - -```less -negation(#ff6600, #cccccc); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/cccccc/000000&text=cccccc) -![Color 3](http://placehold.it/100x40/33cccc/ffffff&text=33cccc) - -```less -negation(#ff6600, #ffffff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ffffff/000000&text=ffffff) -![Color 3](http://placehold.it/100x40/0099ff/ffffff&text=0099ff) - -```less -negation(#ff6600, #ff0000); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/ff0000/ffffff&text=ff0000) -![Color 3](http://placehold.it/100x40/006600/ffffff&text=006600) - -```less -negation(#ff6600, #00ff00); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/00ff00/ffffff&text=00ff00) -![Color 3](http://placehold.it/100x40/ff9900/ffffff&text=ff9900) - -```less -negation(#ff6600, #0000ff); -``` - -![Color 1](http://placehold.it/100x40/ff6600/ffffff&text=ff6600) -![Color 2](http://placehold.it/100x40/0000ff/ffffff&text=0000ff) -![Color 3](http://placehold.it/100x40/ff66ff/ffffff&text=ff66ff) \ No newline at end of file diff --git a/content/functions/color-channel.md b/content/functions/color-channel.md deleted file mode 100644 index 4053810b..00000000 --- a/content/functions/color-channel.md +++ /dev/null @@ -1,121 +0,0 @@ - -## hur - -> Extracts the hue channel of a color object. - -Parameters: `color` - a color object. -Returns: `integer` `0-360` -Example: `hue(hsl(90, 100%, 50%))` -Output: `90` - - - -## saturation - -> Extracts the saturation channel of a color object. - -Parameters: `color` - a color object. -Returns: `percentage` `0-100` -Example: `saturation(hsl(90, 100%, 50%))` -Output: `100%` - - - -## lightness - -> Extracts the lightness channel of a color object. - -Parameters: `color` - a color object. -Returns: `percentage` `0-100` -Example: `lightness(hsl(90, 100%, 50%))` -Output: `50%` - - - -## hsvhue - -> Extracts the hue channel of a color object in the HSV color space. - -Parameters: `color` - a color object. -Returns: `integer` `0-360` -Example: `hsvhue(hsv(90, 100%, 50%))` -Output: `90` - - - -## hsvsaturation - -> Extracts the saturation channel of a color object in the HSV color space. - -Parameters: `color` - a color object. -Returns: `percentage` 0-100 -Example: `hsvsaturation(hsv(90, 100%, 50%))` -Output: `100%` - - - -## hsvvalue - -> Extracts the value channel of a color object in the HSV color space. - -Parameters: `color` - a color object. -Returns: `percentage` 0-100 -Example: `hsvvalue(hsv(90, 100%, 50%))` -Output: `50%` - - - -## red - -> Extracts the red channel of a color object. - -Parameters: `color` - a color object. -Returns: `integer` `0-255` -Example: `red(rgb(10, 20, 30))` -Output: `10` - - - -## green - -> Extracts the green channel of a color object. - -Parameters: `color` - a color object. -Returns: `integer` 0-255 -Example: `green(rgb(10, 20, 30))` -Output: `20` - - - -## blue - -> Extracts the blue channel of a color object. - -Parameters: `color` - a color object. -Returns: `integer` 0-255 -Example: `blue(rgb(10, 20, 30))` -Output: `30` - - - -## alpha - -> Extracts the alpha channel of a color object. - -Parameters: `color` - a color object. -Returns: `float` `0-1` -Example: `alpha(rgba(10, 20, 30, 0.5))` -Output: `0.5` - - - -## luma - -> Calculates the [luma](http://en.wikipedia.org/wiki/Luma_(video)) (perceptual brightness) of a color object. - -Uses **SMPTE C / Rec. 709** coefficients, as recommended in [WCAG 2.0](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). This calculation is also used in the contrast function. - -Parameters: `color` - a color object. -Returns: `percentage` 0-100% -Example: `luma(rgb(100, 200, 30))` -Output: `65%` diff --git a/content/functions/color-definition.md b/content/functions/color-definition.md deleted file mode 100644 index d8b70ae6..00000000 --- a/content/functions/color-definition.md +++ /dev/null @@ -1,115 +0,0 @@ - -### rgb - -> Creates an opaque color object from decimal red, green and blue (RGB) values. - -Literal color values in standard HTML/CSS formats may also be used to define colors, for example `#ff0000`. - -Parameters: -* `red`: An integer 0-255 or percentage 0-100%. -* `green`: An integer 0-255 or percentage 0-100%. -* `blue`: An integer 0-255 or percentage 0-100%. - -Returns: `color` -Example: `rgb(90, 129, 32)` -Output: `#5a8120` - - - -### rgba - -> Creates a transparent color object from decimal red, green, blue and alpha (RGBA) values. -Parameters: - -* `red`: An integer 0-255 or percentage 0-100%. -* `green`: An integer 0-255 or percentage 0-100%. -* `blue`: An integer 0-255 or percentage 0-100%. -* `alpha`: An number 0-1 or percentage 0-100%. - -Returns: `color` -Example: `rgba(90, 129, 32, 0.5)` -Output: `rgba(90, 129, 32, 0.5)` - - - -### argb - -> Creates a hex representation of a color in `#AARRGGBB` format (**NOT** `#RRGGBBAA`!). - -This format is used in Internet Explorer, and .NET and Android development. - -Parameters: `color` - color object. -Returns: `string` -Example: `argb(rgba(90, 23, 148, 0.5));` -Output: `#805a1794` - - - -### hsl - -> Creates an opaque color object from hue, saturation and lightness (HSL) values. -Parameters: - -* `hue`: An integer 0-360 representing degrees. -* `saturation`: A percentage 0-100% or number 0-1. -* `lightness`: A percentage 0-100% or number 0-1. - -Returns: `color` -Example: `hsl(90, 100%, 50%)` -Output: `#80ff00` - -This is useful if you want to create a new color based on another color's channel, forExample: `@new: hsl(hue(@old), 45%, 90%);` - -`@new` will have `@old`'s *hue*, and its own saturation and lightness. - - - - -### hsla - -> Creates a transparent color object from hue, saturation, lightness and alpha (HSLA) values. - -Parameters: -* `hue`: An integer 0-360 representing degrees. -* `saturation`: A percentage 0-100% or number 0-1. -* `lightness`: A percentage 0-100% or number 0-1. -* `alpha`: A percentage 0-100% or number 0-1. - -Returns: `color` -Example: `hsl(90, 100%, 50%, 0.5)` -Output: `rgba(128, 255, 0, 0.5)` - - - -### hsv - -> Creates an opaque color object from hue, saturation and value (HSV) values. - -Note that this is not the same as `hsl`, and is a color space available in Photoshop. - -Parameters: -* `hue`: An integer 0-360 representing degrees. -* `saturation`: A percentage 0-100% or number 0-1. -* `value`: A percentage 0-100% or number 0-1. - -Returns: `color` -Example: `hsv(90, 100%, 50%)` -Output: `#408000` - - - -### hsva - -> Creates a transparent color object from hue, saturation, value and alpha (HSVA) values. - -Note that this is not the same as `hsla`, and is a color space available in Photoshop. - -Parameters: -* `hue`: An integer 0-360 representing degrees. -* `saturation`: A percentage 0-100% or number 0-1. -* `value`: A percentage 0-100% or number 0-1. -* `alpha`: A percentage 0-100% or number 0-1. - -Returns: `color` -Example: `hsva(90, 100%, 50%, 0.5)` -Output: `rgba(64, 128, 0, 0.5)` diff --git a/content/functions/color-operations.md b/content/functions/color-operations.md deleted file mode 100644 index d866fb71..00000000 --- a/content/functions/color-operations.md +++ /dev/null @@ -1,233 +0,0 @@ -Color operations generally take parameters in the same units as the values they are changing, and percentage are handled as absolutes, so increasing a 10% value by 10% results in 20%, not 11%, and values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, we've also shown formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with. - - -## saturate - -> Increase the saturation of a color by an absolute amount. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` - -Example: `saturate(hsl(90, 90%, 50%), 10%)` - -Output: `#80ff00 // hsl(90, 100%, 50%)` - - - -## desaturate - -> Decrease the saturation of a color by an absolute amount. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` - -Example: `desaturate(hsl(90, 90%, 50%), 10%)` - -Output: `#80e51a // hsl(90, 80%, 50%)` - - - -## lighten - -> Increase the lightness of a color by an absolute amount. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` - -Example: `lighten(hsl(90, 90%, 50%), 10%)` - -Output: `#99f53d // hsl(90, 90%, 60%)` - - - -## darken - -> Decrease the lightness of a color by an absolute amount. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` -Example: `darken(hsl(90, 90%, 50%), 10%)` -Output: `#66c20a // hsl(90, 90%, 40%)` - - - -## fadein - -> Decrease the transparency (or increase the opacity) of a color, making it more opaque. - -Has no effect on opaque colours. To fade in the other direction use `fadeout`. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` -Example: `fadein(hsla(90, 90%, 50%, 0.5), 10%)` -Output: `rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)` - - - -## fadeout - -> Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use `fadein`. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` -Example: `fadeout(hsla(90, 90%, 50%, 0.5), 10%)` -Output: `rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)` - - - -## fade - -> Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not. - -Parameters: - -* `color` - a color object. -* `amount`: A percentage 0-100%. - -Returns: `color` -Example: `fade(hsl(90, 90%, 50%), 10%)` -Output: `rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)` - - - -## spin - -> Rotate the hue angle of a color in either direction. - -While the angle range is 0-360, it applies a mod 360 operation, so you can pass in much larger (or negative) values and they will wrap around e.g. angles of 360 and 720 will produce the same result. Note that colours are passed through an RGB conversion, which doesn't retain hue value for greys (because hue has no meaning when there is no saturation), so make sure you apply functions in a way that preserves hue, for example don't do this: - -```less -@c: saturate(spin(#aaaaaa, 10), 10%); -``` - -Do this instead: - -```less -@c: spin(saturate(#aaaaaa, 10%), 10); -``` - -Colors are always returned as RGB values, so applying `spin` to a grey value will do nothing. - -Parameters: - -* `color` - a color object. -* `angle`: A number of degrees to rotate (+ or -). - -Returns: `color` - -Example: - -```less -spin(hsl(10, 90%, 50%), 20) -spin(hsl(10, 90%, 50%), -20) -``` - -Output: - -```css -#f27f0d // hsl(30, 90%, 50%) -#f20d33 // hsl(350, 90%, 50%) -``` - - -## mix - -> Mix two colors together in variable proportion. Opacity is included in the calculations. - -Parameters: - -* `color1`: A color object. -* `color2`: A color object. -* `weight`: Optional, a percentage balance point between the two colors, defaults to 50%. - -Returns: `color` - -Example: - -```less -mix(#ff0000, #0000ff, 50%) -mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%) -``` - -Output: - -```css -#800080 -rgba(75, 25, 0, 0.75) -``` - - -## greyscale - -> Remove all saturation from a color; the same as calling `desaturate(@color, 100%)`. - -Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; `luma` may provide a better result as it extracts perceptual rather than linear brightness, for example `greyscale('#0000ff')` will return the same value as `greyscale('#00ff00')`, though they appear quite different in brightness to the human eye. - -Parameters: `color` - a color object. - -Returns: `color` -Example: `greyscale(hsl(90, 90%, 50%))` -Output: `#808080 // hsl(90, 0%, 50%)` - - - -## contrast - -> Choose which of two colors provides the greatest contrast with another. - -This is useful for ensuring that a color is readable against a background, which is also useful for accessibility compliance. This function works the same way as the [contrast function in Compass for SASS](http://compass-style.org/reference/compass/utilities/color/contrast/). In accordance with [WCAG 2.0](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef), colors are compared using their luma value, not their lightness. - -The light and dark parameters can be supplied in either order - the function will calculate their luma values and assign light and dark appropriately. - -Parameters: - -* `color`: A color object to compare against. -* `dark`: optional - A designated dark color (defaults to black). -* `light`: optional - A designated light color (defaults to white). -* `threshold`: optional - A percentage 0-100% specifying where the transition from "dark" to "light" is (defaults to 43%). This is used to bias the contrast one way or another, for example to allow you to decide whether a 50% grey background should result in black or white text. You would generally set this lower for 'lighter' palettes, higher for 'darker' ones. Defaults to 43%. - -Returns: `color` - -Example: - -```less -contrast(#aaaaaa) -contrast(#222222, #101010) -contrast(#222222, #101010, #dddddd) -contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%); -contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%); -``` - -Output: - -``` -#000000 // black -#ffffff // white -#dddddd -#000000 // black -#ffffff // white -``` diff --git a/content/functions/data/functions.json b/content/functions/data/functions.json deleted file mode 100644 index 94a687c0..00000000 --- a/content/functions/data/functions.json +++ /dev/null @@ -1,368 +0,0 @@ -{ - "string-functions": [ - { - "name": "escape", - "example": "escape(@string);", - "description": "URL encodes a string" - }, - { - "name": "e", - "example": "e(@string);", - "description": "escape string content" - }, - { - "name": "format", - "example": "%(@string, values...);", - "description": "formats a string" - } - ], - "misc-functions": [ - { - "name": "unit", - "example": "unit(@dimension, [@unit: \"\"]);", - "description": "remove or change the unit of a dimension" - }, - { - "name": "color", - "example": "color(@string);", - "description": "parses a string to a color" - }, - { - "name": "convert", - "example": "convert(@value, unit);", - "description": "converts numbers from one type into another" - }, - { - "name": "data-uri", - "example": "data-uri([mimetype,] url);", - "description": "inlines a resource and falls back to `url()`" - } - ], - "list-functions": [ - { - "name": "length", - "example": "length(@list);", - "description": "returns the number of elements in a value list", - "version": "1.5.0" - }, - { - "name": "extract", - "example": "extract(@list, index);", - "description": "returns a value at the specified position in the list", - "version": "1.4.0" - } - ], - "math-functions": [ - { - "name": "unit", - "description": "changes number units without converting it", - "example": "unit(number, units);", - "version": "1.4.0" - }, - { - "name": "convert", - "description": "converts between number types", - "example": "convert(number, units);", - "version": "1.4.0" - }, - { - "name": "abs", - "description": "absolute value of a number", - "example": "abs(number);", - "version": "1.4.0" - }, - { - "name": "acos", - "description": "arccosine - inverse of cosine function", - "example": "acos(number);", - "version": "1.4.0" - }, - { - "name": "asin", - "description": "arcsine - inverse of sine function", - "example": "asin(number);", - "version": "1.4.0" - }, - { - "name": "ceil", - "example": "ceil(@number);", - "description": "rounds up to an integer" - }, - { - "name": "cos", - "description": "cosine function", - "example": "cos(number);", - "version": "1.4.0" - }, - { - "name": "floor", - "description": "rounds down to an integer", - "example": "floor(@number);" - }, - { - "name": "percentage", - "description": "converts to a %, e.g. 0.5 > 50%", - "example": "percentage(@number);" - }, - { - "name": "round", - "description": "rounds a number to a number of places", - "example": "round(number, [places: 0]);" - }, - { - "name": "sqrt", - "description": "calculates square root of a number", - "example": "sqrt(number);", - "version": "1.4.0" - }, - { - "name": "sin", - "description": "sine function", - "example": "sin(number);", - "version": "1.4.0" - }, - { - "name": "tan", - "description": "tangent function", - "example": "tan(number);", - "version": "1.4.0" - }, - { - "name": "atan", - "description": "arctangent - inverse of tangent function", - "example": "atan(number);", - "version": "1.4.0" - }, - { - "name": "pi", - "description": "returns pi", - "example": "pi();", - "version": "1.4.0" - }, - { - "name": "pow", - "description": "first argument raised to the power of the second argument", - "example": "pow(@base, @exponent);", - "version": "1.4.0" - }, - { - "name": "mod", - "description": "first argument modulus second argument", - "example": "mod(number, number);", - "version": "1.4.0" - }, - { - "name": "min", - "description": "returns the lowest of one or more values", - "example": "min(@x, @y);", - "version": "1.5.0" - }, - { - "name": "max", - "description": "returns the lowest of one or more values", - "example": "max(@x, @y);", - "version": "1.5.0" - } - ], - "color-definition": [ - { - "name": "rgb", - "example": "rgb(@r, @g, @b);", - "description": "converts to a color" - }, - { - "name": "rgba", - "example": "rgba(@r, @g, @b, @a);", - "description": "converts to a color" - }, - { - "name": "argb", - "example": "argb(@color);", - "description": "creates a #AARRGGBB" - }, - { - "name": "hsl", - "example": "hsl(@hue, @saturation, @lightness);", - "description": "creates a color" - }, - { - "name": "hsla", - "example": "hsla(@hue, @saturation, @lightness, @alpha);", - "description": "creates a color" - }, - { - "name": "hsv", - "example": "hsv(@hue, @saturation, @value);", - "description": "creates a color" - }, - { - "name": "hsva", - "example": "hsva(@hue, @saturation, @value, @alpha);", - "description": "creates a color" - } - ], - "color-channel": [ - { - "name": "hue", - "example": "hue(@color);", - "description": "returns the `hue` channel of `@color` in the HSL space" - }, - { - "name": "saturation", - "example": "saturation(@color);", - "description": "returns the `saturation` channel of `@color` in the HSL space" - }, - { - "name": "lightness", - "example": "lightness(@color);", - "description": "returns the `lightness` channel of `@color` in the HSL space" - }, - { - "name": "hsvhue", - "example": "hsvhue(@color);", - "description": "returns the `hue` channel of `@color` in the HSV space", - "version": "1.4.0" - }, - { - "name": "hsvsaturation", - "example": "hsvsaturation(@color);", - "description": "returns the `saturation` channel of `@color` in the HSV space", - "version": "1.4.0" - }, - { - "name": "hsvvalue", - "example": "hsvvalue(@color);", - "description": "returns the `value` channel of `@color` in the HSV space", - "version": "1.4.0" - }, - { - "name": "red", - "example": "red(@color);", - "description": "returns the `red` channel of `@color`" - }, - { - "name": "green", - "example": "green(@color);", - "description": "returns the `green` channel of `@color`" - }, - { - "name": "blue", - "example": "blue(@color);", - "description": "returns the `blue` channel of `@color`" - }, - { - "name": "alpha", - "example": "alpha(@color);", - "description": "returns the `alpha` channel of `@color`" - }, - { - "name": "luma", - "example": "luma(@color);", - "description": "returns the `luma` value (perceptual brightness) of `@color`" - } - ], - "color-operations": [ - { - "name": "saturate", - "example": "saturate(@color, 10%);", - "description": "return `@color` 10% points _more_ saturated" - }, - { - "name": "desaturate", - "example": "desaturate(@color, 10%);", - "description": "return `@color` 10% points _less_ saturated" - }, - { - "name": "lighten", - "example": "lighten(@color, 10%);", - "description": "return `@color` 10% points _lighter_" - }, - { - "name": "darken", - "example": "darken(@color, 10%);", - "description": "return `@color` 10% points _darker_" - }, - { - "name": "fadein", - "example": "fadein(@color, 10%);", - "description": "return `@color` 10% points _less_ transparent" - }, - { - "name": "fadeout", - "example": "fadeout(@color, 10%);", - "description": "return `@color` 10% points _more_ transparent" - }, - { - "name": "fade", - "example": "fade(@color, 50%);", - "description": "return `@color` with 50% transparency" - }, - { - "name": "spin", - "example": "spin(@color, 10);", - "description": "return `@color` with a 10 degree larger in hue" - }, - { - "name": "mix", - "example": "mix(@color1, @color2, [@weight: 50%]);", - "description": "return a mix of `@color1` and `@color2`" - }, - { - "name": "greyscale", - "example": "greyscale(@color);", - "description": "returns a grey, 100% desaturated color" - }, - { - "name": "contrast", - "example": "contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);", - "description": "return `@darkcolor` if `@color1 is> 43% luma` otherwise return `@lightcolor`, see notes" - } - ], - "color-blending": [ - { - "name": "multiply", - "example": "multiply(@color1, @color2);", - "description": "description..." - }, - { - "name": "screen", - "example": "screen(@color1, @color2);", - "description": "description..." - }, - { - "name": "overlay", - "example": "overlay(@color1, @color2);", - "description": "description..." - }, - { - "name": "softlight", - "example": "softlight(@color1, @color2);", - "description": "description..." - }, - { - "name": "hardlight", - "example": "hardlight(@color1, @color2);", - "description": "description..." - }, - { - "name": "difference", - "example": "difference(@color1, @color2);", - "description": "description..." - }, - { - "name": "exclusion", - "example": "exclusion(@color1, @color2);", - "description": "description..." - }, - { - "name": "average", - "example": "average(@color1, @color2);", - "description": "description..." - }, - { - "name": "negation", - "example": "negation(@color1, @color2);", - "description": "description..." - } - ] -} \ No newline at end of file diff --git a/content/functions/examples/examples.md b/content/functions/examples/examples.md deleted file mode 100644 index bed87695..00000000 --- a/content/functions/examples/examples.md +++ /dev/null @@ -1,41 +0,0 @@ -> Functions you can use in your styles. - -## Generating colours - -```less -rgb(r, g, b) -``` - -```less -rgba(r, g, b, a) -``` - -```less -hsl(h, s, l) -``` - -```less -hsla(h, s, l, a) -``` - -## Modifying colours - -```less -saturate(color, amount) -``` - -```less -desaturate(color, amount) -``` - -```less -lighten(color, amount) -``` - -```less -darken(color, amount) -``` - -```less -greyscale(color, amount) -``` diff --git a/content/functions/list.md b/content/functions/list.md deleted file mode 100644 index d2aa8ec8..00000000 --- a/content/functions/list.md +++ /dev/null @@ -1,50 +0,0 @@ - -### length - -> Returns a number of elements in a value list. - -Parameters: `list` - a comma or space separated list of values. -Returns: an integer number of elements in a list - -Example: `length(1px solid #0080ff);` -Output: `3` - -Example: - -```less -@list: "banana", "tomato", "potato", "peach"; -n: length(@list); -``` - -Output: - -```css -n: 4; -``` - - - -### extract - -> Returns a value at a specified position in a list. - -Parameters: -`list` - a comma or space separated list of values. -`index` - an integer that specifies a position of a list element to return. -Returns: a value at the specified position in a list. - -Example: `extract(8px dotted red, 2);` -Output: `dotted` - -Example: - -```less -@list: apple, pear, coconut, orange; -value: extract(@list, 3); -``` - -Output: - -```css -value: coconut; -``` diff --git a/content/functions/math.md b/content/functions/math.md deleted file mode 100644 index a4a1c291..00000000 --- a/content/functions/math.md +++ /dev/null @@ -1,353 +0,0 @@ - -### ceil - -> Rounds up to the next highest integer. - -Parameters: `number` - a floating point number. -Returns: `integer` -Example: `ceil(2.4)` -Output: `3` - - -### floor - -> Rounds down to the next lowest integer. - -Parameters: `number` - a floating point number. -Returns: `integer` -Example: `floor(2.6)` -Output: `2` - - -### percentage - -> Converts a floating point number into a percentage string. - -Parameters: `number` - a floating point number. -Returns: `string` -Example: `percentage(0.5)` -Output: `50%` - - -### round - -> Applies rounding. - -Parameters: -* `number`: A floating point number. -* `decimalPlaces`: Optional: The number of decimal places to round to. Defaults to 0. - -Returns: `number` -Example: `round(1.67)` -Output: `2` - -Example: `round(1.67, 1)` -Output: `1.7` - - - -### sqrt - -> Calculates square root of a number. Keeps units as they are. - -Parameters: `number` - floating point number. -Returns: `number` -Example: - -```less -sqrt(25cm) -``` - -Output: - -```css -5cm -``` - -Example: - -```less -sqrt(18.6%) -``` - -Output: - -```js -4.312771730569565%; -``` - - -### abs - -> Calculates absolute value of a number. Keeps units as they are. - -Parameters: `number` - a floating point number. -Returns: `number` -Example #1: `abs(25cm)` -Output: `25cm` -Example #2: `abs(-18.6%)` -Output: `18.6%;` - - - -### sin - -> Calculates sine function. - -Assumes radians on numbers without units. - -Parameters: `number` - a floating point number. -Returns: `number` - -Example: - -```less -sin(1); // sine of 1 radian -sin(1deg); // sine of 1 degree -sin(1grad); // sine of 1 gradian -``` - -Output: - -``` -0.8414709848078965; // sine of 1 radian -0.01745240643728351; // sine of 1 degree -0.015707317311820675; // sine of 1 gradian -``` - - -### asin - -> Calculates arcsine (inverse of sine) function. - -Returns number in radians e.g. a number between `-π/2` and `π/2`. - - -Parameters: `number` - floating point number from `[-1, 1]` interval. -Returns: `number` -Example: - -```less -asin(-0.8414709848078965) -asin(0) -asin(2) -``` - -Output: - -``` --1rad -0rad -NaNrad -``` - - -### cos - -> Calculates cosine function. - -Assumes radians on numbers without units. - -Parameters: `number` - a floating point number. -Returns: `number` -Example: - -```less -cos(1) // cosine of 1 radian -cos(1deg) // cosine of 1 degree -cos(1grad) // cosine of 1 gradian -``` - -Output: - -``` -0.5403023058681398 // cosine of 1 radian -0.9998476951563913 // cosine of 1 degree -0.9998766324816606 // cosine of 1 gradian -``` - - -### acos - -> Calculates arccosine (inverse of cosine) function. - -Returns number in radians e.g. a number between 0 and π. - -Parameters: `number` - a floating point number from [-1, 1] interval. -Returns: `number` -Example: - -```less -acos(0.5403023058681398) -acos(1) -acos(2) -``` - -Output: - -``` -1rad -0rad -NaNrad -``` - - -### tan - -> Calculates tangent function. - -Assumes radians on numbers without units. - -Parameters: `number` - a floating point number. -Returns: `number` -Example: - -```less -tan(1) // tangent of 1 radian -tan(1deg) // tangent of 1 degree -tan(1grad) // tangent of 1 gradian -``` - -Output: - -``` -1.5574077246549023 // tangent of 1 radian -0.017455064928217585 // tangent of 1 degree -0.015709255323664916 // tangent of 1 gradian -``` - - -### atan - -> Calculates arctangent (inverse of tangent) function. - -Returns number in radians e.g. a number between `-π/2` and `π/2`. - - -Parameters: `number` - a floating point number. -Returns: `number` -Example: - -```less -atan(-1.5574077246549023) -atan(0) -round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places -``` - -Output: - -``` --1rad -0rad -1.525373rad; -``` - - -### pi - -> Returns π (pi); - -Parameters: `none` -Returns: `number` - -Example: - -```less -pi() -``` - -Output: - -``` -3.141592653589793 -``` - - -### pow - -> Returns the value of the first argument raised to the power of the second argument. - -Returned value has the same dimension as the first parameter and the dimension of the second parameter is ignored. - -Parameters: -* `number`: base -a floating point number. -* `number`: exponent - a floating point number. - -Returns: `number` - -Example: - -```less -pow(0cm, 0px) -pow(25, -2) -pow(25, 0.5) -pow(-25, 0.5) -pow(-25%, -0.5) -``` - -Output: - -``` -1cm -0.0016 -5 -NaN -NaN% -``` - - -### mod - -> Returns the value of the first argument modulus second argument. - -Returned value has the same dimension as the first parameter, the dimension of the second parameter is ignored. The function is able to handle also negative and floating point numbers. - -Parameters: -* `number`: a floating point number. -* `number`: a floating point number. - -Returns: `number` -Example: - -```less -mod(0cm, 0px) -mod(11cm, 6px); -mod(-26%, -5); -``` - -Output: - -``` -NaNcm; -5cm --1%; -``` - - -### min - -> Returns the lowest of one or more values. - -Parameters: `value1, ..., valueN` - one or more values to compare. -Returns: the lowest value. - -Example: `min(5, 10);` -Output: `5` - -Example: `min(3px, 42px, 1px, 16px);` -Output: `1px` - - - -### max - -> Returns the highest of one or more values. - -Parameters: `value1, ..., valueN` - one or more values to compare. -Returns: the highest value. - -Example: `max(5, 10);` -Output: `10` - -Example: `max(3%, 42%, 1%, 16%);` -Output: `42%` diff --git a/content/functions/misc.md b/content/functions/misc.md deleted file mode 100644 index 0014e33f..00000000 --- a/content/functions/misc.md +++ /dev/null @@ -1,77 +0,0 @@ - -### color - -> Parses a color, so a string representing a color becomes a color. - -Parameters: `string`: a string of the specifid color. - -Example: `color("#aaa");` -Output: `#aaa` - - - -### unit - -> Remove or change the unit of a dimension -Parameters: - -* `dimension`: A number, with or without a dimension. -* `unit`: (Optional) the unit to change to, or if omitted it will remove the unit. - -Example: `unit(5, px)` -Output: `5px` - -Example: `unit(5em)` -Output: `5` - - - -### convert - -> Converts numbers from one type into another. - -First argument contains number with units and second argument contains units. If both units are compatible, the number is converted. If they are not compatible, function returns first argument without modifying it. - -_Compatible unit groups_: - -* lengths: `m`, `cm`, `mm`, `in`, `pt` and `pc`, -* time: `s` and `ms`, -* angle: `rad`, `deg`, `grad` and `turn`. - -Parameters: -* `number`: a floating point number with units. -* `identifier`, `string` or `escaped value`: units - -Returns: `number` -Example: - -```less -convert(9s, "ms") -convert(14cm, mm) -convert(8, mm) // incompatible unit types -``` - -Output: - -``` -9000ms -140mm -8 -``` - - - -### data-uri - -> Inlines a resource and falls back to `url()` if the ieCompat option is on and the resource is too large, or if you use the function in the browser. If the mime is not given then node uses the mime package to determine the correct mime type. -Parameters: - -* `mimetype`: (Optional) A mime type string. -* `url`: The URL of the file to inline. - -Example: `data-uri('../data/image.jpg');` -Output: `url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');` -Output in browser: `url('../data/image.jpg');` - -Example: `data-uri('image/jpeg;base64', '../data/image.jpg');` -Output: `url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');` diff --git a/content/functions/string.md b/content/functions/string.md deleted file mode 100644 index 40bd8050..00000000 --- a/content/functions/string.md +++ /dev/null @@ -1,87 +0,0 @@ - -### escape - -> Applies [URL-encoding](http://en.wikipedia.org/wiki/Percent-encoding) to special characters found in the input string. - -* Following characters are exceptions and not encoded: `,`, `/`, `?`, `@`, `&`, `+`, `'`, `~`, `!` and `$`. -* Most common encoded characters are: `\`, `#`, `^`, `(`, `)`, `{`, `}`, `|`, `:`, `>`, `<`, `;`, `]`, `[` and `=`. - -Parameters: `string`: a string to escape. -Returns: escaped `string` content without quotes. -Example: - -```less -escape('a=1') -``` - -Output: - -``` -a%3D1 -``` - -Note: Function behavior if a parameter is non-string parameters is not defined. Current implementation returns `undefined` on color and unchanged input on any other kind of argument. This behaviour should not be relied on and can change in the future. - - - -### e - -> CSS escaping similar to `~"value"` syntax. - -It expects string as a parameter and return its content as is, but without quotes. It can be used to output CSS value which is either not valid CSS syntax, or uses proprietary syntax which LESS doesn�t recognize. - -Parameters: `string` - a string to escape. -Returns: `string` content without quotes. - -Example: - -```css -filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; -``` - -Output: - -```css -filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); -``` - -Note: The function accepts also `~""` escaped values and numbers as parameters. Anything else returns an error. - - - -### % format - -> The function `%("format", arguments ...)` formats a string. - -The first argument is string with placeholders. All placeholders start with percentage symbol `%` followed by letter `s`,`S`,`d`,`D`,`a`, or `A`. Remaining arguments contain expressions to replace placeholders. If you need to print the percentage symbol, escape it by another percentage `%%`. - -Use uppercase placeholders if you need to escape special characters into their utf-8 escape codes. -The function escapes all special characters except `()'~!`. Space is encoded as `%20`. Lowercase placeholders leave special characters as they are. - -Placeholders: -* `d`, `D`, `a`, `A` - can be replaced by any kind of argument (color, number, escaped value, expression, ...). If you use them in combination with string, the whole string will be used - including its quotes. However, the quotes are placed into the string as they are, they are not escaped by "/" nor anything similar. -* `s`, `S` - can be replaced by any kind of argument except color. If you use them in combination with string, only the string value will be used - string quotes are omitted. - -Parameters: - -* `string`: format string with placeholders, -* `anything`* : values to replace placeholders. - -Returns: formatted `string`. - -Example: - -```less -format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less"); -format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less"); -format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less"); -format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less"); -``` -Output: - -```less -format-a-d: "repetitions: 3 file: "directory/file.less""; -format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22"; -format-s: "repetitions: 3 file: directory/file.less"; -format-s-upper: "repetitions: 3 file: directory%2Ffile.less"; -``` diff --git a/content/synopsis.md b/content/synopsis.md deleted file mode 100644 index 5f616fec..00000000 --- a/content/synopsis.md +++ /dev/null @@ -1,177 +0,0 @@ -## Important 1.4.0 Changes -We have released 1.4.0. This includes new features such as [extend][features-extend], the [data-uri][features-functions-data-uri] function and more maths functions. See the [changelog](https://github.com/cloudhead/less.js/blob/master/CHANGELOG.md) for a full list of changes. - -There are some known **breaking changes**. - -* `@import-once` is removed and is now default behaviour for `@import`. -* `(~".myclass_@{index}") { ...` selector interpolation is deprecated, do this instead `.myclass_@{index} { ...`. This works in 1.3.1 onwards. -* The browser version no longer bundles a version of es5-shim.js - the version we previously used was inaccurate and the new version is significantly larger. Please include your choice of es-5 shim or only use on modern browsers. -* We have introduced optional [strictMath][features-strictmath] mode, where math is required to be in parenthesis. [See examples][examples-strictmath]. In 1.4.0 this option is turned off, but we intend to turn this on by default. We recommend you upgrade code and switch on the option (`--strict-math=on` in the command line or `strictMath: true` in JavaScript). Code written with brackets is backwards compatible with older versions of the less compiler. -* We also added a `strictUnits` option (`strictUnits: true` or `strict-units=on`) and this causes lessc to validate the units used are valid (e.g.`4px/2px = 2`, not `2px` and `4em/2px` throws an error). There are no longer any plans to switch this option on permanently, but some users will find it useful for bug finding. -* Unit maths is done, so `(4px * 3em) / 4px` used to equal `3px` and it now equals `3em`. However we do not cancel units down to unitless numbers unless strict units is on. -The selector interpolation, maths and units changes can be made to your less now and will compile fine with less 1.3.3. - - -## Variables - -Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code. - -This LESS: - -```less -@color: #4D926F; - -#header { - color: @color; -} -h2 { - color: @color; -} -``` - -Results in this CSS: - -```css -#header { - color: #4D926F; -} -h2 { - color: #4D926F; -} -``` - -## Mixins - -Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It's just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below. - - -```less -.rounded-corners (@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - -ms-border-radius: @radius; - -o-border-radius: @radius; - border-radius: @radius; -} -#header { - .rounded-corners; -} -#footer { - .rounded-corners(10px); -} -``` - - - 
/* Compiled CSS */
-
-#header {
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-}
-#footer {
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  -ms-border-radius: 10px;
-  -o-border-radius: 10px;
-  border-radius: 10px;
-}
- - - -## Nested Rules - -Rather than constructing long selector names to specify inheritance, -in Less you can simply nest selectors inside other selectors. -This makes inheritance clear and style sheets shorter. - - - - - - -
- 
-// LESS
-
-#header {
-  h1 {
-    font-size: 26px;
-    font-weight: bold;
-  }
-  p { font-size: 12px;
-    a { text-decoration: none;
-      &:hover { border-width: 1px }
-    }
-  }
-}
-
-
 - 
/* Compiled CSS */
-
-#header h1 {
-  font-size: 26px;
-  font-weight: bold;
-}
-#header p {
-  font-size: 12px;
-}
-#header p a {
-  text-decoration: none;
-}
-#header p a:hover {
-  border-width: 1px;
-}
-
-
-
- -## Functions & Operations - -Are some elements in your style sheet proportional to other elements? -Operations let you add, subtract, divide and multiply property values and colors, -giving you the power to create complex relationships between properties. Operations -should only be performed within parentheses in order to ensure compatibility with CSS. -Functions map one-to-one with JavaScript code, allowing you to manipulate values however -you want. - - - - - -
- 
-// LESS
-
-@the-border: 1px;
-@base-color: #111;
-@red:        #842210;
-
-#header {
-  color: (@base-color * 3);
-  border-left: @the-border;
-  border-right: (@the-border * 2);
-}
-#footer {
-  color: (@base-color + #003300);
-  border-color: desaturate(@red, 10%);
-}
-
-
 - 
/* Compiled CSS */
-
-#header {
-  color: #333;
-  border-left: 1px;
-  border-right: 2px;
-}
-#footer {
-  color: #114411;
-  border-color: #7d2717;
-}
-
-
-
- diff --git a/content/usage/Converting-LESS-to-CSS.md b/content/usage/Converting-LESS-to-CSS.md deleted file mode 100644 index cf4b6710..00000000 --- a/content/usage/Converting-LESS-to-CSS.md +++ /dev/null @@ -1,41 +0,0 @@ -## Node.js 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 -* **[RECESS](https://github.com/twitter/recess)**: Twitter's code quality tool for CSS built on top of LESS. RECESS has options for compiling LESS to CSS, as well as linting, formatting and minifying CSS. -* **[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 - -## Other technologies - -### Java -**Wro4j Runner CLI** -Download the [wro4j-runner.jar](http://wro4j.googlecode.com/files/wro4j-runner-1.4.1-jar-with-dependencies.jar) file and run the following command: -``` bash -java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss` -``` -More details can be found here: [Wro4j Runner CLI](http://code.google.com/p/wro4j/wiki/wro4jRunner) - -### Perl -**CSS::LESSp** -http://search.cpan.org/~drinchev/CSS-LESSp/ -``` bash -lessp.pl styles.less > styles.css -``` - -### Windows -**Windows Script Host** -[LESS.js for Windows](https://github.com/duncansmart/less.js-windows) with this usage: - -``` bash -cscript //nologo lessc.wsf input.less [output.css] [-compress] -``` -or -``` bash -lessc input.less [output.css] [-compress] -``` - -**dotless** -[dotless for Windows](http://www.dotlesscss.org/) can be run like this: - -``` bash -dotless.Compiler.exe [-switches] [outputfile] -``` \ No newline at end of file diff --git a/content/usage/Developing-less.js.md b/content/usage/Developing-less.js.md deleted file mode 100644 index 7584afc9..00000000 --- a/content/usage/Developing-less.js.md +++ /dev/null @@ -1,21 +0,0 @@ -## Install these tools - -* cygwin (ensure make is selected) - http://cygwin.com/install.html -* node - http://nodejs.org/ -* phantomjs - http://phantomjs.org/download.html - -make sure the paths are setup. If you startup cygwin and type `node -v` you should see the node compiler. If you run `phantomjs -v` you should see the phantomjs version number. - -* clone your less.js repository locally -* navigate to your local less.js repository and run `npm install` this installs less' npm dependencies. -* run `npm -g install uglify-js` if you want to do builds. This needs to be done so that uglify-js is available globally. - -## usage - -If you go to the root of the less repository you should be able to do `make test` - this should run the tests. `make browser-test` should run the browser tests. If you want to try out the currrent version of less against a file, from here do `node bin/lessc path/to/file.less` - -To debug the browser tests, run `make browser-test-server` then go to http://localhost:8081/browser/test-runner-main.htm or one of the other test runner pages created in `{path-to-less.js-repository}/test/browser/` - -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 in the current directory. \ No newline at end of file diff --git a/content/usage/Editors-and-Plugins.md b/content/usage/Editors-and-Plugins.md deleted file mode 100644 index 79eba8ff..00000000 --- a/content/usage/Editors-and-Plugins.md +++ /dev/null @@ -1,50 +0,0 @@ -Also see: [[GUI Compilers that use LESS.js]] - -## Text Editors - -* [Crunch!](http://crunchapp.net/): The LESS editor and compiler that almost makes it too easy. -* [Mindscape Web Workbench][web-workbench] (built-in support) "Accelerate and simplify your Web development experience with Visual Studio integrated Sass, Less and CoffeeScript support" -* [NetBeans](http://bits.netbeans.org/download/trunk/nightly/latest) (currently available in latest dev version only, planed for 7.4) -* [TextMate](https://github.com/appden/less.tmbundle) -* [Vim](https://github.com/groenewege/vim-less) -* [jetBrains](http://www.jetbrains.com/phpstorm/) (built in support) - - -#### [Sublime Text 2 & 3](http://sublimetext.com/) -* [LESS-sublime][LESS-sublime] -* [Sublime-LESS-to-CSS][Sublime-LESS-to-CSS] -* [LESS-build-sublime][LESS-build-sublime] -* [SublimeOnSaveBuild][SublimeOnSaveBuild] - -#### Eclipse -* [Plugin](http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html) by Vincent Simonet - - -#### Visual Studio -* [CSS Is Less][CSSisLESS] (Visual Studio) -* [Web Essentials][webessentials] (Visual Studio 2012) - - -#### Dreamweaver -* [DMXzone LESS CSS Compiler][dmx] - -#### [Notepad++ 6.x][Npp] -* [Less.js Syntax Highlighting][Npp-Less-Salitrero] User Defined Language by Raúl Salitrero -* [Less.js Syntax Highlighting][Npp-Less-azrafe7] User Defined Language by azrafe7 -* [How to Install][Npp-How-to] - - - -[SublimeOnSaveBuild]: https://github.com/alexnj/SublimeOnSaveBuild "Sublime Text Package for LESS.js" -[LESS-sublime]: https://github.com/danro/LESS-sublime "Sublime Text Package for LESS.js" -[LESS-build-sublime]: https://github.com/berfarah/LESS-build-sublime "Sublime Text Package for LESS.js" -[Sublime-LESS-to-CSS]: https://github.com/timdouglas/sublime-less2css "Sublime Text Package for LESS.js" -[webessentials]: http://tinyurl.com/WebEssentials2012 -[CSSisLESS]: http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923 -[netbeans]: http://plugins.netbeans.org/plugin/32782/lesscss-module "NetBeans" -[web-workbench]: http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a -[dmx]: http://www.dmxzone.com/go/21514/dmxzone-less-css-compiler-features-unveiled/ -[Npp]: http://notepad-plus-plus.org/ "v6.3+ recommended" -[Npp-Less-Salitrero]: http://sourceforge.net/apps/mediawiki/notepad-plus/?title=User_Defined_Language_Files#L -[Npp-Less-azrafe7]: https://github.com/azrafe7/LESS-for-Notepad-plusplus "improved and with a dark theme" -[Npp-How-to]: http://sourceforge.net/apps/mediawiki/notepad-plus/?title=User_Defined_Language_Files#How_to_install_user_defined_language_files "how to install User Defined Language files" \ No newline at end of file diff --git a/content/usage/advanced-client-side.md b/content/usage/advanced-client-side.md deleted file mode 100644 index 12c21f1e..00000000 --- a/content/usage/advanced-client-side.md +++ /dev/null @@ -1,27 +0,0 @@ -## Watch mode -To enable Watch mode, option `env` must be set to `development`. Then AFTER the less.js file is included, call less.watch(), like this: - -```html - - -``` - -Alternatively you can temporary enable Watch mode by appending `#!watch` to the URL. - -## Modify variables - -Enables modification of LESS variables in run-time. When called with new values, the LESS file is recompiled without reloading. Simple basic usage: - -```js -less.modifyVars({ - '@buttonFace': '#5B83AD', - '@buttonText': '#D9EEF2' -}); -``` - -## Debugging -It is possible to output rules in your CSS which allow tools to locate the source of the rule. - -Either specify the option `dumpLineNumbers` as above or add `!dumpLineNumbers:mediaQuery` to the url. - -You can use the "comments" option with [FireLESS](https://addons.mozilla.org/en-us/firefox/addon/fireless/) and the "mediaQuery" option with FireBug/Chrome dev tools (it is identical to the SCSS media query debugging format). diff --git a/content/usage/options.md b/content/usage/options.md deleted file mode 100644 index 5964accd..00000000 --- a/content/usage/options.md +++ /dev/null @@ -1,107 +0,0 @@ -# Command Line Usage - -> Compile `.less` files to `.css` using the command line - -Heads up! If the command line isn't your thing, learn more about [[GUI compilers for LESS|GUI-compilers-that-use-Less.js]]. - -# lessc - -The binary included in this repository, `bin/lessc` works with [Node.js](http://nodejs.org/) on *nix, OSX and Windows. - -**Usage**: `lessc [option option=parameter ...] [destination]` - -**Options**: - -``` --h, --help Print help (this message) and exit. --v, --version Print version number and exit. - --verbose Be verbose. --s, --silent Suppress output of error messages. - --line-numbers=TYPE Outputs filename and line numbers. ☃ (1) --rp, --rootpath Set rootpath for URL rewriting in relative imports and URLs. ☃ (2) - --include-path Set include paths. ☃ (3) --ru, --relative-urls Re-write relative URLs to the base less file. - --strict-imports Force evaluation of imports. - -x, --compress Compress output by removing some whitespaces. - --yui-compress Compress output using ycssmin --O0, -O1, -O2 Set the parser's optimization level. ☃ (4) - --no-color Disable colorized output. -``` - -**☃ Comments**: - -**(1)** `--line-numbers` `TYPE` can be: - * `comments`: output the debug info within comments. - * `mediaquery`: outputs the information within a fake media query which is compatible with the SASS format. - * `all` does both - -**(2)** `--rootpath`: sorks with or without the `relative-urls` option. - -**(3)** `--include-path`: separated by `:`. Use `;` on Windows. - -**(4)** Optimization levels: The lower the number, the fewer nodes created in the tree. Useful for debugging or if you need to access the individual nodes in the tree. - -# Examples - -``` bash - # compile bootstrap.less to bootstrap.css - $ lessc bootstrap.less bootstrap.css - - # compile bootstrap.less to bootstrap.css and minify (compress) the result - $ lessc -x bootstrap.less bootstrap.css -``` - -### env -Type: `String` -Default: `development` - -Environment to run may be either `development` or `production`. If the document's URL starts with file:// or localhost it will automatically be set to 'development'. - - -### async -Type: `Boolean` -Default: `false` - -Load imports asynchronously. - - -### fileAsync -Type: `Boolean` -Default: `false` - -Load imports asynchronously when in a page under a file protocol. - - -### poll -Type: `Integer` -Default: `1000` - -The amount of time (in milliseconds) between polls while in watch mode. - - -### functions -Type: `object` - -User functions, keyed by name. - - -### dumpLineNumbers -Type: `String` -Options: `comments`|`mediaQuery`|`all` -Default: `comments` - -**TODO**: need more explaination here. - - -### relativeUrls -Type: `Boolean` -Default: `false` - -Optionally adjust URL's to be relative. When false, URL's are already relative to the entry less file. - - -### rootpath -Type: `String` -Default: `false` - -A path to add on to the start of every URL resource. diff --git a/content/usage/plugins.md b/content/usage/plugins.md deleted file mode 100644 index e69de29b..00000000 diff --git a/content/usage/sourcemaps.md b/content/usage/sourcemaps.md deleted file mode 100644 index e69de29b..00000000 diff --git a/data/less.json b/data/less.json deleted file mode 100644 index d01ce768..00000000 --- a/data/less.json +++ /dev/null @@ -1,88 +0,0 @@ -{ - "name": "less", - "version": "1.5.0-b4", - "description": "Leaner CSS", - "homepage": "http://lesscss.org", - "author": { - "name": "Alexis Sellier", - "email": "self@cloudhead.net" - }, - "contributors": [ - "The Core Less Team" - ], - "bugs": { - "url": "https://github.com/less/less.js/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/less/less.js.git" - }, - "licenses": [ - { - "type": "Apache v2", - "url": "https://github.com/less/less.js/blob/master/LICENSE" - } - ], - "bin": { - "lessc": "./bin/lessc" - }, - "main": "./lib/less/index", - "directories": { - "test": "./test" - }, - "jam": { - "main": "./dist/less-1.4.2.js" - }, - "engines": { - "node": ">=0.4.2" - }, - "scripts": { - "test": "grunt test" - }, - "optionalDependencies": { - "mime": "1.2.x", - "request": ">=2.12.0", - "mkdirp": "~0.3.4", - "clean-css": "1.0.x", - "source-map": "0.1.x" - }, - "devDependencies": { - "diff": "~1.0", - "grunt": "~0.4.1", - "grunt-contrib-clean": "~0.5.0", - "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-connect": "~0.3.0", - "grunt-contrib-jasmine": "~0.5.1", - "grunt-contrib-jshint": "~0.6.0", - "grunt-contrib-uglify": "~0.2.2", - "grunt-shell": "~0.3.1", - "http-server": "~0.5.5", - "matchdep": "~0.1.2", - "time-grunt": "~0.1.1" - }, - "keywords": [ - "compile less", - "css nesting", - "css variable", - "css", - "gradients css", - "gradients css3", - "less compiler", - "less css", - "less mixins", - "less", - "less.js", - "lesscss", - "mixins", - "nested css", - "parser", - "preprocessor", - "bootstrap css", - "bootstrap less", - "style", - "styles", - "stylesheet", - "variables in css", - "css less" - ] -} \ No newline at end of file diff --git a/data/utils/pkg.js b/data/utils/pkg.js deleted file mode 100644 index 30a2d3f6..00000000 --- a/data/utils/pkg.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * package.json - */ - -// Node.js -var path = require('path'); - -// node_modules -var grunt = require('grunt'); - -// Config -var cwd = path.join.bind(null, __dirname, '../'); - -var githubApi = require('github'); -var github = new githubApi({ - version: '3.0.0', - timeout: 5000 -}); - -var getPackageFile = function (dest, callback) { - - // Get package.json - github.repos.getContent({ - user: 'less', - repo: 'less.js', - path: 'package.json' - }, - - function (err, resp, cb) { - if (err) { - console.log('error: ' + err); - callback(err, null); - } else { - var b = new Buffer(resp.content, 'base64'); - var pkg = { - name: resp.name, - text: b.toString() - }; - var contents = JSON.parse(pkg.text, 'utf-8'); - grunt.log.ok('Saved:'.yellow, dest); - grunt.file.write(dest, JSON.stringify(contents, null, 2)); - } - }); -}; - -getPackageFile(cwd('data/less.json')); diff --git a/data/utils/repos.js b/data/utils/repos.js deleted file mode 100644 index 01ec7bd0..00000000 --- a/data/utils/repos.js +++ /dev/null @@ -1,41 +0,0 @@ -var grunt = require('grunt'); -var https = require('https'); -var _ = grunt.util._; - -var options = { - host: 'api.github.com', - method: 'GET', - path: '/orgs/less/repos?page=1&per_page=100' -}; - -var request = https.request(options, function (response) { - var body = ''; - response.on('data', function (chunk) { - body += chunk; - }); - response.on('end', function () { - var json = JSON.parse(body); - var repos = []; - json.forEach(function (repo) { - repos.push({ - name : repo.name, - version : repo.version, - description : repo.description, - url : repo.html_url - }); - }); - - var plugins = { - repos: _(repos).sortBy('name') - }; - - grunt.verbose.ok('repos:'.yellow, JSON.stringify(plugins, null, 2)); - grunt.file.write('docs/repos.json', JSON.stringify(plugins, null, 2)); - }); -}); - -request.on('error', function (e) { - console.error(e); -}); - -request.end(); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..0087309b --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + + + + + Moved to less.github.io + + \ No newline at end of file diff --git a/package.json b/package.json deleted file mode 100644 index 30594543..00000000 --- a/package.json +++ /dev/null @@ -1,43 +0,0 @@ -{ - "name": "less-docs", - "description": "Official website and documentation for LESS / Less.js", - "version": "0.1.0", - "homepage": "https://github.com/less/less-docs", - "contributors": [ - { - "name": "Jon Schlinkert", - "url": "https://github.com/jonschlinkert" - } - ], - "repository": { - "type": "git", - "url": "https://github.com/less/less-docs.git" - }, - "bugs": { - "url": "https://github.com/less/less-docs/issues" - }, - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/less/less-docs/blob/master/LICENSE-MIT" - } - ], - "main": "Gruntfile.js", - "devDependencies": { - "assemble": "~0.4.13", - "assemble-contrib-permalinks": "~0.2.0", - "assemble-less": "~0.5.3", - "grunt": "~0.4.1", - "grunt-contrib-clean": "~0.5.0", - "grunt-contrib-jshint": "~0.6.4", - "grunt-readme": "~0.3.4", - "handlebars-helper-prettify": "~0.2.1" - }, - "keywords": [ - "handlebars-helper-prettify", - "less css", - "less", - "less.js", - "lesscss" - ] -} diff --git a/templates/about.hbs b/templates/about.hbs deleted file mode 100644 index e850a5cb..00000000 --- a/templates/about.hbs +++ /dev/null @@ -1,95 +0,0 @@ ---- -layout: default.hbs -title: About -slug: about -lead: "Learn about the history of Less.js, meet the core team, and check out the ever-growing community resources." -base_url: "../" ---- - - - -
-
-

History

-
-

LESS was developed by Alexis Sellier, more commonly known as @cloudhead. The Less.js project is now mantained and extended by the community and the core LESS team.

- - {{md 'content/about/history.md'}} -
- - - -
-
-

Core team

-
-

Less.js is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

-
-
- - - @lukeapage - Luke Page @lukeapage - -
-
- - - @matthewdean - Matthew Dean @matthewdean - -
-
- - - @jonschlinkert - Jon Schlinkert @jonschlinkert - -
-
-

Get involved with Less.js development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.

-
- - - -
-
-

Community

-
-

Stay up to date on the development of Less.js and reach out to the community with these helpful resources.

- -
- - - -
-
-

Ports of Less.js

-
-

LESS has been ported to several other programming languages.

-
    - {{md 'content/about/ports.md'}} -
-

Have another language to add, or perhaps a different or better translation? Let us know by opening an issue.

-
- - - -
-
-

Translations

-
-

Community members have translated Less.js's documentation into various langauges. None are officially supported and may not always be up to date.

-
    - {{> translations }} -
-

Have another language to add, or perhaps a different or better translation? Let us know by opening an issue.

-
diff --git a/templates/blog.hbs b/templates/blog.hbs deleted file mode 100644 index 9ebf13ae..00000000 --- a/templates/blog.hbs +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: default.hbs -title: Blog -slug: blog -lead: Coming soon. -base_url: "../" - -published: false ---- diff --git a/templates/cheatsheet.hbs b/templates/cheatsheet.hbs deleted file mode 100644 index 9b375c2c..00000000 --- a/templates/cheatsheet.hbs +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: default.hbs -title: Cheatsheet -slug: cheatsheet -lead: "Cheatsheet with all of the features and functions of the LESS language." -base_url: "../" - -published: false ---- \ No newline at end of file diff --git a/templates/features.hbs b/templates/features.hbs deleted file mode 100644 index b162d9c2..00000000 --- a/templates/features.hbs +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: default.hbs -title: Language Features -slug: features -lead: "Features supported by Less.js." -base_url: "../" ---- - - -
-
-

Overview

-
-

Simple overview of the basic features

- {{md 'content/overview.md'}} -
- - -
- {{md 'content/features/extend.md'}} - {{md 'content/features/import-directives.md'}} - {{md 'content/features/loops.md'}} - {{md 'content/features/merge.md'}} - {{md 'content/features/mixins.md'}} - {{md 'content/features/mixins-parametric.md'}} - {{md 'content/features/mixin-guards.md'}} - {{md 'content/features/css-guards.md'}} - {{md 'content/features/mixins-as-functions.md'}} - {{md 'content/features/parent-selectors.md'}} - {{md 'content/features/variables.md'}} -
diff --git a/templates/functions.hbs b/templates/functions.hbs deleted file mode 100644 index 563b2d93..00000000 --- a/templates/functions.hbs +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: default.hbs -title: Functions -slug: functions -lead: "Function reference." -base_url: "../" ---- - - -
-
-

Functions

-
-

Built-in functions supported by Less.js.

- - {{#todo}} - Once this section is filled in, also add the side navigation link. -

How to use

-

Lorem ipsum.

- {{/todo}} -
- - -
-

String Functions

- {{md 'content/functions/string.md'}} -
- -
-

Misc Functions

- {{md 'content/functions/misc.md'}} -
- -
-

List Functions

- {{md 'content/functions/list.md'}} -
- -
-

Math Functions

- {{md 'content/functions/math.md'}} -
- - - -
-
-

Color Functions

-
-
- -
-

Color Definition

- {{md 'content/functions/color-definition.md'}} -
- -
-

Color Channel

- {{md 'content/functions/color-channel.md'}} -
- -
-

Color Operations

- {{md 'content/functions/color-operations.md'}} -
- -
-

Color Blending

- {{md 'content/functions/color-blending.md'}} -
\ No newline at end of file diff --git a/templates/includes/ads.hbs b/templates/includes/ads.hbs deleted file mode 100644 index b00bbb0e..00000000 --- a/templates/includes/ads.hbs +++ /dev/null @@ -1,8 +0,0 @@ -
-
-
- -
-
diff --git a/templates/includes/adsense.hbs b/templates/includes/adsense.hbs deleted file mode 100644 index 73f25a4b..00000000 --- a/templates/includes/adsense.hbs +++ /dev/null @@ -1,8 +0,0 @@ -
-
-
- -
-
\ No newline at end of file diff --git a/templates/includes/alexa.hbs b/templates/includes/alexa.hbs deleted file mode 100644 index acef19b6..00000000 --- a/templates/includes/alexa.hbs +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/templates/includes/banner.hbs b/templates/includes/banner.hbs deleted file mode 100644 index 9c637501..00000000 --- a/templates/includes/banner.hbs +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/templates/includes/button-tweet.hbs b/templates/includes/button-tweet.hbs deleted file mode 100644 index e199db25..00000000 --- a/templates/includes/button-tweet.hbs +++ /dev/null @@ -1,30 +0,0 @@ - -
-  Tweet - -
\ No newline at end of file diff --git a/templates/includes/footer.hbs b/templates/includes/footer.hbs deleted file mode 100644 index 2f1e805e..00000000 --- a/templates/includes/footer.hbs +++ /dev/null @@ -1,31 +0,0 @@ - - - - - -{{#live}}{{/live}} - - - - - - - - - - diff --git a/templates/includes/fork-ribbon.hbs b/templates/includes/fork-ribbon.hbs deleted file mode 100644 index 6a2d0a02..00000000 --- a/templates/includes/fork-ribbon.hbs +++ /dev/null @@ -1,3 +0,0 @@ - - Fork me on GitHub - \ No newline at end of file diff --git a/templates/includes/head.hbs b/templates/includes/head.hbs deleted file mode 100644 index 79d8cb25..00000000 --- a/templates/includes/head.hbs +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - {{default title 'LESS'}} | {{site.title}} - - - - - - - - - - - - - - diff --git a/templates/includes/masthead.hbs b/templates/includes/masthead.hbs deleted file mode 100644 index a03dfe1c..00000000 --- a/templates/includes/masthead.hbs +++ /dev/null @@ -1,10 +0,0 @@ -
-
-

Less.js

-

{{{site.description}}}

-

- Download Less.js v{{less.version}} - Download source -

-
-
diff --git a/templates/includes/nav-about.hbs b/templates/includes/nav-about.hbs deleted file mode 100644 index b2bac54f..00000000 --- a/templates/includes/nav-about.hbs +++ /dev/null @@ -1,5 +0,0 @@ -
  • History
    • -
  • Core team
    • -
  • Ports
    • -
  • Community
    • -
  • Translations
    • diff --git a/templates/includes/nav-blog.hbs b/templates/includes/nav-blog.hbs deleted file mode 100644 index 2cf12359..00000000 --- a/templates/includes/nav-blog.hbs +++ /dev/null @@ -1,12 +0,0 @@ -
  • - History -
    • -
  • - Core team -
    • -
  • - Community -
    • -
  • - Translations -
    • diff --git a/templates/includes/nav-cheatsheet.hbs b/templates/includes/nav-cheatsheet.hbs deleted file mode 100644 index f7a705b5..00000000 --- a/templates/includes/nav-cheatsheet.hbs +++ /dev/null @@ -1,137 +0,0 @@ -
  • - Glyphicons - -
    • -
  • - Dropdowns - -
    • -
  • - Button groups - -
    • -
  • - Button dropdowns - -
    • -
  • - Input groups - -
    • -
  • - Navs - -
    • -
  • - Navbar - -
    • -
  • Breadcrumbs
    • -
  • - Pagination - -
    • -
  • Labels
    • -
  • Badges
    • -
  • Jumbotron
    • -
  • Page header
    • -
  • - Thumbnails - -
    • -
  • - Alerts - -
    • -
  • - Progress bars - -
    • -
  • - Media object - -
    • -
  • - List group - -
    • -
  • - Panels - -
    • -
  • Wells
    • diff --git a/templates/includes/nav-features.hbs b/templates/includes/nav-features.hbs deleted file mode 100644 index 3348c58d..00000000 --- a/templates/includes/nav-features.hbs +++ /dev/null @@ -1,15 +0,0 @@ -
  • Overview
    • -
  • Extend
    • -
  • Import Directives
    • -
  • Loops
    • -
  • Merge
    • -
  • Mixins
    • -
  • Parametric Mixins
    • -
  • Mixin Guards
    • -
  • Default Function
    • -
  • CSS Guards
    • -
  • Mixins as Functions
    • -
  • Parent Selectors
    • -
  • Scope
    • -
  • Strict Math
    • -
  • Variables
    • \ No newline at end of file diff --git a/templates/includes/nav-functions.hbs b/templates/includes/nav-functions.hbs deleted file mode 100644 index ca0c81ce..00000000 --- a/templates/includes/nav-functions.hbs +++ /dev/null @@ -1,100 +0,0 @@ -
  • Functions Overview
    • -{{#todo}} -
  • How to use
    • -{{/todo}} -
  • - String - -
    • -
  • - Misc - -
    • -
  • - Math - -
    • -
  • - Color Definition - -
    • -
  • - Color Channel - -
    • -
  • - Color Operations - -
    • -
  • - Color Blending - -
    • diff --git a/templates/includes/nav-getting-started.hbs b/templates/includes/nav-getting-started.hbs deleted file mode 100644 index 56e832fa..00000000 --- a/templates/includes/nav-getting-started.hbs +++ /dev/null @@ -1,29 +0,0 @@ -
  • - Getting Started - -
    • -
  • - Using Less - -
    • -
  • - Browser support -
    • -
  • - Third party support -
    • -
  • - License FAQs -
    • diff --git a/templates/includes/nav-main.hbs b/templates/includes/nav-main.hbs deleted file mode 100644 index 45e266e0..00000000 --- a/templates/includes/nav-main.hbs +++ /dev/null @@ -1,38 +0,0 @@ - diff --git a/templates/includes/social-buttons.hbs b/templates/includes/social-buttons.hbs deleted file mode 100644 index 5a2e9857..00000000 --- a/templates/includes/social-buttons.hbs +++ /dev/null @@ -1,10 +0,0 @@ -
    -
      -
    • - -
      • -
    • - -
      • -
    -
    diff --git a/templates/includes/translations.hbs b/templates/includes/translations.hbs deleted file mode 100644 index c1ef7f5f..00000000 --- a/templates/includes/translations.hbs +++ /dev/null @@ -1 +0,0 @@ -{{md 'content/about/translations.md'}} \ No newline at end of file diff --git a/templates/index.hbs b/templates/index.hbs deleted file mode 100644 index 4905077b..00000000 --- a/templates/index.hbs +++ /dev/null @@ -1,121 +0,0 @@ ---- -layout: default.hbs -title: Getting started -slug: index -lead: "An overview of Less, how to download and use, examples and more." -base_url: "../" ---- - - -
    -
    -

    Getting Started

    -
    - {{md 'content/front/getting-started.md'}} -
    - - - -
    -
    -

    Using Less

    -
    -

    Less can be used in a few different ways

    - - Install via NPM - -

    Download Less.js v{{less.version}}

    - -

    Additional downloads

    -
    -

    - Download source code -

    -

    Get the latest Less.js source code by downloading it directly from GitHub.

    -

    - Clone or fork via GitHub -

    -

    Visit us on GitHub to clone or fork the Less.js project.

    -

    - Install with Bower -

    -

    Install the Less.js project and JavaScript using Bower.

    - -{{#markdown}} -```bash -bower install less -``` -{{/markdown}} - -
    - -

    Less CDN

    -

    TODO CDN.

    - -{{#markdown}} -```html - -``` -{{/markdown}} - - {{#todo}} -
    -

    Compiling Less.js files

    -

    If you are developing with Less.js ....

    -
    - {{/todo}} -
    - - - -
    -
    -

    Browser support

    -
    - {{md 'content/front/browser-support.md'}} -
    - - -
    -
    -

    License FAQs

    -
    -

    Less is released under the Apache 2 license and is copyright {{ now "%Y" }} The Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

    - -
    -
    -

    It allows you to:

    -
      -
    • Freely download and use Less.js, in whole or in part, for personal, company internal or commercial purposes
      • -
    • Use Less.js in packages or distributions that you create
      • -
    -
    -
    -

    It forbids you to:

    -
      -
    • Redistribute any piece of Less.js without proper attribution
      • -
    -
    -
    -
    -
    -

    It requires you to:

    -
      -
    • Include a copy of the license in any redistribution you may make that includes Less.js
      • -
    • Provide clear attribution to The Less Core Team for any distributions that include Less.js
      • -
    -
    -
    -

    It does not require you to:

    -
      -
    • Include the source of Less.js itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
      • -
    • Submit changes that you make to Less.js back to the Less.js project (though such feedback is encouraged)
      • -
    -
    -
    -

    The full Less.js license is located in the project repository for more information.

    -
    diff --git a/templates/layouts/default.hbs b/templates/layouts/default.hbs deleted file mode 100644 index a6363223..00000000 --- a/templates/layouts/default.hbs +++ /dev/null @@ -1,92 +0,0 @@ -{{#prettify}} - - - - {{> head }} - - - Skip to main content - - - {{> nav-main }} - - -
    -
    -

    {{ title }}

    -

    {{ lead }}

    - {{!> ads }} -
    -
    - - - {{> banner }} - - -
    -
    -
    - -
    -
    - {{> body }} -
    -
    -
    - - - - - - {{> footer }} - - - -{{/prettify}} \ No newline at end of file diff --git a/theme/bootstrap/alerts.less b/theme/bootstrap/alerts.less deleted file mode 100644 index 3eab0662..00000000 --- a/theme/bootstrap/alerts.less +++ /dev/null @@ -1,67 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - - -// Base styles -// ------------------------- - -.alert { - padding: @alert-padding; - margin-bottom: @line-height-computed; - border: 1px solid transparent; - border-radius: @alert-border-radius; - - // Headings for larger alerts - h4 { - margin-top: 0; - // Specified for the h4 to prevent conflicts of changing @headings-color - color: inherit; - } - // Provide class for links that match alerts - .alert-link { - font-weight: @alert-link-font-weight; - } - - // Improve alignment and spacing of inner content - > p, - > ul { - margin-bottom: 0; - } - > p + p { - margin-top: 5px; - } -} - -// Dismissable alerts -// -// Expand the right padding and account for the close button's positioning. - -.alert-dismissable { - padding-right: (@alert-padding + 20); - - // Adjust close link position - .close { - position: relative; - top: -2px; - right: -21px; - color: inherit; - } -} - -// Alternate styles -// -// Generate contextual modifier classes for colorizing the alert. - -.alert-success { - .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); -} -.alert-info { - .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); -} -.alert-warning { - .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); -} -.alert-danger { - .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); -} diff --git a/theme/bootstrap/badges.less b/theme/bootstrap/badges.less deleted file mode 100644 index 0b69753e..00000000 --- a/theme/bootstrap/badges.less +++ /dev/null @@ -1,51 +0,0 @@ -// -// Badges -// -------------------------------------------------- - - -// Base classes -.badge { - display: inline-block; - min-width: 10px; - padding: 3px 7px; - font-size: @font-size-small; - font-weight: @badge-font-weight; - color: @badge-color; - line-height: @badge-line-height; - vertical-align: baseline; - white-space: nowrap; - text-align: center; - background-color: @badge-bg; - border-radius: @badge-border-radius; - - // Empty badges collapse automatically (not available in IE8) - &:empty { - display: none; - } -} - -// Hover state, but only for links -a.badge { - &:hover, - &:focus { - color: @badge-link-hover-color; - text-decoration: none; - cursor: pointer; - } -} - -// Quick fix for labels/badges in buttons -.btn .badge { - position: relative; - top: -1px; -} - -// Account for counters in navs -a.list-group-item.active > .badge, -.nav-pills > .active > a > .badge { - color: @badge-active-color; - background-color: @badge-active-bg; -} -.nav-pills > li > a > .badge { - margin-left: 3px; -} diff --git a/theme/bootstrap/bootstrap.less b/theme/bootstrap/bootstrap.less deleted file mode 100644 index 232cc9ac..00000000 --- a/theme/bootstrap/bootstrap.less +++ /dev/null @@ -1,49 +0,0 @@ -// Core variables and mixins -/*@import "variables.less";*/ -@import "mixins.less"; - -// Reset -@import "normalize.less"; -@import "print.less"; - -// Core CSS -@import "scaffolding.less"; -@import "type.less"; -@import "code.less"; -@import "grid.less"; -@import "tables.less"; -@import "forms.less"; -@import "buttons.less"; - -// Components -@import "component-animations.less"; -@import "glyphicons.less"; -@import "dropdowns.less"; -@import "button-groups.less"; -@import "input-groups.less"; -@import "navs.less"; -@import "navbar.less"; -@import "breadcrumbs.less"; -@import "pagination.less"; -@import "pager.less"; -@import "labels.less"; -@import "badges.less"; -@import "jumbotron.less"; -@import "thumbnails.less"; -@import "alerts.less"; -@import "progress-bars.less"; -@import "media.less"; -@import "list-group.less"; -@import "panels.less"; -@import "wells.less"; -@import "close.less"; - -// Components w/ JavaScript -@import "modals.less"; -@import "tooltip.less"; -@import "popovers.less"; -@import "carousel.less"; - -// Utility classes -@import "utilities.less"; -@import "responsive-utilities.less"; diff --git a/theme/bootstrap/breadcrumbs.less b/theme/bootstrap/breadcrumbs.less deleted file mode 100644 index 60b33ea7..00000000 --- a/theme/bootstrap/breadcrumbs.less +++ /dev/null @@ -1,23 +0,0 @@ -// -// Breadcrumbs -// -------------------------------------------------- - - -.breadcrumb { - padding: 8px 15px; - margin-bottom: @line-height-computed; - list-style: none; - background-color: @breadcrumb-bg; - border-radius: @border-radius-base; - > li { - display: inline-block; - + li:before { - content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space - padding: 0 5px; - color: @breadcrumb-color; - } - } - > .active { - color: @breadcrumb-active-color; - } -} diff --git a/theme/bootstrap/button-groups.less b/theme/bootstrap/button-groups.less deleted file mode 100644 index 43ada11d..00000000 --- a/theme/bootstrap/button-groups.less +++ /dev/null @@ -1,248 +0,0 @@ -// -// Button groups -// -------------------------------------------------- - -// Button carets -// -// Match the button text color to the arrow/caret for indicating dropdown-ness. - -.caret { - .btn-default & { - border-top-color: @btn-default-color; - } - .btn-primary &, - .btn-success &, - .btn-warning &, - .btn-danger &, - .btn-info & { - border-top-color: #fff; - } -} -.dropup { - & .btn-default .caret { - border-bottom-color: @btn-default-color; - } - .btn-primary, - .btn-success, - .btn-warning, - .btn-danger, - .btn-info { - .caret { - border-bottom-color: #fff; - } - } -} - -// Make the div behave like a button -.btn-group, -.btn-group-vertical { - position: relative; - display: inline-block; - vertical-align: middle; // match .btn alignment given font-size hack above - > .btn { - position: relative; - float: left; - // Bring the "active" button to the front - &:hover, - &:focus, - &:active, - &.active { - z-index: 2; - } - &:focus { - // Remove focus outline when dropdown JS adds it after closing the menu - outline: none; - } - } -} - -// Prevent double borders when buttons are next to each other -.btn-group { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-left: -1px; - } -} - -// Optional: Group multiple button groups together for a toolbar -.btn-toolbar { - .clearfix(); - - .btn-group { - float: left; - } - // Space out series of button groups - > .btn, - > .btn-group { - + .btn, - + .btn-group { - margin-left: 5px; - } - } -} - -.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-radius: 0; -} - -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group > .btn:first-child { - margin-left: 0; - &:not(:last-child):not(.dropdown-toggle) { - .border-right-radius(0); - } -} -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child:not(:first-child), -.btn-group > .dropdown-toggle:not(:first-child) { - .border-left-radius(0); -} - -// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) -.btn-group > .btn-group { - float: left; -} -.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group > .btn-group:first-child { - > .btn:last-child, - > .dropdown-toggle { - .border-right-radius(0); - } -} -.btn-group > .btn-group:last-child > .btn:first-child { - .border-left-radius(0); -} - -// On active and open, don't show outline -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - - -// Sizing -// -// Remix the default button sizing classes into new ones for easier manipulation. - -.btn-group-xs > .btn { .btn-xs(); } -.btn-group-sm > .btn { .btn-sm(); } -.btn-group-lg > .btn { .btn-lg(); } - - -// Split button dropdowns -// ---------------------- - -// Give the line between buttons some depth -.btn-group > .btn + .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; -} -.btn-group > .btn-lg + .dropdown-toggle { - padding-left: 12px; - padding-right: 12px; -} - -// The clickable button for toggling the menu -// Remove the gradient and set the same inset shadow as the :active state -.btn-group.open .dropdown-toggle { - .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); -} - - -// Reposition the caret -.btn .caret { - margin-left: 0; -} -// Carets in other button sizes -.btn-lg .caret { - border-width: @caret-width-large @caret-width-large 0; - border-bottom-width: 0; -} -// Upside down carets for .dropup -.dropup .btn-lg .caret { - border-width: 0 @caret-width-large @caret-width-large; -} - - -// Vertical button groups -// ---------------------- - -.btn-group-vertical { - > .btn, - > .btn-group { - display: block; - float: none; - width: 100%; - max-width: 100%; - } - - // Clear floats so dropdown menus can be properly placed - > .btn-group { - .clearfix(); - > .btn { - float: none; - } - } - - > .btn + .btn, - > .btn + .btn-group, - > .btn-group + .btn, - > .btn-group + .btn-group { - margin-top: -1px; - margin-left: 0; - } -} - -.btn-group-vertical > .btn { - &:not(:first-child):not(:last-child) { - border-radius: 0; - } - &:first-child:not(:last-child) { - border-top-right-radius: @border-radius-base; - .border-bottom-radius(0); - } - &:last-child:not(:first-child) { - border-bottom-left-radius: @border-radius-base; - .border-top-radius(0); - } -} -.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group-vertical > .btn-group:first-child { - > .btn:last-child, - > .dropdown-toggle { - .border-bottom-radius(0); - } -} -.btn-group-vertical > .btn-group:last-child > .btn:first-child { - .border-top-radius(0); -} - - - -// Justified button groups -// ---------------------- - -.btn-group-justified { - display: table; - width: 100%; - table-layout: fixed; - border-collapse: separate; - .btn { - float: none; - display: table-cell; - width: 1%; - } -} - - -// Checkbox and radio options -[data-toggle="buttons"] > .btn > input[type="radio"], -[data-toggle="buttons"] > .btn > input[type="checkbox"] { - display: none; -} diff --git a/theme/bootstrap/buttons.less b/theme/bootstrap/buttons.less deleted file mode 100644 index a0909606..00000000 --- a/theme/bootstrap/buttons.less +++ /dev/null @@ -1,158 +0,0 @@ -// -// Buttons -// -------------------------------------------------- - - -// Base styles -// -------------------------------------------------- - -// Core styles -.btn { - display: inline-block; - margin-bottom: 0; // For input.btn - font-weight: @btn-font-weight; - text-align: center; - vertical-align: middle; - cursor: pointer; - background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 - border: 1px solid transparent; - white-space: nowrap; - .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); - .user-select(none); - - &:focus { - .tab-focus(); - } - - &:hover, - &:focus { - color: @btn-default-color; - text-decoration: none; - } - - &:active, - &.active { - outline: 0; - background-image: none; - .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); - } - - &.disabled, - &[disabled], - fieldset[disabled] & { - cursor: not-allowed; - pointer-events: none; // Future-proof disabling of clicks - .opacity(.65); - .box-shadow(none); - } - -} - - -// Alternate buttons -// -------------------------------------------------- - -.btn-default { - .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); -} -.btn-primary { - .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); -} -// Warning appears as orange -.btn-warning { - .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); -} -// Danger and error appear as red -.btn-danger { - .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); -} -// Success appears as green -.btn-success { - .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); -} -// Info appears as blue-green -.btn-info { - .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); -} - - -// Link buttons -// ------------------------- - -// Make a button look and behave like a link -.btn-link { - color: @link-color; - font-weight: normal; - cursor: pointer; - border-radius: 0; - - &, - &:active, - &[disabled], - fieldset[disabled] & { - background-color: transparent; - .box-shadow(none); - } - &, - &:hover, - &:focus, - &:active { - border-color: transparent; - } - &:hover, - &:focus { - color: @link-hover-color; - text-decoration: underline; - background-color: transparent; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: @btn-link-disabled-color; - text-decoration: none; - } - } -} - - -// Button Sizes -// -------------------------------------------------- - -.btn-lg { - // line-height: ensure even-numbered height of button next to large input - .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); -} -.btn-sm, -.btn-xs { - // line-height: ensure proper height of button next to small input - .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); -} -.btn-xs { - padding: 1px 5px; -} - - -// Block button -// -------------------------------------------------- - -.btn-block { - display: block; - width: 100%; - padding-left: 0; - padding-right: 0; -} - -// Vertically space out multiple block buttons -.btn-block + .btn-block { - margin-top: 5px; -} - -// Specificity overrides -input[type="submit"], -input[type="reset"], -input[type="button"] { - &.btn-block { - width: 100%; - } -} diff --git a/theme/bootstrap/carousel.less b/theme/bootstrap/carousel.less deleted file mode 100644 index 59e4fadf..00000000 --- a/theme/bootstrap/carousel.less +++ /dev/null @@ -1,220 +0,0 @@ -// -// Carousel -// -------------------------------------------------- - - -// Wrapper for the slide container and indicators -.carousel { - position: relative; -} - -.carousel-inner { - position: relative; - overflow: hidden; - width: 100%; - - > .item { - display: none; - position: relative; - .transition(.6s ease-in-out left); - - // Account for jankitude on images - > img, - > a > img { - .img-responsive(); - line-height: 1; - } - } - - > .active, - > .next, - > .prev { display: block; } - - > .active { - left: 0; - } - - > .next, - > .prev { - position: absolute; - top: 0; - width: 100%; - } - - > .next { - left: 100%; - } - > .prev { - left: -100%; - } - > .next.left, - > .prev.right { - left: 0; - } - - > .active.left { - left: -100%; - } - > .active.right { - left: 100%; - } - -} - -// Left/right controls for nav -// --------------------------- - -.carousel-control { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: @carousel-control-width; - .opacity(@carousel-control-opacity); - font-size: @carousel-control-font-size; - color: @carousel-control-color; - text-align: center; - text-shadow: @carousel-text-shadow; - // We can't have this transition here because webkit cancels the carousel - // animation if you trip this while in the middle of another animation. - - // Set gradients for backgrounds - &.left { - #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); - } - &.right { - left: auto; - right: 0; - #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); - } - - // Hover/focus state - &:hover, - &:focus { - color: @carousel-control-color; - text-decoration: none; - .opacity(.9); - } - - // Toggles - .icon-prev, - .icon-next, - .glyphicon-chevron-left, - .glyphicon-chevron-right { - position: absolute; - top: 50%; - z-index: 5; - display: inline-block; - } - .icon-prev, - .glyphicon-chevron-left { - left: 50%; - } - .icon-next, - .glyphicon-chevron-right { - right: 50%; - } - .icon-prev, - .icon-next { - width: 20px; - height: 20px; - margin-top: -10px; - margin-left: -10px; - font-family: serif; - } - - .icon-prev { - &:before { - content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) - } - } - .icon-next { - &:before { - content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) - } - } -} - -// Optional indicator pips -// -// Add an unordered list with the following class and add a list item for each -// slide your carousel holds. - -.carousel-indicators { - position: absolute; - bottom: 10px; - left: 50%; - z-index: 15; - width: 60%; - margin-left: -30%; - padding-left: 0; - list-style: none; - text-align: center; - - li { - display: inline-block; - width: 10px; - height: 10px; - margin: 1px; - text-indent: -999px; - border: 1px solid @carousel-indicator-border-color; - border-radius: 10px; - cursor: pointer; - } - .active { - margin: 0; - width: 12px; - height: 12px; - background-color: @carousel-indicator-active-bg; - } -} - -// Optional captions -// ----------------------------- -// Hidden by default for smaller viewports -.carousel-caption { - position: absolute; - left: 15%; - right: 15%; - bottom: 20px; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: @carousel-caption-color; - text-align: center; - text-shadow: @carousel-text-shadow; - & .btn { - text-shadow: none; // No shadow for button elements in carousel-caption - } -} - - -// Scale up controls for tablets and up -@media screen and (min-width: @screen-sm-min) { - - // Scale up the controls a smidge - .carousel-control { - .glyphicons-chevron-left, - .glyphicons-chevron-right, - .icon-prev, - .icon-next { - width: 30px; - height: 30px; - margin-top: -15px; - margin-left: -15px; - font-size: 30px; - } - } - - // Show and left align the captions - .carousel-caption { - left: 20%; - right: 20%; - padding-bottom: 30px; - } - - // Move up the indicators - .carousel-indicators { - bottom: 20px; - } -} diff --git a/theme/bootstrap/close.less b/theme/bootstrap/close.less deleted file mode 100644 index 9b4e74f2..00000000 --- a/theme/bootstrap/close.less +++ /dev/null @@ -1,33 +0,0 @@ -// -// Close icons -// -------------------------------------------------- - - -.close { - float: right; - font-size: (@font-size-base * 1.5); - font-weight: @close-font-weight; - line-height: 1; - color: @close-color; - text-shadow: @close-text-shadow; - .opacity(.2); - - &:hover, - &:focus { - color: @close-color; - text-decoration: none; - cursor: pointer; - .opacity(.5); - } - - // Additional properties for button version - // iOS requires the button element instead of an anchor tag. - // If you want the anchor version, it requires `href="#"`. - button& { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; - } -} diff --git a/theme/bootstrap/code.less b/theme/bootstrap/code.less deleted file mode 100644 index 54ab46ac..00000000 --- a/theme/bootstrap/code.less +++ /dev/null @@ -1,53 +0,0 @@ -// -// Code (inline and blocK) -// -------------------------------------------------- - - -// Inline and block code styles -code, -kbd, -pre, -samp { - font-family: @font-family-monospace; -} - -// Inline code -code { - padding: 2px 4px; - font-size: 90%; - color: @code-color; - background-color: @code-bg; - white-space: nowrap; - border-radius: @border-radius-base; -} - -// Blocks of code -pre { - display: block; - padding: ((@line-height-computed - 1) / 2); - margin: 0 0 (@line-height-computed / 2); - font-size: (@font-size-base - 1); // 14px to 13px - line-height: @line-height-base; - word-break: break-all; - word-wrap: break-word; - color: @pre-color; - background-color: @pre-bg; - border: 1px solid @pre-border-color; - border-radius: @border-radius-base; - - // Account for some code outputs that place code tags in pre tags - code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; - } -} - -// Enable scrollable blocks of code -.pre-scrollable { - max-height: @pre-scrollable-max-height; - overflow-y: scroll; -} diff --git a/theme/bootstrap/component-animations.less b/theme/bootstrap/component-animations.less deleted file mode 100644 index 1efe45e2..00000000 --- a/theme/bootstrap/component-animations.less +++ /dev/null @@ -1,29 +0,0 @@ -// -// Component animations -// -------------------------------------------------- - -// Heads up! -// -// We don't use the `.opacity()` mixin here since it causes a bug with text -// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. - -.fade { - opacity: 0; - .transition(opacity .15s linear); - &.in { - opacity: 1; - } -} - -.collapse { - display: none; - &.in { - display: block; - } -} -.collapsing { - position: relative; - height: 0; - overflow: hidden; - .transition(height .35s ease); -} diff --git a/theme/bootstrap/dropdowns.less b/theme/bootstrap/dropdowns.less deleted file mode 100644 index e6bd1877..00000000 --- a/theme/bootstrap/dropdowns.less +++ /dev/null @@ -1,192 +0,0 @@ -// -// Dropdown menus -// -------------------------------------------------- - - -// Dropdown arrow/caret -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: @caret-width-base solid @dropdown-caret-color; - border-right: @caret-width-base solid transparent; - border-left: @caret-width-base solid transparent; - // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed, - // we can just straight up remove this. - border-bottom: 0 dotted; -} - -// The dropdown wrapper (div) -.dropdown { - position: relative; -} - -// Prevent the focus on the dropdown toggle when closing dropdowns -.dropdown-toggle:focus { - outline: 0; -} - -// The dropdown menu (ul) -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: @zindex-dropdown; - display: none; // none by default, but block on "open" of the menu - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; // override default ul - list-style: none; - font-size: @font-size-base; - background-color: @dropdown-bg; - border: 1px solid @dropdown-fallback-border; // IE8 fallback - border: 1px solid @dropdown-border; - border-radius: @border-radius-base; - .box-shadow(0 6px 12px rgba(0,0,0,.175)); - background-clip: padding-box; - - // Aligns the dropdown menu to right - &.pull-right { - right: 0; - left: auto; - } - - // Dividers (basically an hr) within the dropdown - .divider { - .nav-divider(@dropdown-divider-bg); - } - - // Links within the dropdown menu - > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: @line-height-base; - color: @dropdown-link-color; - white-space: nowrap; // prevent links from randomly breaking onto new lines - } -} - -// Hover/Focus state -.dropdown-menu > li > a { - &:hover, - &:focus { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - } -} - -// Active state -.dropdown-menu > .active > a { - &, - &:hover, - &:focus { - color: @dropdown-link-active-color; - text-decoration: none; - outline: 0; - background-color: @dropdown-link-active-bg; - } -} - -// Disabled state -// -// Gray out text and ensure the hover/focus state remains gray - -.dropdown-menu > .disabled > a { - &, - &:hover, - &:focus { - color: @dropdown-link-disabled-color; - } -} -// Nuke hover/focus effects -.dropdown-menu > .disabled > a { - &:hover, - &:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - .reset-filter(); - cursor: not-allowed; - } -} - -// Open state for the dropdown -.open { - // Show the menu - > .dropdown-menu { - display: block; - } - - // Remove the outline when :focus is triggered - > a { - outline: 0; - } -} - -// Dropdown section headers -.dropdown-header { - display: block; - padding: 3px 20px; - font-size: @font-size-small; - line-height: @line-height-base; - color: @dropdown-header-color; -} - -// Backdrop to catch body clicks on mobile, etc. -.dropdown-backdrop { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: @zindex-dropdown - 10; -} - -// Right aligned dropdowns -.pull-right > .dropdown-menu { - right: 0; - left: auto; -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// -// Just add .dropup after the standard .dropdown class and you're set, bro. -// TODO: abstract this so that the navbar fixed styles are not placed here? - -.dropup, -.navbar-fixed-bottom .dropdown { - // Reverse the caret - .caret { - // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this - // gets fixed, restore `border-top: 0;`. - border-top: 0 dotted; - border-bottom: 4px solid @dropdown-caret-color; - content: ""; - } - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 1px; - } -} - - -// Component alignment -// -// Reiterate per navbar.less and the modified component alignment there. - -@media (min-width: @grid-float-breakpoint) { - .navbar-right { - .dropdown-menu { - .pull-right > .dropdown-menu(); - } - } -} - diff --git a/theme/bootstrap/forms.less b/theme/bootstrap/forms.less deleted file mode 100644 index f6bbce59..00000000 --- a/theme/bootstrap/forms.less +++ /dev/null @@ -1,366 +0,0 @@ -// -// Forms -// -------------------------------------------------- - - -// Normalize non-controls -// -// Restyle and baseline non-control form elements. - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @line-height-computed; - font-size: (@font-size-base * 1.5); - line-height: inherit; - color: @legend-color; - border: 0; - border-bottom: 1px solid @legend-border-color; -} - -label { - display: inline-block; - margin-bottom: 5px; - font-weight: bold; -} - - -// Normalize form controls - -// Override content-box in Normalize (* isn't specific enough) -input[type="search"] { - .box-sizing(border-box); -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ - line-height: normal; -} - -// Set the height of select and file controls to match text inputs -input[type="file"] { - display: block; -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611 -select optgroup { - font-size: inherit; - font-style: inherit; - font-family: inherit; -} - -// Focus for select, file, radio, and checkbox -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - .tab-focus(); -} - -// Fix for Chrome number input -// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button. -// See https://github.com/twbs/bootstrap/issues/8350 for more. -input[type="number"] { - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - height: auto; - } -} - -// Adjust output element -output { - display: block; - padding-top: (@padding-base-vertical + 1); - font-size: @font-size-base; - line-height: @line-height-base; - color: @input-color; - vertical-align: middle; -} - -// Placeholder -// -// Placeholder text gets special styles because when browsers invalidate entire -// lines if it doesn't understand a selector/ -.form-control { - .placeholder(); -} - - -// Common form controls -// -// Shared size and type resets for form controls. Apply `.form-control` to any -// of the following form controls: -// -// select -// textarea -// input[type="text"] -// input[type="password"] -// input[type="datetime"] -// input[type="datetime-local"] -// input[type="date"] -// input[type="month"] -// input[type="time"] -// input[type="week"] -// input[type="number"] -// input[type="email"] -// input[type="url"] -// input[type="search"] -// input[type="tel"] -// input[type="color"] - -.form-control { - display: block; - width: 100%; - height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - padding: @padding-base-vertical @padding-base-horizontal; - font-size: @font-size-base; - line-height: @line-height-base; - color: @input-color; - vertical-align: middle; - background-color: @input-bg; - background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 - border: 1px solid @input-border; - border-radius: @input-border-radius; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); - - // Customize the `:focus` state to imitate native WebKit styles. - .form-control-focus(); - - // Disabled and read-only inputs - // Note: HTML5 says that controls under a fieldset > legend:first-child won't - // be disabled if the fieldset is disabled. Due to implementation difficulty, - // we don't honor that edge case; we style them as disabled anyway. - &[disabled], - &[readonly], - fieldset[disabled] & { - cursor: not-allowed; - background-color: @input-bg-disabled; - } - - // Reset height for `textarea`s - textarea& { - height: auto; - } -} - - -// Form groups -// -// Designed to help with the organization and spacing of vertical forms. For -// horizontal forms, use the predefined grid classes. - -.form-group { - margin-bottom: 15px; -} - - -// Checkboxes and radios -// -// Indent the labels to position radios/checkboxes as hanging controls. - -.radio, -.checkbox { - display: block; - min-height: @line-height-computed; // clear the floating input if there is no label text - margin-top: 10px; - margin-bottom: 10px; - padding-left: 20px; - vertical-align: middle; - label { - display: inline; - margin-bottom: 0; - font-weight: normal; - cursor: pointer; - } -} -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { - float: left; - margin-left: -20px; -} -.radio + .radio, -.checkbox + .checkbox { - margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing -} - -// Radios and checkboxes on same line -.radio-inline, -.checkbox-inline { - display: inline-block; - padding-left: 20px; - margin-bottom: 0; - vertical-align: middle; - font-weight: normal; - cursor: pointer; -} -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline { - margin-top: 0; - margin-left: 10px; // space out consecutive inline controls -} - -// Apply same disabled cursor tweak as for inputs -// -// Note: Neither radios nor checkboxes can be readonly. -input[type="radio"], -input[type="checkbox"], -.radio, -.radio-inline, -.checkbox, -.checkbox-inline { - &[disabled], - fieldset[disabled] & { - cursor: not-allowed; - } -} - -// Form control sizing -.input-sm { - .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); -} - -.input-lg { - .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); -} - - -// Form control feedback states -// -// Apply contextual and semantic states to individual form controls. - -// Warning -.has-warning { - .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); -} -// Error -.has-error { - .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); -} -// Success -.has-success { - .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); -} - - -// Static form control text -// -// Apply class to a `p` element to make any string of text align with labels in -// a horizontal form layout. - -.form-control-static { - margin-bottom: 0; // Remove default margin from `p` -} - - -// Help text -// -// Apply to any element you wish to create light text for placement immediately -// below a form control. Use for general help, formatting, or instructional text. - -.help-block { - display: block; // account for any element using help-block - margin-top: 5px; - margin-bottom: 10px; - color: lighten(@text-color, 25%); // lighten the text some for contrast -} - - - -// Inline forms -// -// Make forms appear inline(-block) by adding the `.form-inline` class. Inline -// forms begin stacked on extra small (mobile) devices and then go inline when -// viewports reach <768px. -// -// Requires wrapping inputs and labels with `.form-group` for proper display of -// default HTML form controls and our custom form controls (e.g., input groups). -// -// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. - -.form-inline { - - // Kick in the inline - @media (min-width: @screen-sm) { - // Inline-block all the things for "inline" - .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } - - // In navbar-form, allow folks to *not* use `.form-group` - .form-control { - display: inline-block; - } - - // Remove default margin on radios/checkboxes that were used for stacking, and - // then undo the floating of radios and checkboxes to match (which also avoids - // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). - .radio, - .checkbox { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - padding-left: 0; - } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { - float: none; - margin-left: 0; - } - } -} - - -// Horizontal forms -// -// Horizontal forms are built on grid classes and allow you to create forms with -// labels on the left and inputs on the right. - -.form-horizontal { - - // Consistent vertical alignment of labels, radios, and checkboxes - .control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - margin-top: 0; - margin-bottom: 0; - padding-top: (@padding-base-vertical + 1); // Default padding plus a border - } - - // Make form groups behave like rows - .form-group { - .make-row(); - } - - .form-control-static { - padding-top: (@padding-base-vertical + 1); - } - - // Only right align form labels here when the columns stop stacking - @media (min-width: @screen-sm-min) { - .control-label { - text-align: right; - } - } -} diff --git a/theme/bootstrap/glyphicons.less b/theme/bootstrap/glyphicons.less deleted file mode 100644 index 709d3186..00000000 --- a/theme/bootstrap/glyphicons.less +++ /dev/null @@ -1,236 +0,0 @@ -// -// Glyphicons for Bootstrap -// -// Since icons are fonts, they can be placed anywhere text is placed and are -// thus automatically sized to match the surrounding child. To use, create an -// inline element with the appropriate classes, like so: -// -// Star - -// Import the fonts -@font-face { - font-family: 'Glyphicons Halflings'; - src: url('@{icon-font-path}@{icon-font-name}.eot'); - src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'), - url('@{icon-font-path}@{icon-font-name}.woff') format('woff'), - url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'), - url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg'); -} - -// Catchall baseclass -.glyphicon { - position: relative; - top: 1px; - display: inline-block; - font-family: 'Glyphicons Halflings'; - font-style: normal; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; - - &:empty{ - width: 1em; - } -} - -// Individual icons -.glyphicon-asterisk { &:before { content: "\2a"; } } -.glyphicon-plus { &:before { content: "\2b"; } } -.glyphicon-euro { &:before { content: "\20ac"; } } -.glyphicon-minus { &:before { content: "\2212"; } } -.glyphicon-cloud { &:before { content: "\2601"; } } -.glyphicon-envelope { &:before { content: "\2709"; } } -.glyphicon-pencil { &:before { content: "\270f"; } } -.glyphicon-glass { &:before { content: "\e001"; } } -.glyphicon-music { &:before { content: "\e002"; } } -.glyphicon-search { &:before { content: "\e003"; } } -.glyphicon-heart { &:before { content: "\e005"; } } -.glyphicon-star { &:before { content: "\e006"; } } -.glyphicon-star-empty { &:before { content: "\e007"; } } -.glyphicon-user { &:before { content: "\e008"; } } -.glyphicon-film { &:before { content: "\e009"; } } -.glyphicon-th-large { &:before { content: "\e010"; } } -.glyphicon-th { &:before { content: "\e011"; } } -.glyphicon-th-list { &:before { content: "\e012"; } } -.glyphicon-ok { &:before { content: "\e013"; } } -.glyphicon-remove { &:before { content: "\e014"; } } -.glyphicon-zoom-in { &:before { content: "\e015"; } } -.glyphicon-zoom-out { &:before { content: "\e016"; } } -.glyphicon-off { &:before { content: "\e017"; } } -.glyphicon-signal { &:before { content: "\e018"; } } -.glyphicon-cog { &:before { content: "\e019"; } } -.glyphicon-trash { &:before { content: "\e020"; } } -.glyphicon-home { &:before { content: "\e021"; } } -.glyphicon-file { &:before { content: "\e022"; } } -.glyphicon-time { &:before { content: "\e023"; } } -.glyphicon-road { &:before { content: "\e024"; } } -.glyphicon-download-alt { &:before { content: "\e025"; } } -.glyphicon-download { &:before { content: "\e026"; } } -.glyphicon-upload { &:before { content: "\e027"; } } -.glyphicon-inbox { &:before { content: "\e028"; } } -.glyphicon-play-circle { &:before { content: "\e029"; } } -.glyphicon-repeat { &:before { content: "\e030"; } } -.glyphicon-refresh { &:before { content: "\e031"; } } -.glyphicon-list-alt { &:before { content: "\e032"; } } -.glyphicon-lock { &:before { content: "\e033"; } } -.glyphicon-flag { &:before { content: "\e034"; } } -.glyphicon-headphones { &:before { content: "\e035"; } } -.glyphicon-volume-off { &:before { content: "\e036"; } } -.glyphicon-volume-down { &:before { content: "\e037"; } } -.glyphicon-volume-up { &:before { content: "\e038"; } } -.glyphicon-qrcode { &:before { content: "\e039"; } } -.glyphicon-barcode { &:before { content: "\e040"; } } -.glyphicon-tag { &:before { content: "\e041"; } } -.glyphicon-tags { &:before { content: "\e042"; } } -.glyphicon-book { &:before { content: "\e043"; } } -.glyphicon-bookmark { &:before { content: "\e044"; } } -.glyphicon-print { &:before { content: "\e045"; } } -.glyphicon-camera { &:before { content: "\e046"; } } -.glyphicon-font { &:before { content: "\e047"; } } -.glyphicon-bold { &:before { content: "\e048"; } } -.glyphicon-italic { &:before { content: "\e049"; } } -.glyphicon-text-height { &:before { content: "\e050"; } } -.glyphicon-text-width { &:before { content: "\e051"; } } -.glyphicon-align-left { &:before { content: "\e052"; } } -.glyphicon-align-center { &:before { content: "\e053"; } } -.glyphicon-align-right { &:before { content: "\e054"; } } -.glyphicon-align-justify { &:before { content: "\e055"; } } -.glyphicon-list { &:before { content: "\e056"; } } -.glyphicon-indent-left { &:before { content: "\e057"; } } -.glyphicon-indent-right { &:before { content: "\e058"; } } -.glyphicon-facetime-video { &:before { content: "\e059"; } } -.glyphicon-picture { &:before { content: "\e060"; } } -.glyphicon-map-marker { &:before { content: "\e062"; } } -.glyphicon-adjust { &:before { content: "\e063"; } } -.glyphicon-tint { &:before { content: "\e064"; } } -.glyphicon-edit { &:before { content: "\e065"; } } -.glyphicon-share { &:before { content: "\e066"; } } -.glyphicon-check { &:before { content: "\e067"; } } -.glyphicon-move { &:before { content: "\e068"; } } -.glyphicon-step-backward { &:before { content: "\e069"; } } -.glyphicon-fast-backward { &:before { content: "\e070"; } } -.glyphicon-backward { &:before { content: "\e071"; } } -.glyphicon-play { &:before { content: "\e072"; } } -.glyphicon-pause { &:before { content: "\e073"; } } -.glyphicon-stop { &:before { content: "\e074"; } } -.glyphicon-forward { &:before { content: "\e075"; } } -.glyphicon-fast-forward { &:before { content: "\e076"; } } -.glyphicon-step-forward { &:before { content: "\e077"; } } -.glyphicon-eject { &:before { content: "\e078"; } } -.glyphicon-chevron-left { &:before { content: "\e079"; } } -.glyphicon-chevron-right { &:before { content: "\e080"; } } -.glyphicon-plus-sign { &:before { content: "\e081"; } } -.glyphicon-minus-sign { &:before { content: "\e082"; } } -.glyphicon-remove-sign { &:before { content: "\e083"; } } -.glyphicon-ok-sign { &:before { content: "\e084"; } } -.glyphicon-question-sign { &:before { content: "\e085"; } } -.glyphicon-info-sign { &:before { content: "\e086"; } } -.glyphicon-screenshot { &:before { content: "\e087"; } } -.glyphicon-remove-circle { &:before { content: "\e088"; } } -.glyphicon-ok-circle { &:before { content: "\e089"; } } -.glyphicon-ban-circle { &:before { content: "\e090"; } } -.glyphicon-arrow-left { &:before { content: "\e091"; } } -.glyphicon-arrow-right { &:before { content: "\e092"; } } -.glyphicon-arrow-up { &:before { content: "\e093"; } } -.glyphicon-arrow-down { &:before { content: "\e094"; } } -.glyphicon-share-alt { &:before { content: "\e095"; } } -.glyphicon-resize-full { &:before { content: "\e096"; } } -.glyphicon-resize-small { &:before { content: "\e097"; } } -.glyphicon-exclamation-sign { &:before { content: "\e101"; } } -.glyphicon-gift { &:before { content: "\e102"; } } -.glyphicon-leaf { &:before { content: "\e103"; } } -.glyphicon-fire { &:before { content: "\e104"; } } -.glyphicon-eye-open { &:before { content: "\e105"; } } -.glyphicon-eye-close { &:before { content: "\e106"; } } -.glyphicon-warning-sign { &:before { content: "\e107"; } } -.glyphicon-plane { &:before { content: "\e108"; } } -.glyphicon-calendar { &:before { content: "\e109"; } } -.glyphicon-random { &:before { content: "\e110"; } } -.glyphicon-comment { &:before { content: "\e111"; } } -.glyphicon-magnet { &:before { content: "\e112"; } } -.glyphicon-chevron-up { &:before { content: "\e113"; } } -.glyphicon-chevron-down { &:before { content: "\e114"; } } -.glyphicon-retweet { &:before { content: "\e115"; } } -.glyphicon-shopping-cart { &:before { content: "\e116"; } } -.glyphicon-folder-close { &:before { content: "\e117"; } } -.glyphicon-folder-open { &:before { content: "\e118"; } } -.glyphicon-resize-vertical { &:before { content: "\e119"; } } -.glyphicon-resize-horizontal { &:before { content: "\e120"; } } -.glyphicon-hdd { &:before { content: "\e121"; } } -.glyphicon-bullhorn { &:before { content: "\e122"; } } -.glyphicon-bell { &:before { content: "\e123"; } } -.glyphicon-certificate { &:before { content: "\e124"; } } -.glyphicon-thumbs-up { &:before { content: "\e125"; } } -.glyphicon-thumbs-down { &:before { content: "\e126"; } } -.glyphicon-hand-right { &:before { content: "\e127"; } } -.glyphicon-hand-left { &:before { content: "\e128"; } } -.glyphicon-hand-up { &:before { content: "\e129"; } } -.glyphicon-hand-down { &:before { content: "\e130"; } } -.glyphicon-circle-arrow-right { &:before { content: "\e131"; } } -.glyphicon-circle-arrow-left { &:before { content: "\e132"; } } -.glyphicon-circle-arrow-up { &:before { content: "\e133"; } } -.glyphicon-circle-arrow-down { &:before { content: "\e134"; } } -.glyphicon-globe { &:before { content: "\e135"; } } -.glyphicon-wrench { &:before { content: "\e136"; } } -.glyphicon-tasks { &:before { content: "\e137"; } } -.glyphicon-filter { &:before { content: "\e138"; } } -.glyphicon-briefcase { &:before { content: "\e139"; } } -.glyphicon-fullscreen { &:before { content: "\e140"; } } -.glyphicon-dashboard { &:before { content: "\e141"; } } -.glyphicon-paperclip { &:before { content: "\e142"; } } -.glyphicon-heart-empty { &:before { content: "\e143"; } } -.glyphicon-link { &:before { content: "\e144"; } } -.glyphicon-phone { &:before { content: "\e145"; } } -.glyphicon-pushpin { &:before { content: "\e146"; } } -.glyphicon-usd { &:before { content: "\e148"; } } -.glyphicon-gbp { &:before { content: "\e149"; } } -.glyphicon-sort { &:before { content: "\e150"; } } -.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } } -.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } } -.glyphicon-sort-by-order { &:before { content: "\e153"; } } -.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } } -.glyphicon-sort-by-attributes { &:before { content: "\e155"; } } -.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } } -.glyphicon-unchecked { &:before { content: "\e157"; } } -.glyphicon-expand { &:before { content: "\e158"; } } -.glyphicon-collapse-down { &:before { content: "\e159"; } } -.glyphicon-collapse-up { &:before { content: "\e160"; } } -.glyphicon-log-in { &:before { content: "\e161"; } } -.glyphicon-flash { &:before { content: "\e162"; } } -.glyphicon-log-out { &:before { content: "\e163"; } } -.glyphicon-new-window { &:before { content: "\e164"; } } -.glyphicon-record { &:before { content: "\e165"; } } -.glyphicon-save { &:before { content: "\e166"; } } -.glyphicon-open { &:before { content: "\e167"; } } -.glyphicon-saved { &:before { content: "\e168"; } } -.glyphicon-import { &:before { content: "\e169"; } } -.glyphicon-export { &:before { content: "\e170"; } } -.glyphicon-send { &:before { content: "\e171"; } } -.glyphicon-floppy-disk { &:before { content: "\e172"; } } -.glyphicon-floppy-saved { &:before { content: "\e173"; } } -.glyphicon-floppy-remove { &:before { content: "\e174"; } } -.glyphicon-floppy-save { &:before { content: "\e175"; } } -.glyphicon-floppy-open { &:before { content: "\e176"; } } -.glyphicon-credit-card { &:before { content: "\e177"; } } -.glyphicon-transfer { &:before { content: "\e178"; } } -.glyphicon-cutlery { &:before { content: "\e179"; } } -.glyphicon-header { &:before { content: "\e180"; } } -.glyphicon-compressed { &:before { content: "\e181"; } } -.glyphicon-earphone { &:before { content: "\e182"; } } -.glyphicon-phone-alt { &:before { content: "\e183"; } } -.glyphicon-tower { &:before { content: "\e184"; } } -.glyphicon-stats { &:before { content: "\e185"; } } -.glyphicon-sd-video { &:before { content: "\e186"; } } -.glyphicon-hd-video { &:before { content: "\e187"; } } -.glyphicon-subtitles { &:before { content: "\e188"; } } -.glyphicon-sound-stereo { &:before { content: "\e189"; } } -.glyphicon-sound-dolby { &:before { content: "\e190"; } } -.glyphicon-sound-5-1 { &:before { content: "\e191"; } } -.glyphicon-sound-6-1 { &:before { content: "\e192"; } } -.glyphicon-sound-7-1 { &:before { content: "\e193"; } } -.glyphicon-copyright-mark { &:before { content: "\e194"; } } -.glyphicon-registration-mark { &:before { content: "\e195"; } } -.glyphicon-cloud-download { &:before { content: "\e197"; } } -.glyphicon-cloud-upload { &:before { content: "\e198"; } } -.glyphicon-tree-conifer { &:before { content: "\e199"; } } -.glyphicon-tree-deciduous { &:before { content: "\e200"; } } diff --git a/theme/bootstrap/grid.less b/theme/bootstrap/grid.less deleted file mode 100644 index 67e78f76..00000000 --- a/theme/bootstrap/grid.less +++ /dev/null @@ -1,93 +0,0 @@ -// -// Grid system -// -------------------------------------------------- - -// Set the container width, and override it for fixed navbars in media queries -.container { - .container-fixed(); -} - -// mobile first defaults -.row { - .make-row(); -} - -// Common styles for small and large grid columns -.make-grid-columns(); - - -// Extra small grid -// -// Grid classes for extra small devices like smartphones. No offset, push, or -// pull classes are present here due to the size of the target. -// -// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since -// it's full-width. - -.make-grid-columns-float(xs); -.make-grid(@grid-columns, xs, width); -.make-grid(@grid-columns, xs, pull); -.make-grid(@grid-columns, xs, push); -.make-grid(@grid-columns, xs, offset); - - -// Small grid -// -// Columns, offsets, pushes, and pulls for the small device range, from phones -// to tablets. -// -// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since -// it's full-width. - -@media (min-width: @screen-sm-min) { - .container { - width: @container-sm; - } - - .make-grid-columns-float(sm); - .make-grid(@grid-columns, sm, width); - .make-grid(@grid-columns, sm, pull); - .make-grid(@grid-columns, sm, push); - .make-grid(@grid-columns, sm, offset); -} - - -// Medium grid -// -// Columns, offsets, pushes, and pulls for the desktop device range. -// -// Note that `.col-md-12` doesn't get floated on purpose--there's no need since -// it's full-width. - -@media (min-width: @screen-md-min) { - .container { - width: @container-md; - } - - .make-grid-columns-float(md); - .make-grid(@grid-columns, md, width); - .make-grid(@grid-columns, md, pull); - .make-grid(@grid-columns, md, push); - .make-grid(@grid-columns, md, offset); -} - - -// Large grid -// -// Columns, offsets, pushes, and pulls for the large desktop device range. -// -// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since -// it's full-width. - -@media (min-width: @screen-lg-min) { - .container { - width: @container-lg; - } - - .make-grid-columns-float(lg); - .make-grid(@grid-columns, lg, width); - .make-grid(@grid-columns, lg, pull); - .make-grid(@grid-columns, lg, push); - .make-grid(@grid-columns, lg, offset); -} - diff --git a/theme/bootstrap/input-groups.less b/theme/bootstrap/input-groups.less deleted file mode 100644 index 8516a79e..00000000 --- a/theme/bootstrap/input-groups.less +++ /dev/null @@ -1,136 +0,0 @@ -// -// Input groups -// -------------------------------------------------- - -// Base styles -// ------------------------- -.input-group { - position: relative; // For dropdowns - display: table; - border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table - - // Undo padding and float of grid classes - &.col { - float: none; - padding-left: 0; - padding-right: 0; - } - - .form-control { - width: 100%; - margin-bottom: 0; - } -} - -// Sizing options -// -// Remix the default form control sizing classes into new ones for easier -// manipulation. - -.input-group-lg > .form-control, -.input-group-lg > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { .input-lg(); } -.input-group-sm > .form-control, -.input-group-sm > .input-group-addon, -.input-group-sm > .input-group-btn > .btn { .input-sm(); } - - -// Display as table-cell -// ------------------------- -.input-group-addon, -.input-group-btn, -.input-group .form-control { - display: table-cell; - - &:not(:first-child):not(:last-child) { - border-radius: 0; - } -} -// Addon and addon wrapper for buttons -.input-group-addon, -.input-group-btn { - width: 1%; - white-space: nowrap; - vertical-align: middle; // Match the inputs -} - -// Text input groups -// ------------------------- -.input-group-addon { - padding: @padding-base-vertical @padding-base-horizontal; - font-size: @font-size-base; - font-weight: normal; - line-height: 1; - color: @input-color; - text-align: center; - background-color: @input-group-addon-bg; - border: 1px solid @input-group-addon-border-color; - border-radius: @border-radius-base; - - // Sizing - &.input-sm { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - border-radius: @border-radius-small; - } - &.input-lg { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - border-radius: @border-radius-large; - } - - // Nuke default margins from checkboxes and radios to vertically center within. - input[type="radio"], - input[type="checkbox"] { - margin-top: 0; - } -} - -// Reset rounded corners -.input-group .form-control:first-child, -.input-group-addon:first-child, -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .dropdown-toggle, -.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { - .border-right-radius(0); -} -.input-group-addon:first-child { - border-right: 0; -} -.input-group .form-control:last-child, -.input-group-addon:last-child, -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .dropdown-toggle, -.input-group-btn:first-child > .btn:not(:first-child) { - .border-left-radius(0); -} -.input-group-addon:last-child { - border-left: 0; -} - -// Button input groups -// ------------------------- -.input-group-btn { - position: relative; - white-space: nowrap; - - // Negative margin to only have a 1px border between the two - &:first-child > .btn { - margin-right: -1px; - } - &:last-child > .btn { - margin-left: -1px; - } -} -.input-group-btn > .btn { - position: relative; - // Jankily prevent input button groups from wrapping - + .btn { - margin-left: -4px; - } - // Bring the "active" button to the front - &:hover, - &:active { - z-index: 2; - } -} diff --git a/theme/bootstrap/jumbotron.less b/theme/bootstrap/jumbotron.less deleted file mode 100644 index 22c29780..00000000 --- a/theme/bootstrap/jumbotron.less +++ /dev/null @@ -1,40 +0,0 @@ -// -// Jumbotron -// -------------------------------------------------- - - -.jumbotron { - padding: @jumbotron-padding; - margin-bottom: @jumbotron-padding; - font-size: @jumbotron-font-size; - font-weight: 200; - line-height: (@line-height-base * 1.5); - color: @jumbotron-color; - background-color: @jumbotron-bg; - - h1 { - line-height: 1; - color: @jumbotron-heading-color; - } - p { - line-height: 1.4; - } - - .container & { - border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container - } - - @media screen and (min-width: @screen-sm-min) { - padding-top: (@jumbotron-padding * 1.6); - padding-bottom: (@jumbotron-padding * 1.6); - - .container & { - padding-left: (@jumbotron-padding * 2); - padding-right: (@jumbotron-padding * 2); - } - - h1 { - font-size: (@font-size-base * 4.5); - } - } -} diff --git a/theme/bootstrap/labels.less b/theme/bootstrap/labels.less deleted file mode 100644 index cad5ce51..00000000 --- a/theme/bootstrap/labels.less +++ /dev/null @@ -1,58 +0,0 @@ -// -// Labels -// -------------------------------------------------- - -.label { - display: inline; - padding: .2em .6em .3em; - font-size: 75%; - font-weight: bold; - line-height: 1; - color: @label-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: .25em; - - // Add hover effects, but only for links - &[href] { - &:hover, - &:focus { - color: @label-link-hover-color; - text-decoration: none; - cursor: pointer; - } - } - - // Empty labels collapse automatically (not available in IE8) - &:empty { - display: none; - } -} - -// Colors -// Contextual variations (linked labels get darker on :hover) - -.label-default { - .label-variant(@label-default-bg); -} - -.label-primary { - .label-variant(@label-primary-bg); -} - -.label-success { - .label-variant(@label-success-bg); -} - -.label-info { - .label-variant(@label-info-bg); -} - -.label-warning { - .label-variant(@label-warning-bg); -} - -.label-danger { - .label-variant(@label-danger-bg); -} diff --git a/theme/bootstrap/list-group.less b/theme/bootstrap/list-group.less deleted file mode 100644 index 2cee5297..00000000 --- a/theme/bootstrap/list-group.less +++ /dev/null @@ -1,88 +0,0 @@ -// -// List groups -// -------------------------------------------------- - -// Base class -// -// Easily usable on