├── assets ├── root │ ├── _CNAME │ ├── .gitignore │ ├── README.md │ ├── LICENSE-MIT │ └── feed.xml └── public │ ├── img │ ├── logo.png │ ├── less_logo.png │ └── logo-smaller.png │ ├── ico │ └── favicon.ico │ ├── font │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff │ └── js │ └── application.js ├── content ├── usage │ ├── api.md │ ├── sourcemaps.md │ ├── browser-support.md │ ├── plugins.md │ ├── using-less.md │ ├── v2-upgrade.md │ ├── programmatic-usage.md │ ├── command-line-usage.md │ └── developing-less.md ├── home │ ├── cdn-options.md │ ├── download-options.md │ └── getting-started.md ├── features │ ├── strictmath.md │ ├── overview.md │ ├── comments.md │ ├── css-guards.md │ ├── merge.md │ ├── mixin-loops.md │ ├── nested.md │ ├── mixins-aliasing.md │ ├── maps.md │ ├── mixin-guards.md │ ├── mixins.md │ └── mixins-as-functions.md ├── examples │ ├── example.md │ └── data-URI.md ├── functions │ ├── examples │ │ └── examples.md │ ├── logical-functions.md │ ├── color-definition.md │ └── color-channel.md ├── about │ ├── learn-more.md │ └── history.md ├── Home.md └── tools │ ├── ports.md │ ├── third-party-compilers.md │ ├── online-less-compilers.md │ ├── guis-for-less.md │ └── plugins.md ├── styles ├── components │ ├── scaffolding.less │ ├── typography.less │ ├── tables.less │ ├── banner.less │ ├── team.less │ ├── footer.less │ ├── button.less │ ├── docs-content.less │ ├── callout.less │ ├── header.less │ ├── source-link.less │ ├── main-nav.less │ ├── anchors.less │ ├── docs-section.less │ ├── sidebar.less │ └── ad.less ├── bootstrap │ ├── breadcrumbs.less │ ├── component-animations.less │ ├── wells.less │ ├── thumbnails.less │ ├── close.less │ ├── utilities.less │ ├── jumbotron.less │ ├── bootstrap.less │ ├── media.less │ ├── pager.less │ ├── badges.less │ ├── labels.less │ ├── code.less │ ├── alerts.less │ ├── print.less │ ├── pagination.less │ ├── list-group.less │ ├── scaffolding.less │ ├── progress-bars.less │ ├── grid.less │ ├── tooltip.less │ ├── modals.less │ ├── popovers.less │ └── input-groups.less ├── index.less └── highlight-js │ ├── atom-one-light.css │ ├── agate.css │ └── default.less ├── templates ├── plugins.hbs ├── blog.hbs ├── layouts │ ├── content.hbs │ └── default.hbs ├── includes │ ├── source-link.hbs │ ├── banner.hbs │ ├── ads.hbs │ ├── fork-ribbon.hbs │ ├── sidenav.hbs │ ├── alexa.hbs │ ├── social-buttons.hbs │ ├── popover-source-link.hbs │ ├── masthead.hbs │ ├── docs-header.hbs │ ├── head.hbs │ ├── button-tweet.hbs │ ├── footer.hbs │ ├── javascripts.hbs │ └── nav-main.hbs ├── snippets │ ├── heading.tmpl │ └── feed.xml ├── cheatsheet.hbs ├── _helpers │ ├── webfonts.js │ ├── path.js │ ├── console.js │ ├── inline.js │ ├── partial.js │ ├── lib │ │ ├── lang.js │ │ └── handlebars.js │ ├── resolve.js │ ├── fs.js │ ├── markdown.js │ ├── rel.js │ └── rename.js ├── index.hbs ├── tools.hbs ├── _plugins │ └── holder-404-avoid.js ├── usage.hbs ├── functions.hbs └── features.hbs ├── data ├── links.json ├── _utils │ ├── extend-pkg.js │ ├── README.md │ ├── dates.js │ ├── pkg.js │ └── utils.js ├── md.yml ├── translations.yml ├── tools.yml ├── functions.yml ├── usage.yml ├── team.yml ├── features.yml └── less.json ├── .gitattributes ├── .gitignore ├── .jshintrc ├── .github └── workflows │ ├── test.yml │ └── deploy.yml ├── LICENSE-MIT ├── package.json └── CONTRIBUTING.md /assets/root/_CNAME: -------------------------------------------------------------------------------- 1 | lesscss.org 2 | -------------------------------------------------------------------------------- /content/usage/api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: API 3 | --- 4 | 5 | > Coming soon 6 | 7 | 8 | -------------------------------------------------------------------------------- /content/usage/sourcemaps.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sourcemaps 3 | published: false 4 | --- 5 | {{!}} -------------------------------------------------------------------------------- /styles/components/scaffolding.less: -------------------------------------------------------------------------------- 1 | 2 | 3 | html { 4 | font-size: 16px; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /assets/public/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/img/logo.png -------------------------------------------------------------------------------- /templates/plugins.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | published: false 3 | 4 | title: Plugins 5 | slug: plugins 6 | --- 7 | -------------------------------------------------------------------------------- /assets/public/ico/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/ico/favicon.ico -------------------------------------------------------------------------------- /assets/public/img/less_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/img/less_logo.png -------------------------------------------------------------------------------- /assets/root/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | 4 | tmp 5 | temp 6 | TODO.md 7 | 8 | *.sublime-* 9 | -------------------------------------------------------------------------------- /assets/public/img/logo-smaller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/img/logo-smaller.png -------------------------------------------------------------------------------- /data/links.json: -------------------------------------------------------------------------------- 1 | { 2 | "blog": false, 3 | "releases": false, 4 | "plugins": false, 5 | "cheatsheet": false 6 | } -------------------------------------------------------------------------------- /templates/blog.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | published: false 3 | 4 | title: Blog 5 | slug: blog 6 | lead: Coming soon. 7 | --- 8 | -------------------------------------------------------------------------------- /templates/layouts/content.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | {{> body }} 6 |
-------------------------------------------------------------------------------- /content/home/cdn-options.md: -------------------------------------------------------------------------------- 1 | ### [Less CDN]({{ site.cdn.cloudflare }}) 2 | 3 | ```html 4 | 5 | ``` -------------------------------------------------------------------------------- /assets/public/font/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/font/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /assets/public/font/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/font/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /assets/public/font/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/less/less-docs/HEAD/assets/public/font/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /data/_utils/extend-pkg.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | repo: "https://github.com/less/less.js.git", 3 | issues: "https://github.com/less/less.js/issues" 4 | }; 5 | -------------------------------------------------------------------------------- /templates/includes/source-link.hbs: -------------------------------------------------------------------------------- 1 |
2 | Improve this section. 3 |
-------------------------------------------------------------------------------- /templates/snippets/heading.tmpl: -------------------------------------------------------------------------------- 1 | 2 | id="<%= _.slugify(text) %>"><%= text %>> -------------------------------------------------------------------------------- /templates/cheatsheet.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | published: false 3 | 4 | title: Cheatsheet 5 | slug: cheatsheet 6 | lead: "Cheatsheet with all of the features and functions of the Less language." 7 | --- 8 | -------------------------------------------------------------------------------- /templates/includes/banner.hbs: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/includes/ads.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines, in case users don't have core.autocrlf set. 2 | *.* text=lf 3 | *.* text eol=lf 4 | *.* eol=lf 5 | 6 | *.jpg binary 7 | *.gif binary 8 | *.png binary 9 | *.jpeg binary -------------------------------------------------------------------------------- /styles/components/typography.less: -------------------------------------------------------------------------------- 1 | // 2 | // Button groups 3 | // -------------------------------------------------- 4 | 5 | 6 | h1, h2, h3 { 7 | margin-top: 30px; 8 | margin-bottom: 15px; 9 | } 10 | 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # live site 2 | _gh_pages 3 | _less.github.io 4 | dest 5 | 6 | # node.js 7 | node_modules 8 | npm-debug.log 9 | 10 | # local dev 11 | *.map 12 | tmp 13 | temp 14 | vendor 15 | TODO.md 16 | *.sublime-* 17 | .idea 18 | -------------------------------------------------------------------------------- /data/_utils/README.md: -------------------------------------------------------------------------------- 1 | # pkg.js 2 | 3 | > Basic script for pulling down the package.json for Less.js from GitHub 4 | 5 | Just run `node pkg` from this directory, or `node data/_utils/pkg` from the project root, and you're in business! -------------------------------------------------------------------------------- /styles/components/tables.less: -------------------------------------------------------------------------------- 1 | // Add some padding and margin to tables 2 | 3 | .docs-section { 4 | @g: 10px; 5 | 6 | table { 7 | margin-bottom: (2 * @g); 8 | } 9 | 10 | td { 11 | padding: 0 @g (@g / 2) 0; 12 | } 13 | } -------------------------------------------------------------------------------- /templates/includes/fork-ribbon.hbs: -------------------------------------------------------------------------------- 1 | 2 | Fork me on GitHub 3 | 4 | -------------------------------------------------------------------------------- /content/features/strictmath.md: -------------------------------------------------------------------------------- 1 | --- 2 | published: false 3 | --- 4 | 5 | # strictMath 6 | 7 | > Only evaluate math when explicitly placed in parentheses 8 | 9 | ## Example 10 | 11 | ```less 12 | (1 + 1) // => 2 13 | 1 + 1 // => 1 + 1 14 | ``` 15 | 16 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esnext": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "immed": true, 6 | "latedef": true, 7 | "newcap": true, 8 | "noarg": true, 9 | "sub": true, 10 | "undef": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "node": true 14 | } 15 | -------------------------------------------------------------------------------- /templates/includes/sidenav.hbs: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /content/features/overview.md: -------------------------------------------------------------------------------- 1 | > An in-depth guide to features of the LESS language. See the [Overview](/#overview) for a quick summary of Less. 2 | 3 | _For an in-depth guide to installing and setting up a Less environment, as well as documentation on developing for Less, see: [Using Less.js](/usage)._ -------------------------------------------------------------------------------- /data/md.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # Options for the {{md}} helper 3 | # ============================================= 4 | 5 | # Information about the source file? 6 | origin: true 7 | 8 | # Template to use for the generated info about the source file 9 | append: source-link -------------------------------------------------------------------------------- /templates/_helpers/webfonts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Webfont helpers 5 | */ 6 | 7 | module.exports.register = function (Handlebars, options, params) { 8 | Handlebars.registerHelper('webfonts', function (context) { 9 | return new Handlebars.SafeString('"' + context.join('", "') + '"'); 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /assets/root/README.md: -------------------------------------------------------------------------------- 1 | # lesscss.org 2 | 3 | > Official website and documentation for Less/Less.js 4 | 5 | This is github pages project for [lesscss.org](https://lesscss.org), please don't create pull request for this repo, if you want modify less documentation, [less/less-docs](https://github.com/less/less-docs) is for you, github actions will auto deploy docs build assets to github pages when your pr be merged. 6 | -------------------------------------------------------------------------------- /templates/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | slug: index 4 | lead: "An overview of Less, how to download and use, examples and more." 5 | --- 6 | 7 | 8 | {{!-- Overview 9 | ================================================== --}} 10 |
11 |
12 |

Overview

13 |
14 | {{md 'features-overview'}} 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /styles/components/banner.less: -------------------------------------------------------------------------------- 1 | // 2 | // Banners 3 | // -------------------------------------------------- 4 | // Appears directly below page headers/subheads 5 | 6 | 7 | .banner { 8 | padding: 15px 20px; 9 | color: #777; 10 | background-color: #fafafa; 11 | border-top: 1px solid #fff; 12 | border-bottom: 1px solid #e5e5e5; 13 | z-index: 3; 14 | position: relative; 15 | } 16 | .banner strong { 17 | color: #555; 18 | } 19 | -------------------------------------------------------------------------------- /templates/includes/alexa.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /content/home/download-options.md: -------------------------------------------------------------------------------- 1 | #### [Download Source Code]({{ less.sourcearchive }}{{ less.version }}.zip) 2 | 3 | Get the latest Less source code by downloading it directly from GitHub. 4 | 5 | 6 | #### [Clone or Fork via GitHub]({{ less.repository.url }}) 7 | 8 | Fork the project and send us a pull request! 9 | 10 | 11 | #### [Install with Bower](http://bower.io) 12 | 13 | Install less.js script by running the following in the command line: 14 | 15 | ```bash 16 | bower install less 17 | ``` 18 | -------------------------------------------------------------------------------- /content/examples/example.md: -------------------------------------------------------------------------------- 1 | Write some Less: 2 | 3 | ```less 4 | @base: #f938ab; 5 | 6 | .box-shadow(@style, @c) when (iscolor(@c)) { 7 | -webkit-box-shadow: @style @c; 8 | -moz-box-shadow: @style @c; 9 | box-shadow: @style @c; 10 | } 11 | .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { 12 | .box-shadow(@style, rgba(0, 0, 0, @alpha)); 13 | } 14 | .box { 15 | color: saturate(@base, 5%); 16 | border-color: lighten(@base, 30%); 17 | div { 18 | .box-shadow(0 0 5px, 30%) 19 | } 20 | } 21 | ``` -------------------------------------------------------------------------------- /styles/components/team.less: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Team members 4 | * Avatars, names, and usernames for core team. 5 | */ 6 | .less-team .team-member { 7 | color: #555; 8 | line-height: 32px; 9 | } 10 | .less-team .team-member:hover { 11 | color: #333; 12 | text-decoration: none; 13 | } 14 | .less-team .github-btn { 15 | float: right; 16 | margin-top: 6px; 17 | width: 185px; 18 | height: 20px; 19 | } 20 | .less-team img { 21 | float: left; 22 | width: 32px; 23 | margin-right: 10px; 24 | border-radius: 4px; 25 | } -------------------------------------------------------------------------------- /templates/includes/social-buttons.hbs: -------------------------------------------------------------------------------- 1 |
2 | 10 |
11 | -------------------------------------------------------------------------------- /templates/_helpers/path.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handlebars Helpers 3 | * Copyright (c) 2014 Jon Schlinkert 4 | * Licensed under the MIT License (MIT). 5 | */ 6 | 'use strict'; 7 | 8 | var path = require('path'); 9 | 10 | 11 | module.exports.register = function (Handlebars, options, params) { 12 | 13 | 14 | Handlebars.registerHelper('basename', function (filepath) { 15 | return path.basename(filepath, path.extname(filepath)); 16 | }); 17 | 18 | Handlebars.registerHelper('filename', function (filepath) { 19 | return path.basename(filepath); 20 | }); 21 | 22 | }; 23 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Docs Build Test 2 | 3 | on: ["push", "pull_request"] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | strategy: 9 | matrix: 10 | node-version: [14] 11 | steps: 12 | - uses: actions/checkout@v2 13 | - name: Use Node.js ${{ matrix.node-version }} 14 | uses: actions/setup-node@v2 15 | with: 16 | node-version: ${{ matrix.node-version }} 17 | - name: install dependencies 18 | run: npm install 19 | - name: build docs 20 | run: node data/_utils/pkg && grunt 21 | -------------------------------------------------------------------------------- /content/functions/examples/examples.md: -------------------------------------------------------------------------------- 1 | > Functions you can use in your styles. 2 | 3 | ## Generating colors 4 | 5 | ```less 6 | rgb(r, g, b) 7 | ``` 8 | 9 | ```less 10 | rgba(r, g, b, a) 11 | ``` 12 | 13 | ```less 14 | hsl(h, s, l) 15 | ``` 16 | 17 | ```less 18 | hsla(h, s, l, a) 19 | ``` 20 | 21 | ## Modifying colors 22 | 23 | ```less 24 | saturate(color, amount) 25 | ``` 26 | 27 | ```less 28 | desaturate(color, amount) 29 | ``` 30 | 31 | ```less 32 | lighten(color, amount) 33 | ``` 34 | 35 | ```less 36 | darken(color, amount) 37 | ``` 38 | 39 | ```less 40 | greyscale(color, amount) 41 | ``` 42 | -------------------------------------------------------------------------------- /content/features/comments.md: -------------------------------------------------------------------------------- 1 | > TODO 2 | 3 | ## CSS Comments 4 | 5 | CSS-style comments are preserved by Less: 6 | 7 | ```less 8 | .class { 9 | /* Hello, I'm a CSS-style comment */ 10 | color: black 11 | } 12 | ``` 13 | 14 | ## Less Comments 15 | 16 | Single-line comments are also valid in Less, but they are ‘silent’, they don’t show up in the compiled CSS output: 17 | 18 | ```less 19 | .class { 20 | // Hi, I'm a silent comment, I won't show up in your CSS 21 | color: white 22 | } 23 | ``` 24 | 25 | {{#todo}} 26 | * document `/*! ... */` 27 | * document and/or link to `--s0`/`--s1` options 28 | {{/todo}} -------------------------------------------------------------------------------- /templates/includes/popover-source-link.hbs: -------------------------------------------------------------------------------- 1 | {{!-- the trigger link --}} 2 | 3 | 4 | 5 | {{!-- the popover link. this is dynamically inserted into the popover template by ./assets/public/js/application.js --}} 6 | Edit the {{{filetype .}}} for {{{rename (basename .)}}} 7 | 8 | 9 | -------------------------------------------------------------------------------- /content/about/learn-more.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Learn More 3 | --- 4 | 5 | ### Books 6 | 7 | * [Less Web Development Essentials](http://www.packtpub.com/less-web-development-essentials/book), by Bass Jobsen, Foreword by Alexis Sellier 8 | * [Less Web Development Cookbook](https://www.packtpub.com/web-development/less-web-development-cookbook), by Bass Jobsen and Amin Meyghani, Foreword by Luke Page 9 | * [Less. Путеводитель для новичков](https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/), by Denis Malinochkin 10 | 11 | ### Videos 12 | 13 | * [Learning Less](https://www.packtpub.com/web-development/learning-less-video), by Anthony Killeen 14 | -------------------------------------------------------------------------------- /templates/includes/masthead.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Less

4 |

{{{site.description}}}

5 |

6 | Download Less v{{less.version}} 7 | Download source 8 |

9 |
10 |
11 | -------------------------------------------------------------------------------- /styles/bootstrap/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: 8px 15px; 8 | margin-bottom: @line-height-computed; 9 | list-style: none; 10 | background-color: @breadcrumb-bg; 11 | border-radius: @border-radius-base; 12 | > li { 13 | display: inline-block; 14 | + li:before { 15 | content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space 16 | padding: 0 5px; 17 | color: @breadcrumb-color; 18 | } 19 | } 20 | > .active { 21 | color: @breadcrumb-active-color; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /styles/bootstrap/component-animations.less: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | .transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | &.in { 21 | display: block; 22 | } 23 | } 24 | .collapsing { 25 | position: relative; 26 | height: 0; 27 | overflow: hidden; 28 | .transition(height .35s ease); 29 | } 30 | -------------------------------------------------------------------------------- /styles/bootstrap/wells.less: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: @well-bg; 12 | border: 1px solid darken(@well-bg, 7%); 13 | border-radius: @border-radius-base; 14 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: @border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: @border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /content/about/history.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | --- 4 | 5 | Less was created in 2009 by Alexis Sellier, more commonly known as @cloudhead. Originally written in Ruby, it was then ported to JavaScript. 6 | 7 | Less was originally inspired by [Sass](http://sass-lang.com/), with a leaner feature set and a syntax closely matching CSS, which Sass did not have at the time. (Sass was later inspired by Less to create SCSS, its own CSS-like syntax.) 8 | 9 | In May 2012 Alexis turned over control and development to a core team of contributors who now manage, fix and extend the language. 10 | 11 | {{!TODO: need more background}} 12 | -------------------------------------------------------------------------------- /data/_utils/dates.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var re = /(\d{4})-(\d{2})-(\d{2})-(.+)/; 4 | 5 | var extname = function(str) { 6 | return path.basename(str, path.extname(str)); 7 | }; 8 | 9 | var year = exports.year = function(str) { 10 | return extname(str).replace(re, '$1'); 11 | }; 12 | 13 | var month = exports.month = function(str) { 14 | return extname(str).replace(re, '$2'); 15 | }; 16 | 17 | var day = exports.day = function(str) { 18 | return extname(str).replace(re, '$3'); 19 | }; 20 | 21 | var slug = exports.slug = function(str) { 22 | return extname(str).replace(re, '$4'); 23 | }; 24 | 25 | exports.toPost = function(str) { 26 | return extname(str).replace(re, '$1/$2/$3/$4'); 27 | }; 28 | -------------------------------------------------------------------------------- /templates/tools.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tools for Less 3 | slug: tools 4 | lead: "" 5 | --- 6 | 7 | 9 | 10 | 11 | {{#each tools.published}} 12 | 13 |
14 |
15 |

{{title}}

16 |
17 | 18 | {{#each (expand files)}} 19 |
20 | {{> popover-source-link . }} 21 | 22 | 23 | {{success '>> Inlining:' (basename .)}} {{! log a success message! }} 24 | 25 | 26 | {{#markdown}} 27 | {{inline .}} 28 | {{/markdown}} 29 | 30 |
31 |
32 | {{/each}} 33 | 34 |
35 | {{/each}} 36 | -------------------------------------------------------------------------------- /templates/_helpers/console.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk'); 2 | 3 | /** 4 | * Logging helpers 5 | */ 6 | 7 | module.exports.register = function (Handlebars, options, params) { 8 | 9 | Handlebars.registerHelper('info', function (msg, context) { 10 | console.log(chalk.cyan(' ' + msg), context); 11 | }); 12 | 13 | Handlebars.registerHelper('success', function (msg, context) { 14 | console.log(chalk.green(' ' + msg), context); 15 | }); 16 | 17 | Handlebars.registerHelper('warn', function (msg, context) { 18 | console.log(chalk.yellow(' ' + msg), context); 19 | }); 20 | 21 | Handlebars.registerHelper('fail', function (msg, context) { 22 | console.log(chalk.red(' ' + msg), context); 23 | }); 24 | }; 25 | 26 | -------------------------------------------------------------------------------- /templates/_plugins/holder-404-avoid.js: -------------------------------------------------------------------------------- 1 | var cheerio = require('cheerio'); 2 | 3 | module.exports = function(params, callback) { 4 | 'use strict'; 5 | 6 | // load current page content 7 | var $ = cheerio.load(params.content); 8 | 9 | // get all the anchor tags from inside the headers 10 | var images = $('img[src]'); 11 | 12 | images.each(function(i, e) { 13 | var $e = $(e); 14 | var src = $e.attr("src"); 15 | if (src.indexOf("holder.js") === 0) { 16 | $e.attr("src", null); 17 | $e.attr("data-src", src); 18 | } 19 | }); 20 | 21 | params.content = $.html(); 22 | callback(); 23 | }; 24 | 25 | module.exports.options = { 26 | stage: 'render:post:page' 27 | }; -------------------------------------------------------------------------------- /styles/components/footer.less: -------------------------------------------------------------------------------- 1 | // 2 | // Footer 3 | // ----------------------------------------------- 4 | // Footer Separated section of content at the bottom 5 | // of all pages 6 | 7 | 8 | .footer { 9 | padding-top: 40px; 10 | padding-bottom: 30px; 11 | margin-top: 100px; 12 | color: #777; 13 | background: #fff; 14 | text-align: center; 15 | border-top: 1px solid @gray-lighter; 16 | } 17 | 18 | .footer-links { 19 | margin: 10px 0; 20 | padding-left: 0; 21 | 22 | li { 23 | display: inline; 24 | padding: 0 2px; 25 | } 26 | li:first-child { 27 | padding-left: 0; 28 | } 29 | } 30 | 31 | @media (min-width: 768px) { 32 | .footer { 33 | text-align: left; 34 | } 35 | .footer p { 36 | margin-bottom: 0; 37 | } 38 | } -------------------------------------------------------------------------------- /templates/_helpers/inline.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handlebars Helper: {{inline}} 3 | * Copyright (c) 2014 Jon Schlinkert 4 | * Licensed under the MIT License (MIT). 5 | */ 6 | 7 | var matter = require('gray-matter'); 8 | var strip = require('strip-indent'); 9 | var _ = require('lodash'); 10 | 11 | 12 | module.exports.register = function (Handlebars, options, params) { 13 | options = options || {}; 14 | 15 | Handlebars.registerHelper("inline", function (filepath, context) { 16 | var file = matter.read(filepath); 17 | var ctx = _.extend({}, options, this, context, file.context); 18 | var template = Handlebars.compile('\n' + strip(file.content)); 19 | var result = template(ctx); 20 | return new Handlebars.SafeString(result); 21 | }); 22 | }; 23 | -------------------------------------------------------------------------------- /templates/_helpers/partial.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Markdown Helper {{partial}} 3 | * Copyright (c) 2014 Jon Schlinkert, contributors 4 | * Licensed under the MIT License. 5 | */ 6 | 'use strict'; 7 | 8 | var _ = require('lodash'); 9 | 10 | 11 | /** 12 | * Convenience method for creating `include`/`partial` 13 | * helpers, using the correct context. 14 | */ 15 | 16 | module.exports = function(Handlebars, options) { 17 | options = options || {}; 18 | var opts = _.extend(options, options.data || {}); 19 | 20 | return function (name, context) { 21 | var hash = context.hash || {}; 22 | var ctx = _.extend({}, context || {}, hash); 23 | var template = Handlebars.partials[name]; 24 | var fn = Handlebars.compile(template); 25 | return fn(ctx || ''); 26 | }; 27 | }; -------------------------------------------------------------------------------- /templates/usage.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Using Less.js 3 | slug: usage 4 | lead: "How to use less server-side, client-side and with third parties." 5 | --- 6 | 7 | 9 | 10 | 11 | {{#each usage.published}} 12 | 13 |
14 |
15 |

{{title}}

16 |
17 | 18 | {{#each (expand files)}} 19 |
20 | {{> popover-source-link . }} 21 | 22 | 23 | {{success '>> Inlining:' (basename .)}} {{! log a success message! }} 24 | 25 | 26 | {{#markdown}} 27 | {{inline .}} 28 | {{/markdown}} 29 | 30 |
31 |
32 | {{/each}} 33 | 34 |
35 | {{/each}} 36 | -------------------------------------------------------------------------------- /styles/bootstrap/thumbnails.less: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | .img-thumbnail(); 9 | display: block; // Override the inline-block from `.img-thumbnail` 10 | margin-bottom: @line-height-computed; 11 | 12 | > img { 13 | .img-responsive(); 14 | } 15 | } 16 | 17 | 18 | // Add a hover state for linked versions only 19 | a.thumbnail:hover, 20 | a.thumbnail:focus, 21 | a.thumbnail.active { 22 | border-color: @link-color; 23 | } 24 | 25 | // Images and captions 26 | .thumbnail > img { 27 | margin-left: auto; 28 | margin-right: auto; 29 | } 30 | .thumbnail .caption { 31 | padding: @thumbnail-caption-padding; 32 | color: @thumbnail-caption-color; 33 | } 34 | -------------------------------------------------------------------------------- /templates/_helpers/lib/lang.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bash : 'bash', 3 | // CSS 4 | css : 'css', 5 | // Coffee 6 | coffee : 'coffeescript', 7 | // Handlebars 8 | handlebars: 'handlebars', 9 | hbs : 'handlebars', 10 | hbt : 'handlebars', 11 | // XML 12 | html : 'xml', 13 | xml : 'xml', 14 | // JavaScript 15 | javascript: 'javascript', 16 | js : 'javascript', 17 | json : 'javascript', 18 | // Less 19 | less : 'less', 20 | // Markdown 21 | markdown : 'markdown', 22 | md : 'markdown', 23 | // Perl 24 | pl : 'perl', 25 | // Ruby 26 | rb : 'ruby', 27 | ru : 'ruby', 28 | ruby : 'ruby', 29 | // YAML 30 | yaml : 'yaml', 31 | yfm : 'yaml', 32 | yml : 'yaml', 33 | }; 34 | -------------------------------------------------------------------------------- /styles/components/button.less: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons 3 | // -------------------------------------------------- 4 | 5 | 6 | .btn-outline { 7 | color: @navbar-inverse-bg; 8 | background-color: #fff; 9 | border-color: #e5e5e5; 10 | } 11 | .btn-outline:hover, 12 | .btn-outline:focus, 13 | .btn-outline:active { 14 | color: #fff; 15 | background-color: @navbar-inverse-bg; 16 | border-color: @navbar-inverse-bg; 17 | } 18 | 19 | /* Inverted outline button (white on dark) */ 20 | .btn-outline-inverse { 21 | color: #fff; 22 | background-color: transparent; 23 | border-color: @navbar-inverse-color; 24 | } 25 | .btn-outline-inverse:hover, 26 | .btn-outline-inverse:focus, 27 | .btn-outline-inverse:active { 28 | color: @navbar-inverse-bg; 29 | text-shadow: none; 30 | background-color: #fff; 31 | border-color: #fff; 32 | } 33 | -------------------------------------------------------------------------------- /styles/bootstrap/close.less: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: (@font-size-base * 1.5); 9 | font-weight: @close-font-weight; 10 | line-height: 1; 11 | color: @close-color; 12 | text-shadow: @close-text-shadow; 13 | .opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: @close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | .opacity(.5); 21 | } 22 | 23 | // Additional properties for button version 24 | // iOS requires the button element instead of an anchor tag. 25 | // If you want the anchor version, it requires `href="#"`. 26 | button& { 27 | padding: 0; 28 | cursor: pointer; 29 | background: transparent; 30 | border: 0; 31 | -webkit-appearance: none; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/components/docs-content.less: -------------------------------------------------------------------------------- 1 | // 2 | // Content 3 | // -------------------------------------------------- 4 | 5 | 6 | // This is the main content of the docs, usually the center column. 7 | .docs-content { 8 | position: relative; 9 | overflow: hidden; // hide the overhang on code/pre blocks 10 | 11 | background-color: #FFF; 12 | padding: 50px @content-gutter 80px @content-gutter; // add 1px top padding to prevent collapsing 13 | margin: 0 -15px; 14 | 15 | border: none; 16 | border-radius: 0 0 4px 4px; 17 | 18 | // remove padding from fluid containers when 19 | // inside content blocks. 20 | .container-fluid { 21 | padding: 0; 22 | } 23 | } 24 | 25 | .docs-content { 26 | .box-shadow(0 2px 4px rgba(0,0,0,.2)); 27 | } 28 | 29 | @media (max-width: 767px) { 30 | .docs-content { 31 | padding: 50px 20px 1px; 32 | } 33 | } 34 | 35 | 36 | -------------------------------------------------------------------------------- /templates/layouts/default.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{> head }} 5 | 6 | 7 | 8 | {{#is slug 'index'}} 9 | {{> docs-header }} 10 | {{/is}} 11 | 12 | {{!-- Content --}} 13 |
14 |
15 |
16 | 19 |
20 |
21 | {{!-- Docs master nav --}} 22 | {{> nav-main }} 23 | {{> body }} 24 |
25 |
26 |
27 | 28 | {{!-- Footer --}} 29 | {{> footer }} 30 | 31 | {{!-- JavaScript and analytics only. --}} 32 | {{> javascripts }} 33 | 34 | -------------------------------------------------------------------------------- /styles/components/callout.less: -------------------------------------------------------------------------------- 1 | // 2 | // Callouts 3 | // -------------------------------------------------- 4 | 5 | 6 | .callout { 7 | margin: 20px 0; 8 | padding: 20px; 9 | border-left: 3px solid @gray-lighter; 10 | } 11 | 12 | 13 | // Content 14 | // ------------------------------- 15 | 16 | .callout h4 { 17 | margin-top: 0; 18 | margin-bottom: 5px; 19 | } 20 | .callout p:last-child { 21 | margin-bottom: 0; 22 | } 23 | 24 | 25 | // Modifiers 26 | // ------------------------------- 27 | 28 | .callout-info { 29 | background-color: #f4f8fa; 30 | border-color: #bce8f1; 31 | h4 { 32 | color: #3a87ad; 33 | } 34 | } 35 | 36 | .callout-warning { 37 | background-color: #faf8f0; 38 | border-color: #faebcc; 39 | h4 { 40 | color: #c09853; 41 | } 42 | } 43 | 44 | .callout-danger { 45 | background-color: #fdf7f7; 46 | border-color: #eed3d7; 47 | h4 { 48 | color: #b94a48; 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /templates/snippets/feed.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{site.title}} 7 | {{datetime}} 8 | {{site.homepage}} 9 | 10 | {{less.author.name}} 11 | {{less.author.email}} 12 | 13 | Copyright (c) 2009-{{now '%Y'}}, {{less.author.name}}. All rights reserved. 14 | 15 | {{#feed src="templates/*.hbs"}} 16 | 17 | {{@title}} 18 | 19 | {{@date}} 20 | {{site.homepage}}/{{@slug}} 21 | {{!@content}} 22 | 23 | {{/feed}} 24 | -------------------------------------------------------------------------------- /templates/functions.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Functions 3 | slug: functions 4 | lead: Function reference 5 | --- 6 | 7 | {{!-- Functions 8 | ================================================== --}} 9 | 10 |
11 |
12 |

Functions

13 |
14 |

Built-in functions supported by Less.

15 |
16 | 17 | 18 | 19 | {{#each functions.published}} 20 | 21 |
22 | 23 |

{{title}}

24 | 25 | {{#each (expand files)}} 26 |
27 | {{> popover-source-link . }} 28 | 29 | 30 | {{success '>> Inlining:' (filename .)}} {{! log a success message! }} 31 | 32 | 33 | {{#markdown}} 34 | {{inline .}} 35 | {{/markdown}} 36 | 37 |
38 |
39 | {{/each}} 40 | 41 |
42 | {{/each}} 43 | -------------------------------------------------------------------------------- /templates/includes/docs-header.hbs: -------------------------------------------------------------------------------- 1 | {{!-- Header --}} 2 |
3 |
4 |
5 | 6 |

It's CSS, with just a little more.

7 | 8 |

Use with Node.js:

9 | npm install -g less
10 | > lessc styles.less styles.css 11 |

12 |

Or the browser:

13 | {{marked '' }}
14 | <script src="{{ site.cdn.cloudflare }}" ></script>
15 |

16 |

Or try the online playground ! 🆕

17 | 18 |
19 |
20 |
21 | 22 | {{!-- Callout for the old docs link --}} 23 | {{> banner }} -------------------------------------------------------------------------------- /styles/bootstrap/utilities.less: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | .clearfix(); 11 | } 12 | .center-block { 13 | .center-block(); 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | .text-hide(); 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | visibility: hidden !important; 48 | } 49 | 50 | 51 | // For Affix plugin 52 | // ------------------------- 53 | 54 | .affix { 55 | position: fixed; 56 | } 57 | -------------------------------------------------------------------------------- /content/Home.md: -------------------------------------------------------------------------------- 1 | TODO - Things to incorporate maybe and then delete this page 2 | 3 | **External Resources** 4 | * Example Less Projects 5 | * [Stack Overflow: Questions tagged with "Less"][stackoverflow] 6 | * [Sitepoint, "A Comprehensive Introduction to Less"][sitepoint-article] 7 | * [Net Tuts+, "Quick Tip: You Need to Check out Less.js"][nettuts] 8 | * [Hongkiat.com, "Less CSS Tutorial: Designing a Slick Navigation Bar"][hongkiatNavbar] 9 | * [Hongkiat.com, "Working Effectively With Less: Tips And Tools"][hongkiatEffective] 10 | 11 | [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" 12 | [sitepoint-article]: http://www.sitepoint.com/a-comprehensive-introduction-to-less/ "Introduction to Less" 13 | [stackoverflow]: http://stackoverflow.com/questions/tagged/less "Questions tagged with 'Less'" 14 | 15 | [hongkiatNavbar]: http://www.hongkiat.com/blog/less-css-tutorial-design-slick-menu-nav-bar/ 16 | [hongkiatEffective]: http://www.hongkiat.com/blog/less-tips-tools/ 17 | -------------------------------------------------------------------------------- /styles/bootstrap/jumbotron.less: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding: @jumbotron-padding; 8 | margin-bottom: @jumbotron-padding; 9 | font-size: @jumbotron-font-size; 10 | font-weight: 200; 11 | line-height: (@line-height-base * 1.5); 12 | color: @jumbotron-color; 13 | background-color: @jumbotron-bg; 14 | 15 | h1 { 16 | line-height: 1; 17 | color: @jumbotron-heading-color; 18 | } 19 | p { 20 | line-height: 1.4; 21 | } 22 | 23 | .container & { 24 | border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container 25 | } 26 | 27 | @media screen and (min-width: @screen-sm-min) { 28 | padding-top: (@jumbotron-padding * 1.6); 29 | padding-bottom: (@jumbotron-padding * 1.6); 30 | 31 | .container & { 32 | padding-left: (@jumbotron-padding * 2); 33 | padding-right: (@jumbotron-padding * 2); 34 | } 35 | 36 | h1 { 37 | font-size: (@font-size-base * 4.5); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /content/usage/browser-support.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Browser Support 3 | --- 4 | 5 | Less only supports running on modern browsers (recent versions of Chrome, Firefox, Safari and IE/Edge). While it is possible to use Less on the client side in production, please be aware that there are performance implications for doing so (although the latest releases of Less are quite a bit faster). Also, sometimes cosmetic issues can occur if a JavaScript error occurs. This is a trade off of flexibility vs. speed. For the fastest performance possible for a static web site, we recommend compiling Less on the server side. 6 | 7 | Note that PhantomJS does not currently implement `Function.prototype.bind` so you will require a es-5 shim for this function to run under PhantomJS (We use PhantomJS for tests and we append an es5-shim to make it work). 8 | 9 | There are reasons to use client-side script in production, such as if you want to allow users to tweak variables which will affect the theme and you want to show it to them in real-time - in this instance a user is not worried about waiting for a style to update before seeing it. 10 | -------------------------------------------------------------------------------- /styles/bootstrap/bootstrap.less: -------------------------------------------------------------------------------- 1 | // Reset 2 | @import "normalize.less"; 3 | @import "print.less"; 4 | 5 | // Core CSS 6 | @import "scaffolding.less"; 7 | @import "type.less"; 8 | @import "code.less"; 9 | @import "grid.less"; 10 | @import "tables.less"; 11 | @import "forms.less"; 12 | @import "buttons.less"; 13 | 14 | // Components 15 | @import "component-animations.less"; 16 | @import "glyphicons.less"; 17 | @import "dropdowns.less"; 18 | @import "button-groups.less"; 19 | @import "input-groups.less"; 20 | @import "navs.less"; 21 | @import "navbar.less"; 22 | @import "breadcrumbs.less"; 23 | @import "pagination.less"; 24 | @import "pager.less"; 25 | @import "labels.less"; 26 | @import "badges.less"; 27 | @import "jumbotron.less"; 28 | @import "thumbnails.less"; 29 | @import "alerts.less"; 30 | @import "progress-bars.less"; 31 | @import "media.less"; 32 | @import "list-group.less"; 33 | @import "panels.less"; 34 | @import "wells.less"; 35 | @import "close.less"; 36 | 37 | // Components w/ JavaScript 38 | @import "modals.less"; 39 | @import "tooltip.less"; 40 | @import "popovers.less"; 41 | @import "carousel.less"; 42 | -------------------------------------------------------------------------------- /templates/_helpers/resolve.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Handlebars Helpers: {{rel}} 3 | * Copyright (c) 2014 Jon Schlinkert, contributors. 4 | * Licensed under the MIT License (MIT). 5 | */ 6 | 'use strict'; 7 | 8 | var file = require('fs-utils'); 9 | var path = require('path'); 10 | var relative = require('relative'); 11 | var _ = require('lodash'); 12 | 13 | 14 | module.exports.register = function (Handlebars, options, params) { 15 | var opts = options || {}; 16 | 17 | Handlebars.registerHelper('resolve', function (filepath, context) { 18 | var basename = path.basename(filepath, path.extname(filepath)); 19 | context = context || {}; 20 | var self = _.extend({}, this, context); 21 | var dest = self.page.dest; 22 | var url = ''; 23 | 24 | options.pages.forEach(function (page) { 25 | if (page.src.indexOf(basename) !== -1) { 26 | url = relative(dest, page.dest); 27 | } 28 | }); 29 | 30 | if (!url && options.site && options.site.dest) { 31 | url = relative.toBase(options.site.dest, filepath); 32 | } 33 | return new Handlebars.SafeString(url); 34 | }); 35 | 36 | }; -------------------------------------------------------------------------------- /styles/bootstrap/media.less: -------------------------------------------------------------------------------- 1 | // Media objects 2 | // Source: http://stubbornella.org/content/?p=497 3 | // -------------------------------------------------- 4 | 5 | 6 | // Common styles 7 | // ------------------------- 8 | 9 | // Clear the floats 10 | .media, 11 | .media-body { 12 | overflow: hidden; 13 | zoom: 1; 14 | } 15 | 16 | // Proper spacing between instances of .media 17 | .media, 18 | .media .media { 19 | margin-top: 15px; 20 | } 21 | .media:first-child { 22 | margin-top: 0; 23 | } 24 | 25 | // For images and videos, set to block 26 | .media-object { 27 | display: block; 28 | } 29 | 30 | // Reset margins on headings for tighter default spacing 31 | .media-heading { 32 | margin: 0 0 5px; 33 | } 34 | 35 | 36 | // Media image alignment 37 | // ------------------------- 38 | 39 | .media { 40 | > .pull-left { 41 | margin-right: 10px; 42 | } 43 | > .pull-right { 44 | margin-left: 10px; 45 | } 46 | } 47 | 48 | 49 | // Media list variation 50 | // ------------------------- 51 | 52 | // Undo default ul/ol styles 53 | .media-list { 54 | padding-left: 0; 55 | list-style: none; 56 | } 57 | -------------------------------------------------------------------------------- /templates/includes/head.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{default title (titleize basename)}} | {{site.title}} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /styles/bootstrap/pager.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: @line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | .clearfix(); 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: @pagination-bg; 19 | border: 1px solid @pagination-border; 20 | border-radius: @pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: @pagination-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: @pager-disabled-color; 50 | background-color: @pagination-bg; 51 | cursor: not-allowed; 52 | } 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /data/translations.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # Language translations: Alphabetical Order 3 | # ============================================= 4 | 5 | - language: Belarusian 6 | url: http://www.designcontest.com/show/lesscss-be 7 | 8 | - language: 中文 (Chinese) 9 | url: http://lesscss.cn 10 | 11 | - language: Danish 12 | url: http://lesscss.dk 13 | 14 | - language: German 15 | url: http://www.lesscss.de 16 | 17 | - language: Indonesian 18 | url: http://bertzzie.com/post/7/dokumentasi-less-bahasa-indonesia 19 | 20 | - language: Iranian 21 | url: http://lesscss-iran.ir 22 | 23 | - language: Japanese 24 | url: http://less-ja.studiomohawk.com/ 25 | 26 | - language: Polish 27 | url: http://ciembor.github.com/lesscss.org/ 28 | 29 | - language: Portuguese 30 | url: http://giovanneafonso.github.io/lesscss.org/ 31 | 32 | - language: Russian 33 | url: http://less-lang.info 34 | 35 | - language: Spanish 36 | url: http://amatellanes.github.io/lesscss.org/ 37 | 38 | - language: Ukrainian 39 | url: http://komaval.github.com/lesscss.org/ 40 | 41 | - language: Vietnamese 42 | url: http://less.eten.vn/ 43 | -------------------------------------------------------------------------------- /templates/includes/button-tweet.hbs: -------------------------------------------------------------------------------- 1 | 16 |
17 |  Tweet 18 | 29 |
30 | -------------------------------------------------------------------------------- /assets/root/LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Alexis Sellier, Less.js, contributors. 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2022 Alexis Sellier, the Less Core Team, Contributors. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /content/features/css-guards.md: -------------------------------------------------------------------------------- 1 | > "if"'s around selectors 2 | 3 | Released [v1.5.0]({{ less.master.url }}CHANGELOG.md) 4 | 5 | Like Mixin Guards, guards can also be applied to css selectors, which is syntactic sugar for declaring the mixin and then calling it immediately. 6 | 7 | For instance, before 1.5.0 you would have had to do this: 8 | 9 | ```less 10 | .my-optional-style() when (@my-option = true) { 11 | button { 12 | color: white; 13 | } 14 | } 15 | .my-optional-style(); 16 | ``` 17 | 18 | Now, you can apply the guard directly to a style. 19 | 20 | ```less 21 | button when (@my-option = true) { 22 | color: white; 23 | } 24 | ``` 25 | 26 | You can also achieve an `if` type statement by combining this with the `&` feature, allowing you to group multiple guards. 27 | ```less 28 | & when (@my-option = true) { 29 | button { 30 | color: white; 31 | } 32 | a { 33 | color: blue; 34 | } 35 | } 36 | ``` 37 | Note that you can also achieve a similar pattern by using the actual `if()` function and a variable call. As in: 38 | ```less 39 | @dr: if(@my-option = true, { 40 | button { 41 | color: white; 42 | } 43 | a { 44 | color: blue; 45 | } 46 | }); 47 | @dr(); 48 | ``` -------------------------------------------------------------------------------- /content/features/merge.md: -------------------------------------------------------------------------------- 1 | > Combine properties 2 | 3 | The `merge` feature allows for aggregating values from multiple properties into a comma or space separated list under a single property. `merge` is useful for properties such as background and transform. 4 | 5 | ### Comma 6 | 7 | > Append property value with comma 8 | 9 | Released [v1.5.0]({{ less.master.url }}CHANGELOG.md) 10 | 11 | Example: 12 | 13 | ```less 14 | .mixin() { 15 | box-shadow+: inset 0 0 10px #555; 16 | } 17 | .myclass { 18 | .mixin(); 19 | box-shadow+: 0 0 20px black; 20 | } 21 | ``` 22 | Outputs 23 | 24 | ```css 25 | .myclass { 26 | box-shadow: inset 0 0 10px #555, 0 0 20px black; 27 | } 28 | ``` 29 | 30 | ### Space 31 | 32 | > Append property value with space 33 | 34 | Released [v1.7.0]({{ less.master.url }}CHANGELOG.md) 35 | 36 | Example: 37 | 38 | ```less 39 | .mixin() { 40 | transform+_: scale(2); 41 | } 42 | .myclass { 43 | .mixin(); 44 | transform+_: rotate(15deg); 45 | } 46 | ``` 47 | Outputs 48 | 49 | ```css 50 | .myclass { 51 | transform: scale(2) rotate(15deg); 52 | } 53 | ``` 54 | 55 | To avoid any unintentional joins, `merge` requires an explicit `+` or `+_` flag on each join pending declaration. -------------------------------------------------------------------------------- /data/tools.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # PUBLISHED 3 | # ============================================= 4 | # This file is only needed to ensure that the 5 | # sections build in a specific order. 6 | 7 | 8 | # The base path for features docs. Makes this easier 9 | # to update without having to change each path. 10 | base: content/tools 11 | 12 | published: 13 | frameworks-using-less: 14 | title: Frameworks Using Less 15 | files: <%= tools.base %>/frameworks-using-less.md 16 | 17 | editors-and-plugins: 18 | title: Editors and Editor Plugins 19 | files: <%= tools.base %>/editors-and-plugins.md 20 | 21 | plugins: 22 | title: Less.js Plugins 23 | files: <%= tools.base %>/plugins.md 24 | 25 | guis-for-less: 26 | title: GUIs for Less 27 | files: <%= tools.base %>/guis-for-less.md 28 | 29 | online-less-compilers: 30 | title: Online Less Compilers 31 | files: <%= tools.base %>/online-less-compilers.md 32 | 33 | third-party-compilers: 34 | title: Third Party Compilers 35 | files: <%= tools.base %>/third-party-compilers.md 36 | 37 | ports: 38 | title: Ports of Less.js 39 | files: <%= tools.base %>/ports.md 40 | 41 | 42 | -------------------------------------------------------------------------------- /content/home/getting-started.md: -------------------------------------------------------------------------------- 1 | Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. 2 | 3 | Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with Less is our [online editor](http://lesscss.org/less-preview/). 4 | 5 | For example: 6 | 7 | ```less 8 | @base: #f938ab; 9 | 10 | .box-shadow(@style, @c) when (iscolor(@c)) { 11 | -webkit-box-shadow: @style @c; 12 | box-shadow: @style @c; 13 | } 14 | .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { 15 | .box-shadow(@style, rgba(0, 0, 0, @alpha)); 16 | } 17 | .box { 18 | color: saturate(@base, 5%); 19 | border-color: lighten(@base, 30%); 20 | div { .box-shadow(0 0 5px, 30%) } 21 | } 22 | ``` 23 | 24 | compiles to 25 | 26 | ```css 27 | .box { 28 | color: #fe33ac; 29 | border-color: #fdcdea; 30 | } 31 | .box div { 32 | -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 33 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /styles/components/header.less: -------------------------------------------------------------------------------- 1 | // 2 | // Subhead 3 | // -------------------------------------------------- 4 | 5 | 6 | 7 | .docs-header, 8 | .docs-home { 9 | color: @navbar-inverse-link-color; 10 | background-color: @navbar-inverse-bg; 11 | } 12 | 13 | /* Page headers */ 14 | .docs-header { 15 | padding: 30px 15px 50px; /* side padding builds on .container 15px, so 30px */ 16 | font-size: 14px; 17 | text-align: center; 18 | text-shadow: 0 1px 0 rgba(0,0,0,.15); 19 | } 20 | .docs-header h1 { 21 | color: #fff; 22 | } 23 | .docs-header { 24 | h3, p { 25 | color: @navbar-inverse-link-color; 26 | } 27 | h3 { 28 | margin-bottom: 3em; 29 | } 30 | code { 31 | background: hsl(208, 56%, 10%); 32 | padding: 2px 4px; 33 | white-space: pre-wrap; 34 | } 35 | } 36 | .docs-header p { 37 | font-weight: 300; 38 | line-height: 1.5; 39 | } 40 | .docs-header .container { 41 | position: relative; 42 | } 43 | 44 | @media (min-width: 768px) { 45 | .docs-header { 46 | font-size: 16px; 47 | text-align: left; 48 | display: flex; 49 | min-height: 100vh; 50 | align-items: center; 51 | } 52 | .docs-header h1 { 53 | font-size: 60px; 54 | line-height: 1; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /content/features/mixin-loops.md: -------------------------------------------------------------------------------- 1 | > Creating loops 2 | 3 | In Less a mixin can call itself. Such recursive mixins, when combined with [Guard Expressions](#mixin-guards-feature) and [Pattern Matching](#mixins-parametric-feature-pattern-matching), can be used to create various iterative/loop structures. 4 | 5 | Example: 6 | 7 | ```less 8 | .loop(@counter) when (@counter > 0) { 9 | .loop((@counter - 1)); // next iteration 10 | width: (10px * @counter); // code for each iteration 11 | } 12 | 13 | div { 14 | .loop(5); // launch the loop 15 | } 16 | ``` 17 | 18 | Output: 19 | 20 | ```css 21 | div { 22 | width: 10px; 23 | width: 20px; 24 | width: 30px; 25 | width: 40px; 26 | width: 50px; 27 | } 28 | ``` 29 | 30 | A generic example of using a recursive loop to generate CSS grid classes: 31 | 32 | ```less 33 | .generate-columns(4); 34 | 35 | .generate-columns(@n, @i: 1) when (@i =< @n) { 36 | .column-@{i} { 37 | width: (@i * 100% / @n); 38 | } 39 | .generate-columns(@n, (@i + 1)); 40 | } 41 | ``` 42 | 43 | Output: 44 | 45 | ```css 46 | .column-1 { 47 | width: 25%; 48 | } 49 | .column-2 { 50 | width: 50%; 51 | } 52 | .column-3 { 53 | width: 75%; 54 | } 55 | .column-4 { 56 | width: 100%; 57 | } 58 | ``` 59 | -------------------------------------------------------------------------------- /styles/bootstrap/badges.less: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base classes 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: @font-size-small; 12 | font-weight: @badge-font-weight; 13 | color: @badge-color; 14 | line-height: @badge-line-height; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: @badge-bg; 19 | border-radius: @badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | } 26 | 27 | // Hover state, but only for links 28 | a.badge { 29 | &:hover, 30 | &:focus { 31 | color: @badge-link-hover-color; 32 | text-decoration: none; 33 | cursor: pointer; 34 | } 35 | } 36 | 37 | // Quick fix for labels/badges in buttons 38 | .btn .badge { 39 | position: relative; 40 | top: -1px; 41 | } 42 | 43 | // Account for counters in navs 44 | a.list-group-item.active > .badge, 45 | .nav-pills > .active > a > .badge { 46 | color: @badge-active-color; 47 | background-color: @badge-active-bg; 48 | } 49 | .nav-pills > li > a > .badge { 50 | margin-left: 3px; 51 | } 52 | -------------------------------------------------------------------------------- /content/features/nested.md: -------------------------------------------------------------------------------- 1 | > Less allows you to use nesting as well as normal cascading CSS. 2 | 3 | ... 4 | 5 | ### Nested media queries 6 | 7 | Media queries can be nested in the same way as selectors, and output will create the appropriate rules within media queries. 8 | 9 | For example: 10 | 11 | ```less 12 | .one { 13 | @media (width: 400px) { 14 | font-size: 1.2em; 15 | @media print and color { 16 | color: blue; 17 | } 18 | } 19 | } 20 | ``` 21 | 22 | Will output: 23 | 24 | ```css 25 | @media (width: 400px) { 26 | .one { 27 | font-size: 1.2em; 28 | } 29 | } 30 | @media (width: 400px) and print and color { 31 | .one { 32 | color: blue; 33 | } 34 | } 35 | ``` 36 | 37 | ... 38 | 39 | ### `&` and mixins 40 | 41 | 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. 42 | 43 | For example: 44 | 45 | ```less 46 | .mixin { 47 | &:hover { 48 | color:cyan; 49 | } 50 | } 51 | .blue { 52 | .mixin; 53 | color:blue; 54 | } 55 | 56 | ``` 57 | 58 | Will output 59 | 60 | ```css 61 | .mixin:hover { 62 | color: cyan; 63 | } 64 | 65 | .blue { 66 | color: blue; 67 | } 68 | .blue:hover { 69 | color: cyan; 70 | } 71 | ``` 72 | -------------------------------------------------------------------------------- /styles/bootstrap/labels.less: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: @label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // Add hover effects, but only for links 18 | &[href] { 19 | &:hover, 20 | &:focus { 21 | color: @label-link-hover-color; 22 | text-decoration: none; 23 | cursor: pointer; 24 | } 25 | } 26 | 27 | // Empty labels collapse automatically (not available in IE8) 28 | &:empty { 29 | display: none; 30 | } 31 | } 32 | 33 | // Colors 34 | // Contextual variations (linked labels get darker on :hover) 35 | 36 | .label-default { 37 | .label-variant(@label-default-bg); 38 | } 39 | 40 | .label-primary { 41 | .label-variant(@label-primary-bg); 42 | } 43 | 44 | .label-success { 45 | .label-variant(@label-success-bg); 46 | } 47 | 48 | .label-info { 49 | .label-variant(@label-info-bg); 50 | } 51 | 52 | .label-warning { 53 | .label-variant(@label-warning-bg); 54 | } 55 | 56 | .label-danger { 57 | .label-variant(@label-danger-bg); 58 | } 59 | -------------------------------------------------------------------------------- /templates/features.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Features In-Depth 3 | lead: Features of the Less language 4 | slug: features 5 | --- 6 | 7 | {{#each features.published}} 8 | 9 |
10 | 11 |

{{{title}}}

12 | 13 | 14 | {{#each (expand files)}} 15 | 16 |
17 | {{> popover-source-link . }} 18 | 19 | 20 | {{success '>> Inlining:' (basename .)}} {{! log a success message! }} 21 | 22 | 23 | {{#markdown}} 24 | {{inline .}} 25 | {{/markdown}} 26 | 27 |
28 |
29 | {{/each}} 30 | 31 | {{#each subs}} 32 | 33 | 34 |

{{{title}}}

35 | 36 | {{#each (expand files)}} 37 |
38 | {{> popover-source-link . }} 39 | 40 | 41 | {{success '>> Inlining:' (basename .)}} {{! log a success message! }} 42 | 43 | 44 | {{#markdown}} 45 | {{inline .}} 46 | {{/markdown}} 47 | 48 |
49 |
50 | {{/each}} 51 | {{/each}} 52 | 53 |
54 | {{/each}} -------------------------------------------------------------------------------- /templates/includes/footer.hbs: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /templates/_helpers/fs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handlebars Helpers 3 | * Copyright (c) 2014 Jon Schlinkert 4 | * Licensed under the MIT License (MIT). 5 | */ 6 | 'use strict'; 7 | 8 | var path = require('path'); 9 | var file = require('fs-utils'); 10 | 11 | 12 | module.exports.register = function (Handlebars, options, params) { 13 | 14 | /** 15 | * Write a file to disk. 16 | * 17 | * @param {String} filepath Filepath of the destination file 18 | * @param {String} content Content to write to the file. 19 | * @return {String} 20 | */ 21 | 22 | Handlebars.registerHelper('write', function (filepath, content) { 23 | return file.writeFileSync(filepath, content); 24 | }); 25 | 26 | 27 | 28 | /** 29 | * Write the give context to a JSON file. 30 | * @param {String} dest Destination directory 31 | * @param {String} name Destination file name 32 | * @param {Object} context Context object 33 | * @return {Object} JSON File with context 34 | * 35 | * @example 36 | * {{writeJSON 'tmp/page/' basename this.page}} 37 | * 38 | */ 39 | 40 | Handlebars.registerHelper('writeJSON', function (dest, name, context) { 41 | return file.writeJSONSync(path.join(dest, name) + '.json', context); 42 | }); 43 | }; 44 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Docs 2 | 3 | env: {NODE_VERSION: 14} 4 | 5 | on: 6 | push: 7 | branches: [ master ] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 13 | jobs: 14 | # This workflow contains a single job called "build" 15 | deploy: 16 | # The type of runner that the job will run on 17 | runs-on: ubuntu-latest 18 | 19 | # Steps represent a sequence of tasks that will be executed as part of the job 20 | steps: 21 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 22 | - uses: actions/checkout@v4 23 | - uses: actions/setup-node@v4 24 | with: {node-version: '${{ env.NODE_VERSION }}'} 25 | - name: install dependencies 26 | run: npm install 27 | - name: build docs 28 | run: node data/_utils/pkg && grunt 29 | - name: Deploy to GitHub Pages 30 | if: success() 31 | uses: crazy-max/ghaction-github-pages@v4 32 | with: 33 | repo: less/less.github.io 34 | target_branch: master 35 | build_dir: dest 36 | env: 37 | GH_PAT: ${{ secrets.GH_PAT }} 38 | -------------------------------------------------------------------------------- /data/_utils/pkg.js: -------------------------------------------------------------------------------- 1 | /** 2 | * package.json 3 | */ 4 | 5 | // Node.js 6 | var path = require('path'); 7 | 8 | // node_modules 9 | var grunt = require('grunt'); 10 | var _ = require('lodash'); 11 | 12 | // Config 13 | var cwd = path.join.bind(null, __dirname, '../'); 14 | 15 | var githubApi = require('github'); 16 | var github = new githubApi({ 17 | version: '3.0.0', 18 | timeout: 5000 19 | }); 20 | 21 | var getPackageFile = function (dest, callback) { 22 | 23 | // Get package.json 24 | github.repos.getContent({ 25 | user: 'less', 26 | repo: 'less.js', 27 | path: 'packages/less/package.json' 28 | }, 29 | 30 | function (err, resp, cb) { 31 | if (err) { 32 | console.log('error: ' + err); 33 | callback(err, null); 34 | } else { 35 | var b = Buffer.from(resp.content, 'base64'); 36 | var pkg = { 37 | name: resp.name, 38 | text: b.toString() 39 | }; 40 | var contents = JSON.parse(pkg.text, 'utf-8'); 41 | grunt.log.ok('Saved:'.yellow, dest); 42 | 43 | // Extend package.json with custom properties 44 | contents = _.extend(contents, require('./extend-pkg')); 45 | grunt.file.write(dest, JSON.stringify(contents, null, 2)); 46 | } 47 | }); 48 | }; 49 | 50 | getPackageFile(cwd('less.json')); 51 | -------------------------------------------------------------------------------- /styles/index.less: -------------------------------------------------------------------------------- 1 | // 2 | // Theme Styles 3 | // -------------------------------------------------- 4 | 5 | 6 | // Theme variables 7 | @import "variables.less"; 8 | @import "mixins.less"; 9 | 10 | 11 | // Vendor 12 | @import "bootstrap.less"; 13 | @import (less) "docs.css"; 14 | 15 | 16 | // Docs Components 17 | // -------------------------------- 18 | 19 | // Note: watch if a "components/" file name is the same as one of "bootstrap/" 20 | // both are in `paths` thus "tables.less" imports "bootstrap/tables.less" 21 | // and `(once)` applies. 22 | 23 | // Typography & Code 24 | @import (less) "highlight-js/default.less"; 25 | @import "typography.less"; 26 | // @import "code-overrides.less"; 27 | 28 | // Layout and structure 29 | @import "scaffolding.less"; 30 | @import "ad.less"; 31 | @import "banner.less"; 32 | @import "callout.less"; 33 | @import "header.less"; 34 | @import "footer.less"; 35 | @import "team.less"; 36 | @import "components/tables.less"; 37 | @import "docs-content.less"; 38 | @import "docs-section.less"; 39 | 40 | // Navigation 41 | @import "sidebar.less"; 42 | @import "main-nav.less"; 43 | 44 | // Buttons 45 | @import "button.less"; 46 | 47 | // Links 48 | @import "anchors.less"; 49 | @import "source-link.less"; 50 | 51 | 52 | 53 | // Utility classes 54 | @import "utilities.less"; 55 | @import "responsive-utilities.less"; 56 | -------------------------------------------------------------------------------- /styles/bootstrap/code.less: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and blocK) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: @font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: @code-color; 19 | background-color: @code-bg; 20 | white-space: nowrap; 21 | border-radius: @border-radius-base; 22 | } 23 | 24 | // Blocks of code 25 | pre { 26 | display: block; 27 | padding: ((@line-height-computed - 1) / 2); 28 | margin: 0 0 (@line-height-computed / 2); 29 | font-size: (@font-size-base - 1); // 14px to 13px 30 | line-height: @line-height-base; 31 | word-break: break-all; 32 | word-wrap: break-word; 33 | color: @pre-color; 34 | background-color: @pre-bg; 35 | border: 1px solid @pre-border-color; 36 | border-radius: @border-radius-base; 37 | 38 | // Account for some code outputs that place code tags in pre tags 39 | code { 40 | padding: 0; 41 | font-size: inherit; 42 | color: inherit; 43 | white-space: pre-wrap; 44 | background-color: transparent; 45 | border-radius: 0; 46 | } 47 | } 48 | 49 | // Enable scrollable blocks of code 50 | .pre-scrollable { 51 | max-height: @pre-scrollable-max-height; 52 | overflow-y: scroll; 53 | } 54 | -------------------------------------------------------------------------------- /styles/components/source-link.less: -------------------------------------------------------------------------------- 1 | // 2 | // Source Link 3 | // -------------------------------------------------- 4 | // Special styles for hyperlinked "edit" icon that 5 | // takes the user to the source code for the current 6 | // section. 7 | 8 | @source-link-width: 100px; 9 | 10 | 11 | /** 12 | * ## .source-link 13 | * 14 | * This link 15 | */ 16 | 17 | .section-content .source-link { 18 | top: -27px; 19 | left: 10px; 20 | width: @source-link-width; 21 | padding: 15px; 22 | 23 | color: @gray-light; 24 | font-size: @font-size-large; 25 | text-align: right; 26 | 27 | &.active, &:hover { 28 | color: @link-color; 29 | text-decoration: none; 30 | } 31 | 32 | &.right { 33 | float: right; 34 | } 35 | } 36 | 37 | 38 | /** 39 | * ## .popover-source 40 | * 41 | * Special popover styles 42 | */ 43 | 44 | // increase specificity to override .popover styles 45 | .popover-source { 46 | // prevent inner text from wrapping in source links 47 | max-width: auto; 48 | 49 | // Specific styling for new-window icon in popovers 50 | .glyphicon-new-window { 51 | font-size: 12px; 52 | padding-left: 6px; 53 | } 54 | 55 | &, .glyphicon-new-window { 56 | &, &:hover { 57 | color: @link-color; // medium gray-blue 58 | } 59 | } 60 | 61 | &.left { 62 | margin-top: 2px; // tweak margin to align vertically 63 | margin-left: 60px; 64 | } 65 | } 66 | 67 | 68 | -------------------------------------------------------------------------------- /styles/components/main-nav.less: -------------------------------------------------------------------------------- 1 | // 2 | // Main navigation 3 | // -------------------------------------------------- 4 | 5 | 6 | 7 | .docs-nav { 8 | text-shadow: 0 -1px 0 rgba(0,0,0,.15); 9 | background-color: @navbar-inverse-bg; 10 | border-color: rgba(0,0,0,.2); 11 | box-shadow: 0 1px 0 rgba(255,255,255,.07); 12 | 13 | .navbar-collapse { 14 | border-color: @navbar-inverse-border; 15 | } 16 | 17 | // increase specificity to override Bootstrap styles 18 | .container .navbar-brand { 19 | margin: 12px 0 0; 20 | width: 100px; 21 | padding: 0; 22 | 23 | // to resize image, only the width and margin of 24 | // the parent, .navbar-brand, needs to be adjusted 25 | img { 26 | .img-responsive(); 27 | } 28 | } 29 | 30 | .navbar-nav > li > a, 31 | .navbar-nav > li > span { 32 | color: @navbar-inverse-link-color; 33 | &:hover { 34 | color: #fff; 35 | } 36 | } 37 | .navbar-nav > li > span:extend(.navbar-nav > li > a, .nav > li > a){} 38 | 39 | .navbar-nav > .active > a, 40 | .navbar-nav > .active > span { 41 | &, &:hover { 42 | color: #fff; 43 | background-color: rgba(0,0,0,.2); 44 | } 45 | } 46 | 47 | .navbar-toggle { 48 | border-color: @navbar-inverse-bg; 49 | &:hover { 50 | background-color: @navbar-inverse-border; 51 | border-color: @navbar-inverse-border; 52 | } 53 | } 54 | 55 | } 56 | 57 | 58 | -------------------------------------------------------------------------------- /templates/_helpers/markdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Markdown Helper {{markdown}} 3 | * Copyright (c) 2014 Jon Schlinkert, Brian Woodward, contributors 4 | * Licensed under the MIT License (MIT). 5 | */ 6 | 'use strict'; 7 | 8 | var file = require('fs-utils'); 9 | var marked = require('marked-extras'); 10 | var strip = require('strip-indent'); 11 | var _ = require('lodash'); 12 | 13 | 14 | // module.exports = function (config) { 15 | // var Handlebars = config.Handlebars; 16 | // var helpers = {}; 17 | 18 | // config.options = config.options || {}; 19 | // var opts = _.extend(config.options, config.options.data || {}); 20 | // opts.marked = opts.marked || {}; 21 | 22 | // // file.expand(opts.content).map(function(filepath) { 23 | // // var name = file.base(filepath).toLowerCase(); 24 | // // var template = file.readFileSync(filepath); 25 | // // Handlebars.registerPartial(name, template); 26 | // // }); 27 | 28 | // helpers.markdown = function (options) { 29 | // var content = strip(options.fn(this)); 30 | // return new Handlebars.SafeString(marked(content, opts.marked)); 31 | // }; 32 | 33 | // helpers.md = function (name, context) { 34 | // var ctx = _.extend(this, context || {}); 35 | // var template = Handlebars.partials[name]; 36 | // var fn = Handlebars.compile(template); 37 | // return new Handlebars.SafeString(marked(fn(ctx), opts.marked)); 38 | // }; 39 | 40 | // return helpers; 41 | // }; -------------------------------------------------------------------------------- /templates/_helpers/lib/handlebars.js: -------------------------------------------------------------------------------- 1 | module.exports = function(hljs) { 2 | var EXPRESSION_KEYWORDS = 'each in with if else unless bindattr action collection debugger log outlet template unbound view yield'; 3 | return { 4 | case_insensitive: true, 5 | subLanguage: 'xml', subLanguageMode: 'continuous', 6 | contains: [ 7 | { 8 | className: 'expression', 9 | begin: '{{', end: '}}', 10 | contains: [ 11 | { 12 | className: 'begin-block', begin: '[#\\^/&]?', 13 | keywords: EXPRESSION_KEYWORDS 14 | }, 15 | { 16 | className: 'string', 17 | begin: '"', end: '"' 18 | }, 19 | { 20 | className: 'end-block', begin: '\\\/[a-zA-Z\-\ \.]+', 21 | keywords: EXPRESSION_KEYWORDS 22 | }, 23 | { 24 | className: 'variable', begin: '[a-zA-Z_$\-\.][a-zA-Z0-9_$\-\.]*', 25 | keywords: EXPRESSION_KEYWORDS 26 | } 27 | ] 28 | }, 29 | { 30 | className: 'comment', 31 | begin: '{{!--', end: '--}}', 32 | contains: [ 33 | { 34 | className: 'begin-block', begin: '[a-zA-Z\-\ \.]+', 35 | keywords: EXPRESSION_KEYWORDS 36 | }, 37 | { 38 | className: 'end-block', begin: '\\\/[a-zA-Z\-\ \.]+', 39 | keywords: EXPRESSION_KEYWORDS 40 | } 41 | ] 42 | } 43 | ] 44 | }; 45 | }; -------------------------------------------------------------------------------- /templates/_helpers/rel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Handlebars Helpers: {{rel}} 3 | * Copyright (c) 2014 Jon Schlinkert, contributors 4 | * Licensed under the MIT License. 5 | */ 6 | 'use strict'; 7 | 8 | var file = require('fs-utils'); 9 | var path = require('path'); 10 | var relative = require('relative'); 11 | var _ = require('lodash'); 12 | 13 | 14 | module.exports.register = function (Handlebars, options, params) { 15 | var opts = options || {}; 16 | var site = opts.site || {}; 17 | var root = (site && site.root || site.base); 18 | 19 | if (!root) { 20 | throw new Error(' The {{rel}} helper requires a site.root property.'); 21 | } 22 | 23 | Handlebars.registerHelper('rel', function (to) { 24 | var context = _.extend({}, opts, opts.data, this); 25 | var from = context.page.dest; 26 | to = path.join(root, to); 27 | return new Handlebars.SafeString(relative(from, to)); 28 | }); 29 | 30 | 31 | Handlebars.registerHelper('resolve', function (name, context) { 32 | var basename = path.basename(name, path.extname(name)); 33 | var url = ''; 34 | 35 | context = context || {}; 36 | var self = _.extend({}, this, context); 37 | 38 | params.pages.forEach(function (page) { 39 | if (page.src.indexOf(basename) !== -1) { 40 | url = relative(self.page.dest, page.dest); 41 | } 42 | }); 43 | 44 | if (!url) { 45 | var dest = file.normalizeSlash(path.join(site.dest, name)); 46 | url = relative.toBase(url, name); 47 | } 48 | 49 | return new Handlebars.SafeString(url); 50 | }); 51 | 52 | }; -------------------------------------------------------------------------------- /content/tools/ports.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ports 3 | --- 4 | 5 | ### Java 6 | * [Lesscss](https://github.com/houbie/lesscss) (Runs less.js using Rhino, Nasshorn or node.js engine; 1.7.0 compliant) 7 | * [Lesscss gradle plugin](https://github.com/houbie/lesscss-gradle-plugin) (Gradle plugin based on Lesscss) 8 | * [Less Engine](https://github.com/Asual/lesscss-engine) (Runs less.js in the Rhino JVM-based JavaScript interpreter) 9 | * [Less CSS Compiler for Java](https://github.com/marceloverdijk/lesscss-java) (Runs less.js in the Rhino JVM-based JavaScript interpreter) 10 | * [Less4j](https://github.com/SomMeri/less4j) (Native Java implementation.) 11 | * [JLessC](https://github.com/i-net-software/jlessc) (Less compiler written completely in Java) 12 | 13 | ### .Net 14 | * [Less CSS for .Net](http://www.dotlesscss.org/) 15 | * [BundleTransformer.Less](http://www.nuget.org/packages/BundleTransformer.Less/) 16 | 17 | ### PHP 18 | * [lessphp](http://leafo.net/lessphp/docs/) 19 | * [BW Less CSS](http://wordpress.org/extend/plugins/bw-less-css/) (WordPress Plugin) 20 | * [less.php](https://github.com/wikimedia/less.php) 21 | * [ILess](https://github.com/mishal/iless) 22 | 23 | ### Python 24 | * [Python Less Compiler](https://github.com/lesscpy/lesscpy) 25 | 26 | ### Ruby 27 | * [Less.js In Ruby's V8 Engine](https://github.com/cowboyd/less.rb) 28 | 29 | ### Go 30 | * [Less.js In Go](https://github.com/kib357/less-go) (Runs less.js inside embedded Javascript engine) 31 | 32 | Know of another port that should be added to this list? Please [let us know](https://github.com/less/less-docs/issues/new). 33 | -------------------------------------------------------------------------------- /content/functions/logical-functions.md: -------------------------------------------------------------------------------- 1 | ### if 2 | 3 | > Returns one of two values depending on a condition. 4 | 5 | Parameters: 6 | 7 | * `condition`: A boolean expression 8 | * `value1`: A value returned if `condition` is true. 9 | * `value2`: A value returned if `condition` is not true. 10 | 11 | Released: v3.0.0 12 | Updated: v3.6.0 13 | 14 | **Examples**: 15 | ```less 16 | @some: foo; 17 | 18 | div { 19 | margin: if((2 > 1), 0, 3px); 20 | color: if((iscolor(@some)), @some, black); 21 | } 22 | ``` 23 | Result: 24 | ```css 25 | div { 26 | margin: 0; 27 | color: black; 28 | } 29 | ``` 30 | 31 | Notes: A boolean expression supported as the `conditional` parameter are the same as of [Guard Statements](/features/#mixins-feature-mixin-guards-feature). 32 | ```less 33 | if(not (true), foo, bar); 34 | if((true) and (2 > 1), foo, bar); 35 | if((false) or (isstring("boo!")), foo, bar); 36 | ``` 37 | Note: before Less 3.6, the condition required a set of parentheses. 38 | ```less 39 | if(2 > 1, blue, green); // Causes an error in 3.0-3.5.3 40 | if((2 > 1), blue, green); // Ok 3.6+ 41 | ``` 42 | 43 | ### boolean 44 | 45 | > Evaluates to true or false 46 | 47 | You can "store" a boolean test for later evaluation in a guard or `if()`. 48 | 49 | Parameters: 50 | 51 | * `condition`: A boolean expression 52 | 53 | Released: v3.0.0 54 | Updated: v3.6.0 55 | 56 | **Examples**: 57 | ```less 58 | @bg: black; 59 | @bg-light: boolean(luma(@bg) > 50%); 60 | 61 | div { 62 | background: @bg; 63 | color: if(@bg-light, black, white); 64 | } 65 | ``` 66 | Result: 67 | ```css 68 | div { 69 | background: black; 70 | color: white; 71 | } 72 | ``` 73 | -------------------------------------------------------------------------------- /styles/highlight-js/atom-one-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Atom One Light by Daniel Gamage 4 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax 5 | 6 | base: #fafafa 7 | mono-1: #383a42 8 | mono-2: #686b77 9 | mono-3: #a0a1a7 10 | hue-1: #0184bb 11 | hue-2: #4078f2 12 | hue-3: #a626a4 13 | hue-4: #50a14f 14 | hue-5: #e45649 15 | hue-5-2: #c91243 16 | hue-6: #986801 17 | hue-6-2: #c18401 18 | 19 | */ 20 | 21 | .hljs { 22 | display: block; 23 | overflow-x: auto; 24 | padding: 0.5em; 25 | color: #383a42; 26 | background: #fafafa; 27 | } 28 | 29 | .hljs-comment, 30 | .hljs-quote { 31 | color: #a0a1a7; 32 | font-style: italic; 33 | } 34 | 35 | .hljs-doctag, 36 | .hljs-keyword, 37 | .hljs-formula { 38 | color: #a626a4; 39 | } 40 | 41 | .hljs-section, 42 | .hljs-name, 43 | .hljs-selector-tag, 44 | .hljs-deletion, 45 | .hljs-subst { 46 | color: #e45649; 47 | } 48 | 49 | .hljs-literal { 50 | color: #0184bb; 51 | } 52 | 53 | .hljs-string, 54 | .hljs-regexp, 55 | .hljs-addition, 56 | .hljs-attribute, 57 | .hljs-meta-string { 58 | color: #50a14f; 59 | } 60 | 61 | .hljs-built_in, 62 | .hljs-class .hljs-title { 63 | color: #c18401; 64 | } 65 | 66 | .hljs-attr, 67 | .hljs-variable, 68 | .hljs-template-variable, 69 | .hljs-type, 70 | .hljs-selector-class, 71 | .hljs-selector-attr, 72 | .hljs-selector-pseudo, 73 | .hljs-number { 74 | color: #986801; 75 | } 76 | 77 | .hljs-symbol, 78 | .hljs-bullet, 79 | .hljs-link, 80 | .hljs-meta, 81 | .hljs-selector-id, 82 | .hljs-title { 83 | color: #4078f2; 84 | } 85 | 86 | .hljs-emphasis { 87 | font-style: italic; 88 | } 89 | 90 | .hljs-strong { 91 | font-weight: bold; 92 | } 93 | 94 | .hljs-link { 95 | text-decoration: underline; 96 | } 97 | -------------------------------------------------------------------------------- /styles/bootstrap/alerts.less: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: @alert-padding; 11 | margin-bottom: @line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: @alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing @headings-color 19 | color: inherit; 20 | } 21 | // Provide class for links that match alerts 22 | .alert-link { 23 | font-weight: @alert-link-font-weight; 24 | } 25 | 26 | // Improve alignment and spacing of inner content 27 | > p, 28 | > ul { 29 | margin-bottom: 0; 30 | } 31 | > p + p { 32 | margin-top: 5px; 33 | } 34 | } 35 | 36 | // Dismissable alerts 37 | // 38 | // Expand the right padding and account for the close button's positioning. 39 | 40 | .alert-dismissable { 41 | padding-right: (@alert-padding + 20); 42 | 43 | // Adjust close link position 44 | .close { 45 | position: relative; 46 | top: -2px; 47 | right: -21px; 48 | color: inherit; 49 | } 50 | } 51 | 52 | // Alternate styles 53 | // 54 | // Generate contextual modifier classes for colorizing the alert. 55 | 56 | .alert-success { 57 | .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); 58 | } 59 | .alert-info { 60 | .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); 61 | } 62 | .alert-warning { 63 | .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); 64 | } 65 | .alert-danger { 66 | .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); 67 | } 68 | -------------------------------------------------------------------------------- /data/functions.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # PUBLISHED 3 | # ============================================= 4 | # This file is only needed to ensure that the 5 | # sections build in a specific order. 6 | 7 | 8 | # The base path for features docs. Makes this easier 9 | # to update without having to change each path. 10 | base: content/functions 11 | 12 | published: 13 | 14 | logical-functions: 15 | title: Logical Functions 16 | files: <%= functions.base %>/logical-functions.md 17 | 18 | string-functions: 19 | title: String Functions 20 | files: <%= functions.base %>/string-functions.md 21 | 22 | list-functions: 23 | title: List Functions 24 | files: <%= functions.base %>/list-functions.md 25 | 26 | math-functions: 27 | title: Math Functions 28 | files: <%= functions.base %>/math-functions.md 29 | 30 | type-functions: 31 | title: Type Functions 32 | files: <%= functions.base %>/type-functions.md 33 | 34 | misc-functions: 35 | title: Misc Functions 36 | files: <%= functions.base %>/misc-functions.md 37 | 38 | color-definition: 39 | title: Color Definition Functions 40 | files: <%= functions.base %>/color-definition.md 41 | 42 | color-channel: 43 | title: Color Channel Functions 44 | files: <%= functions.base %>/color-channel.md 45 | 46 | color-operations: 47 | title: Color Operation Functions 48 | files: <%= functions.base %>/color-operations.md 49 | 50 | color-blending: 51 | title: Color Blending Functions 52 | files: <%= functions.base %>/color-blending.md 53 | 54 | 55 | # ============================================= 56 | # NOT PUBLISHED / PLANNED / WIP 57 | # ============================================= 58 | 59 | unpublished: 60 | -------------------------------------------------------------------------------- /content/examples/data-URI.md: -------------------------------------------------------------------------------- 1 | This is a 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. 2 | 3 | ```bash 4 | #!/bin/bash 5 | 6 | SRC="$1" 7 | DST="$2" 8 | TMP="$(mktemp)" 9 | 10 | find "$SRC" -name "*.png" | while read i; do 11 | j="$(basename "$i")" 12 | f="$(echo "${j%.png}" | tr "@#&%+-. " "_")" 13 | echo "@gfx_$f: \"data:$(file -b --mime-type "$i");base64,$(base64 -w0 "$i")\";" 14 | echo "@size_$f: $(gm identify -format "%wpx %hpx" "$i" 2>/dev/null);" 15 | done > "$TMP"; 16 | mv "$TMP" "$DST" 17 | ``` 18 | 19 | You may need to change paths/params to `mktemp`, `file`, `base64` and `gm` [GraphicsMagick] according to your setup. 20 | 21 | Say you have `foo.png` and `foo@2x.png` in your source folder, the script produces this result (base64 data cut to save space) : 22 | 23 | ```less 24 | @foo-img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAfCAYAAAA(...)"; 25 | @foo-size: 29px 31px; 26 | @foo-img-2x: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA+CAYA(...)"; 27 | @foo-size-2x: 58px 62px; 28 | ``` 29 | 30 | This allows you to create a `.less` file like this: 31 | 32 | ```less 33 | @import "gfx.less" //file produced by the script 34 | 35 | .foo { 36 | background: url(@foo-img) no-repeat center center; 37 | -webkit-background-size: @size-foo; 38 | } 39 | 40 | @media only screen and (-webkit-min-device-pixel-ratio: 2) { 41 | .foo { 42 | background-image: url(@foo-img_2x); 43 | } 44 | } 45 | ``` 46 | 47 | That speeds things a lot and keeps your code nice, clean, and readable. You can put a number of `.png` files in your source folder, and the final compilation of your `.less` file will only include the assets needed and drop the ones that are not used. -------------------------------------------------------------------------------- /content/features/mixins-aliasing.md: -------------------------------------------------------------------------------- 1 | Released [v3.5.0]({{ less.master.url }}CHANGELOG.md) 2 | 3 | > Assigning mixin calls to a variable 4 | 5 | Mixins can be assigned to a variable to be called as a variable call, or can be used for map lookup. 6 | 7 | ```less 8 | #theme.dark.navbar { 9 | .colors(light) { 10 | primary: purple; 11 | } 12 | .colors(dark) { 13 | primary: black; 14 | secondary: grey; 15 | } 16 | } 17 | 18 | .navbar { 19 | @colors: #theme.dark.navbar.colors(dark); 20 | background: @colors[primary]; 21 | border: 1px solid @colors[secondary]; 22 | } 23 | ``` 24 | 25 | This would output: 26 | 27 | ```css 28 | .navbar { 29 | background: black; 30 | border: 1px solid grey; 31 | } 32 | ``` 33 | 34 | #### Variable calls 35 | 36 | Entire mixin calls can be aliased and called as variable calls. As in: 37 | 38 | ```less 39 | #library() { 40 | .colors() { 41 | background: green; 42 | } 43 | } 44 | .box { 45 | @alias: #library.colors(); 46 | @alias(); 47 | } 48 | ``` 49 | Outputs: 50 | ```css 51 | .box { 52 | background: green; 53 | } 54 | ``` 55 | 56 | Note, unlike mixins used in root, mixin calls assigned to variables and _called with no arguments_ always require parentheses. The following is not valid. 57 | 58 | ```less 59 | #library() { 60 | .colors() { 61 | background: green; 62 | } 63 | } 64 | .box { 65 | @alias: #library.colors; 66 | @alias(); // ERROR: Could not evaluate variable call @alias 67 | } 68 | ``` 69 | 70 | This is because it's ambiguous if variable is assigned a list of selectors or a mixin call. For example, in Less 3.5+, this variable could be used this way. 71 | 72 | ```less 73 | .box { 74 | @alias: #library.colors; 75 | @{alias} { 76 | a: b; 77 | } 78 | } 79 | ``` 80 | The above would output: 81 | ```css 82 | .box #library.colors { 83 | a: b; 84 | } 85 | ``` 86 | -------------------------------------------------------------------------------- /templates/includes/javascripts.hbs: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 14 | 15 | 16 | 17 | {{#live}}{{/live}} 18 | 19 | 20 | 21 | 22 | 23 | 30 | 31 | {{#if site.analytics.google_site_id}} 32 | 34 | 46 | {{/if}} 47 | -------------------------------------------------------------------------------- /styles/highlight-js/agate.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Agate by Taufik Nurrohman 3 | * ---------------------------------------------------- 4 | * 5 | * #ade5fc 6 | * #a2fca2 7 | * #c6b4f0 8 | * #d36363 9 | * #fcc28c 10 | * #fc9b9b 11 | * #ffa 12 | * #fff 13 | * #333 14 | * #62c8f3 15 | * #888 16 | * 17 | */ 18 | 19 | .hljs { 20 | display: block; 21 | overflow-x: auto; 22 | padding: 0.5em; 23 | background: #333; 24 | color: white; 25 | } 26 | 27 | .hljs-name, 28 | .hljs-strong { 29 | font-weight: bold; 30 | } 31 | 32 | .hljs-code, 33 | .hljs-emphasis { 34 | font-style: italic; 35 | } 36 | 37 | .hljs-tag { 38 | color: #62c8f3; 39 | } 40 | 41 | .hljs-variable, 42 | .hljs-template-variable, 43 | .hljs-selector-id, 44 | .hljs-selector-class { 45 | color: #ade5fc; 46 | } 47 | 48 | .hljs-string, 49 | .hljs-bullet { 50 | color: #a2fca2; 51 | } 52 | 53 | .hljs-type, 54 | .hljs-title, 55 | .hljs-section, 56 | .hljs-attribute, 57 | .hljs-quote, 58 | .hljs-built_in, 59 | .hljs-builtin-name { 60 | color: #ffa; 61 | } 62 | 63 | .hljs-number, 64 | .hljs-symbol, 65 | .hljs-bullet { 66 | color: #d36363; 67 | } 68 | 69 | .hljs-keyword, 70 | .hljs-selector-tag, 71 | .hljs-literal { 72 | color: #fcc28c; 73 | } 74 | 75 | .hljs-comment, 76 | .hljs-deletion, 77 | .hljs-code { 78 | color: #888; 79 | } 80 | 81 | .hljs-regexp, 82 | .hljs-link { 83 | color: #c6b4f0; 84 | } 85 | 86 | .hljs-meta { 87 | color: #fc9b9b; 88 | } 89 | 90 | .hljs-deletion { 91 | background-color: #fc9b9b; 92 | color: #333; 93 | } 94 | 95 | .hljs-addition { 96 | background-color: #a2fca2; 97 | color: #333; 98 | } 99 | 100 | .hljs a { 101 | color: inherit; 102 | } 103 | 104 | .hljs a:focus, 105 | .hljs a:hover { 106 | color: inherit; 107 | text-decoration: underline; 108 | } 109 | -------------------------------------------------------------------------------- /data/usage.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # PUBLISHED 3 | # ============================================= 4 | # This file is only needed to ensure that the 5 | # sections build in a specific order. 6 | 7 | 8 | # The base path for features docs. Makes this easier 9 | # to update without having to change each path. 10 | base: content/usage 11 | 12 | published: 13 | 14 | command-line-usage: 15 | title: Command Line Usage 16 | files: <%= usage.base %>/command-line-usage.md 17 | 18 | using-less-in-the-browser: 19 | title: Browser Usage 20 | files: <%= usage.base %>/using-less-in-the-browser.md 21 | 22 | less-options: 23 | title: Less.js Options 24 | files: <%= usage.base %>/less-options.md 25 | 26 | plugins: 27 | title: Pre-Loaded Plugins 28 | files: <%= usage.base %>/plugins.md 29 | 30 | programmatic-usage: 31 | title: Programmatic Usage 32 | files: <%= usage.base %>/programmatic-usage.md 33 | 34 | api: 35 | title: API 36 | files: <%= usage.base %>/api.md 37 | 38 | developing-less: 39 | title: Contributing to Less.js 40 | files: <%= usage.base %>/developing-less.md 41 | 42 | 43 | # ============================================= 44 | # NOT PUBLISHED / PLANNED / WIP 45 | # ============================================= 46 | 47 | unpublished: 48 | using-less: 49 | title: Using Less.js 50 | files: <%= usage.base %>/using-less.md 51 | 52 | browser-support: 53 | title: Browser Support 54 | files: <%= usage.base %>/browser-support.md 55 | 56 | v2-upgrade-guide: 57 | title: V2 Upgrade Guide 58 | files: <%= usage.base %>/v2-upgrade.md 59 | 60 | sourcemaps: 61 | published: false 62 | title: Sourcemaps 63 | files: <%= usage.base %>/sourcemaps.md 64 | 65 | plugins: 66 | published: false 67 | title: Plugins 68 | files: <%= usage.base %>/plugins.md 69 | -------------------------------------------------------------------------------- /content/tools/third-party-compilers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Third Party Compilers 3 | --- 4 | 5 | ## Node.js Tools 6 | 7 | * **[grunt-contrib-less](https://github.com/gruntjs/grunt-contrib-less)** 8 | * **[gulp-less](https://github.com/plus3network/gulp-less)**: Please note that this plugin discards `source-map` options, opting to instead using the [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) library. 9 | * **[svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#less)**: (converts Less to CSS before passing it to the Svelte compiler) 10 | * **[Connect Middleware for Less](https://github.com/emberfeather/less.js-middleware)**: Connect Middleware for Less compiling 11 | 12 | 13 | ## Other Technologies 14 | 15 | **Wro4j Runner CLI** 16 | 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: 17 | 18 | ```bash 19 | java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss 20 | ``` 21 | 22 | More details can be found here: [Wro4j Runner CLI](http://code.google.com/p/wro4j/wiki/wro4jRunner) 23 | 24 | **CSS::LESSp** 25 | 26 | http://search.cpan.org/~drinchev/CSS-LESSp/ 27 | 28 | ```bash 29 | lessp.pl styles.less > styles.css 30 | ``` 31 | 32 | **Windows Script Host** 33 | 34 | Note - the official Less node runs on windows, so we are not sure why you would use this. 35 | 36 | [Less.js for Windows](https://github.com/duncansmart/less.js-windows) with this usage: 37 | 38 | ```bash 39 | cscript //nologo lessc.wsf input.less [output.css] [-compress] 40 | ``` 41 | or 42 | 43 | ```bash 44 | lessc input.less [output.css] [-compress] 45 | ``` 46 | 47 | **dotless** 48 | 49 | [dotless for Windows](http://www.dotlesscss.org/) can be run like this: 50 | 51 | ```bash 52 | dotless.Compiler.exe [-switches] [outputfile] 53 | ``` 54 | 55 | **Also see:** 56 | 57 | * [Ports of Less](/about/#ports) 58 | -------------------------------------------------------------------------------- /content/tools/online-less-compilers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Online Less Compilers 3 | --- 4 | 5 | | | | 6 | |---|---| 7 | | [less2css.org](http://lesscss.org/less-preview/) | Online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile Less to CSS in real-time. | 8 | | [winless.org/online-less-compiler](http://winless.org/online-less-compiler) | This Online Less Compiler can help you to learn Less. You can go through the examples below or try your own Less code. | 9 | | [lesstester.com](http://lesstester.com/) | Online compiler for Less CSS. | 10 | | [leafo.net/lessphp/editor](http://leafo.net/lessphp/editor.html) | [lessphp](http://leafo.net/lessphp/) live demo. | 11 | | [estFiddle](http://ecomfe.github.io/est/fiddle/) | Online Less compiler providing live demo for Less and [est](http://ecomfe.github.io/est/). Allowing users to switch among all versions of Less after `1.4.0` with optional est/Autoprefixer functionalities. | 12 | | [BeautifyTools Less Compiler](http://beautifytools.com/less-compiler.php) | Online Less compiler with optional formatting and minification at [BeautifyTools](http://beautifytools.com) | 13 | | [Less WebCompiler](https://less.pytes.net) | The most configurable Less web compiler on the internet, it allows to render the CSS output with your own Coding Standards! | 14 | 15 | ## Online Web IDEs/Playgrounds with Less support 16 | 17 | | | | 18 | |---|---| 19 | | [CSSDeck Labs](http://cssdeck.com/labs) | CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code. | 20 | | [CodePen](http://codepen.io) | CodePen is a playground for the front end side of the web. | 21 | | [Fiddle Salad](http://fiddlesalad.com/less/) | An online playground with an instantly ready coding environment. | 22 | | [JS Bin](http://jsbin.com) | JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code. | 23 | | [jsFiddle](http://jsfiddle.net/hb2rsm2x) | Online Web Editor | 24 | -------------------------------------------------------------------------------- /templates/_helpers/rename.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handlebars Helpers 3 | * Copyright (c) 2014 Jon Schlinkert 4 | * Licensed under the MIT License (MIT). 5 | */ 6 | 'use strict'; 7 | 8 | var path = require('path'); 9 | 10 | 11 | module.exports.register = function (Handlebars, options, params) { 12 | 13 | 14 | 15 | /** 16 | * JavaScript's replace function exposed in a helper. 17 | * 18 | * @param {String} str The string to evaluate 19 | * @param {RegExp} pattern The regex or string pattern to replace 20 | * @param {String} replacement The replacement value 21 | * @param {String} flags Optional regex flags to use. 22 | * @return {String} 23 | */ 24 | Handlebars.registerHelper('replace', function (str, pattern, replacement, flags) { 25 | flags = flags || 'gi'; 26 | return str.replace(new RegExp(pattern, flags), replacement); 27 | }); 28 | 29 | 30 | /** 31 | * This helper is used in the `source-link` popovers to 32 | * rename, say `helper-foo` to `"{{foo}}"` or, if not a 33 | * helper, rename `bar` to `"bar"` 34 | * 35 | * @param {String} basename The string to rename. 36 | * @return {String} The {{renamed}} string 37 | */ 38 | 39 | Handlebars.registerHelper('rename', function (name) { 40 | if(/helper-/.test(name)) { 41 | return '{{' + name.split(/\W/)[1] + '}}'; 42 | } 43 | return new Handlebars.SafeString('"' + name + '"'); 44 | }); 45 | 46 | 47 | /** 48 | * Used in the source-link popovers to modify 49 | * the message based on the file extension. 50 | * 51 | * @param {String} filepath 52 | * @return {String} 53 | */ 54 | 55 | Handlebars.registerHelper('filetype', function (filepath) { 56 | switch (path.extname(filepath)) { 57 | case '.md': 58 | return 'markdown source'; 59 | case '.hbs': 60 | case '.tmpl': 61 | case '.html': 62 | return 'source template'; 63 | default: 64 | return 'source file'; 65 | } 66 | }); 67 | }; 68 | -------------------------------------------------------------------------------- /styles/bootstrap/print.less: -------------------------------------------------------------------------------- 1 | // 2 | // Basic print styles 3 | // -------------------------------------------------- 4 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 5 | 6 | @media print { 7 | 8 | * { 9 | text-shadow: none !important; 10 | color: #000 !important; // Black prints faster: h5bp.com/s 11 | background: transparent !important; 12 | box-shadow: none !important; 13 | } 14 | 15 | a, 16 | a:visited { 17 | text-decoration: underline; 18 | } 19 | 20 | a[href]:after { 21 | content: " (" attr(href) ")"; 22 | } 23 | 24 | abbr[title]:after { 25 | content: " (" attr(title) ")"; 26 | } 27 | 28 | // Don't show links for images, or javascript/internal links 29 | .ir a:after, 30 | a[href^="javascript:"]:after, 31 | a[href^="#"]:after { 32 | content: ""; 33 | } 34 | 35 | pre, 36 | blockquote { 37 | border: 1px solid #999; 38 | page-break-inside: avoid; 39 | } 40 | 41 | thead { 42 | display: table-header-group; // h5bp.com/t 43 | } 44 | 45 | tr, 46 | img { 47 | page-break-inside: avoid; 48 | } 49 | 50 | img { 51 | max-width: 100% !important; 52 | } 53 | 54 | @page { 55 | margin: 2cm .5cm; 56 | } 57 | 58 | p, 59 | h2, 60 | h3 { 61 | orphans: 3; 62 | widows: 3; 63 | } 64 | 65 | h2, 66 | h3 { 67 | page-break-after: avoid; 68 | } 69 | 70 | // Bootstrap components 71 | .navbar { 72 | display: none; 73 | } 74 | .table { 75 | td, 76 | th { 77 | background-color: #fff !important; 78 | } 79 | } 80 | .btn, 81 | .dropup > .btn { 82 | > .caret { 83 | border-top-color: #000 !important; 84 | } 85 | } 86 | .label { 87 | border: 1px solid #000; 88 | } 89 | 90 | .table { 91 | border-collapse: collapse !important; 92 | } 93 | .table-bordered { 94 | th, 95 | td { 96 | border: 1px solid #ddd !important; 97 | } 98 | } 99 | 100 | } 101 | -------------------------------------------------------------------------------- /styles/highlight-js/default.less: -------------------------------------------------------------------------------- 1 | /* 2 | Minimalistic code coloring scheme 3 | Assuming we only highlight the following languages: 4 | less, css, html, js and "generic shell" 5 | */ 6 | 7 | & { // unnamed namespace 8 | 9 | // Styles 10 | 11 | pre code { 12 | display: block; 13 | padding: 0.5em; 14 | color: @black; 15 | } 16 | 17 | .hljs-comment { 18 | color: @gray; 19 | font-style: italic; 20 | } 21 | 22 | .-(id, @orange); 23 | .-(class, @blue-dark); 24 | .-(variable, @violet); 25 | .-(tag, @blue-dark); 26 | .-(keyword, @blue-dark); 27 | .-(built_in, @blue-dark); 28 | .-(pseudo, @violet); 29 | .-(value, @cyan); 30 | .-(number, @cyan); 31 | .-(hexcolor, @cyan); 32 | .-(literal, @cyan); 33 | .-(attribute, @blue); // <- incl. css property 34 | // .-(function, @green); 35 | .-(attr_selector, @orange); 36 | .-(attr, @orange); 37 | .-(name, @blue); 38 | .-(at_rule, @red); 39 | .-(string, @lime); 40 | 41 | .lang-less { 42 | // Less specific coloring: 43 | .-(keyword, @blue-dark); // <- all :extend & 44 | .-(built_in, @brown); // <- inline js 45 | } 46 | 47 | .-(@name, @color) { 48 | .hljs-@{name} { 49 | color: @color 50 | } 51 | } 52 | 53 | // Colors 54 | 55 | @primary-dark-blue: saturate(@navbar-inverse-bg, 70%); 56 | @h: hue(@primary-dark-blue); 57 | @s: saturation(@primary-dark-blue); 58 | @l: lightness(@primary-dark-blue) - 2; 59 | 60 | @blue-dark: hsl(@h - 0, @s + 25, @l + 5); 61 | @blue: hsl(@h - 15, @s + 15, @l + 15); 62 | @cyan: hsl(@h - 37, @s + 10, @l + 10); 63 | @green: hsl(@h - 60, @s + 5, @l + 5); 64 | @lime: hsl(@h - 130, @s + 25, @l + 5); 65 | @brown: hsl(@h - 175, @s + 50, @l + 10); 66 | @orange: hsl(@h - 195, @s + 40, @l + 20); 67 | @red: hsl(@h - 215, @s + 5, @l + 25); 68 | @violet: hsl(@h + 60, @s + 0, @l + 10); 69 | 70 | @black: #393939; 71 | @gray-dark: #666666; 72 | @gray: #939393; 73 | 74 | } // ~ unnamed namespace 75 | -------------------------------------------------------------------------------- /content/usage/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pre-Loaded Plugins 3 | --- 4 | 5 | > Loading plugins before parsing begins in Less.js 6 | 7 | While the easiest way to use a plugin is using the [`@plugin` at-rule](../features/#plugin-atrules-feature), in a Node.js environment, you can pre-load a global Less.js plugin via the command line or by specifying it in the [Less options](#less-options). 8 | 9 | ### Preprocessing 10 | 11 | Pre-loading plugins is necessary if you want to add a Less.js Pre-processor. That is, a plugin that gets called and passed the raw Less source before parsing even starts. An example of this would be a [Sass-To-Less Pre-processor plugin](../tools/#plugins). 12 | 13 | Note: pre-loading is not necessary for _pre-evaluation_ plugins (after Less source is parsed, but before it is evaluated). 14 | 15 | ## Node.js 16 | 17 | ### Using the Command Line 18 | 19 | If you are using lessc, the first thing you need to do is install that plugin. In registries like NPM, we recommend a Less.js plugin is registered with the "less-plugin-" prefix (for easier searching), though that isn't required. So, for a custom plugin, you might install with: 20 | ``` 21 | npm install less-plugin-myplugin 22 | ``` 23 | To use the plugin, you can pass this on the command line by simply writing: 24 | ``` 25 | lessc --myplugin 26 | ``` 27 | Less.js will try to load either the "less-plugin-myplugin" and the "myplugin" modules as plugins whenever there's an unknown Less option (like "myplugin"). 28 | 29 | You can also explicitly specify the plugin with: 30 | ``` 31 | lessc --plugin=myplugin 32 | ``` 33 | 34 | To pass options to the plugin, you can write that in one of two ways. 35 | ``` 36 | lessc --myplugin="advanced" 37 | lessc --plugin=myplugin=advanced 38 | ``` 39 | 40 | Loading a Plugin via Less.js 41 | ---------------------- 42 | 43 | In Node, require the plugin and pass it to `less` in an array as an option plugins. E.g. 44 | 45 | ```js 46 | var LessPlugin = require('less-plugin-myplugin'); 47 | less.render(myCSS, { plugins: [LessPlugin] }) 48 | .then( 49 | function(output) { }, 50 | function(error) { } 51 | ); 52 | ``` 53 | 54 | -------------------------------------------------------------------------------- /content/usage/using-less.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Server-side Usage 3 | --- 4 | 5 | > Less can be used on the command line via npm, downloaded as a script file for the browser or used in a wide variety of third party tools. 6 | 7 | ## Installation 8 | 9 | The easiest way to install Less on the server, is via npm, the [node.js](http://nodejs.org/) package manager, as so: 10 | 11 | ```bash 12 | $ npm install -g less 13 | ``` 14 | 15 | ## Command-line Usage 16 | 17 | Once installed, you can invoke the compiler from the command-line, as such: 18 | 19 | ```bash 20 | $ lessc styles.less 21 | ``` 22 | 23 | This will output the compiled CSS to `stdout`. To save the CSS result to a file of your choice use: 24 | 25 | ```bash 26 | $ lessc styles.less styles.css 27 | ``` 28 | 29 | To output minified CSS you can use the [`clean-css` plugin](https://github.com/less/less-plugin-clean-css). When the plugin is installed, a minified CSS output is specified with `--clean-css` option: 30 | 31 | ```bash 32 | $ lessc --clean-css styles.less styles.min.css 33 | ``` 34 | 35 | To see all the command line options run `lessc` without parameters or see [Usage](TODO). 36 | 37 | ## Usage in Code 38 | 39 | You can invoke the compiler from node, as such: 40 | 41 | ```js 42 | var less = require('less'); 43 | 44 | less.render('.class { width: (1 + 1) }', function (e, output) { 45 | console.log(output.css); 46 | }); 47 | ``` 48 | 49 | which will output 50 | 51 | ```css 52 | .class { 53 | width: 2; 54 | } 55 | ``` 56 | 57 | ## Configuration 58 | 59 | You may pass some options to the compiler: 60 | 61 | ```js 62 | var less = require('less'); 63 | 64 | less.render('.class { width: (1 + 1) }', 65 | { 66 | paths: ['.', './lib'], // Specify search paths for @import directives 67 | filename: 'style.less', // Specify a filename, for better error messages 68 | compress: true // Minify CSS output 69 | }, 70 | function (e, output) { 71 | console.log(output.css); 72 | }); 73 | ``` 74 | 75 | See [Usage](#less-options) for more information. 76 | 77 | ## Third Party Tools 78 | 79 | See the [Tools](../tools/) section for details of other tools. 80 | 81 | -------------------------------------------------------------------------------- /content/usage/v2-upgrade.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: V2 Upgrade Guide 3 | --- 4 | 5 | Language Changes 6 | ---------------- 7 | 8 | Colours now output as they are written, so `purple` stays as `purple` and is not converted to its hex representation. 9 | 10 | Command Line Usage 11 | ------------------ 12 | 13 | ### Clean CSS 14 | 15 | We have removed the dependency on `clean-css` and moved it to a [plugin](https://github.com/less/less-plugin-clean-css). 16 | This allows us to: 17 | 18 | 1. update the dependency and integration without a Less release 19 | 2. not tie people who do not use `clean-css` into having it downloaded by npm. 20 | 21 | The usage is similar, just install the plugin (`npm install -g less-plugin-clean-css`) then tell less to use it by using the 22 | `--clean-css` argument. 23 | 24 | ```bash 25 | # old 26 | lessc --clean-css --clean-option=--compatibility:ie8 --clean-option=--advanced 27 | # new 28 | lessc --clean-css="--compatibility=ie8 --advanced" 29 | ``` 30 | 31 | ### Sourcemaps 32 | 33 | We have improved the source map options and path generation so the sourcemap should be generated at the correct path without specifying any options. 34 | 35 | Programmatic Usage 36 | ------------------ 37 | 38 | We have deprecated the use of less.Parser and toCss to generate the css. Instead we require you to use the `less.render` shorthand. 39 | See [Programmatic Usage](#programmatic-usage) for more information. 40 | 41 | Further, instead of returning a string which is the css, we return an object with a `css` field set to the string and a `map` field set to the sourcemap (if applicable). 42 | 43 | The sourcemap options are now to be set on sourceMap instead of directly on options. So instead of `options.sourceMapFullFilename = ` you would set `options.sourceMap = { sourceMapFullFilename: `. 44 | 45 | Browser Usage 46 | ------------- 47 | 48 | The browser usage has not changed significantly. Options set on the `less` object are exposed as `less.options` after the less script has run, rather than polluting `less`. 49 | 50 | It is now possible to specify options on the script and Less tags, which should simplify option setting in the browser. See the browser usage section for more information. 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less-docs", 3 | "description": "Official website and documentation for Less / Less.js", 4 | "version": "0.2.1", 5 | "homepage": "https://github.com/less/less-docs", 6 | "author": "Less Core Team (http://lesscss.org/about/#team)", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/less/less-docs.git" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/less/less-docs/issues" 13 | }, 14 | "license": "(MIT OR CC-BY-3.0)", 15 | "main": "Gruntfile.js", 16 | "scripts": { 17 | "build": "grunt", 18 | "dev": "grunt design" 19 | }, 20 | "devDependencies": { 21 | "assemble": "^0.4.42", 22 | "assemble-contrib-permalinks": "^0.3.6", 23 | "assemble-less": "^0.7.0", 24 | "chalk": "^0.5.1", 25 | "cheerio": "^0.17.0", 26 | "coffeescript": "^2.6.1", 27 | "cwd": "^0.3.7", 28 | "fs-utils": "^0.4.3", 29 | "git-branch": "^0.1.2", 30 | "git-repo-name": "^0.2.0", 31 | "git-username": "^0.2.0", 32 | "github": "^0.2.4", 33 | "github-repo-url": "^0.2.1", 34 | "gray-matter": "^0.5.0", 35 | "grunt": "^1.5.3", 36 | "grunt-contrib-clean": "^0.6.0", 37 | "grunt-contrib-connect": "^3.0.0", 38 | "grunt-contrib-copy": "^0.5.0", 39 | "grunt-contrib-jshint": "^1.0.0", 40 | "grunt-contrib-watch": "^0.6.1", 41 | "grunt-http-download": "^0.1.0", 42 | "grunt-prettify": "^0.3.5", 43 | "grunt-repos": "^0.1.2", 44 | "grunt-sync-pkg": "^0.1.2", 45 | "handlebars": "^4.0.11", 46 | "handlebars-helper-datetime": "^0.1.0", 47 | "handlebars-helper-feed": "^0.1.1", 48 | "handlebars-helper-slugify": "^0.2.0", 49 | "highlight.js": "^10.7.3", 50 | "lodash": "^4.17.21", 51 | "marked": "^0.3.19", 52 | "marked-extras": "^0.2.4", 53 | "relative": "^0.1.6", 54 | "remote-origin-url": "^0.2.1", 55 | "request": "^2.88.2", 56 | "strip-indent": "^1.0.0", 57 | "template": "^0.2.1", 58 | "verbalize": "^0.1.2" 59 | }, 60 | "keywords": [ 61 | "handlebars-helper-datetime", 62 | "handlebars-helper-feed", 63 | "handlebars-helper-slugify", 64 | "less css", 65 | "less", 66 | "less.js", 67 | "lesscss" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /styles/bootstrap/pagination.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: @line-height-computed 0; 8 | border-radius: @border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: @padding-base-vertical @padding-base-horizontal; 17 | line-height: @line-height-base; 18 | text-decoration: none; 19 | background-color: @pagination-bg; 20 | border: 1px solid @pagination-border; 21 | margin-left: -1px; 22 | } 23 | &:first-child { 24 | > a, 25 | > span { 26 | margin-left: 0; 27 | .border-left-radius(@border-radius-base); 28 | } 29 | } 30 | &:last-child { 31 | > a, 32 | > span { 33 | .border-right-radius(@border-radius-base); 34 | } 35 | } 36 | } 37 | 38 | > li > a, 39 | > li > span { 40 | &:hover, 41 | &:focus { 42 | background-color: @pagination-hover-bg; 43 | } 44 | } 45 | 46 | > .active > a, 47 | > .active > span { 48 | &, 49 | &:hover, 50 | &:focus { 51 | z-index: 2; 52 | color: @pagination-active-color; 53 | background-color: @pagination-active-bg; 54 | border-color: @pagination-active-bg; 55 | cursor: default; 56 | } 57 | } 58 | 59 | > .disabled { 60 | > span, 61 | > span:hover, 62 | > span:focus, 63 | > a, 64 | > a:hover, 65 | > a:focus { 66 | color: @pagination-disabled-color; 67 | background-color: @pagination-bg; 68 | border-color: @pagination-border; 69 | cursor: not-allowed; 70 | } 71 | } 72 | } 73 | 74 | // Sizing 75 | // -------------------------------------------------- 76 | 77 | // Large 78 | .pagination-lg { 79 | .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); 80 | } 81 | 82 | // Small 83 | .pagination-sm { 84 | .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); 85 | } 86 | -------------------------------------------------------------------------------- /styles/bootstrap/list-group.less: -------------------------------------------------------------------------------- 1 | // 2 | // List groups 3 | // -------------------------------------------------- 4 | 5 | // Base class 6 | // 7 | // Easily usable on
    ,
      , or
      . 8 | .list-group { 9 | // No need to set list-style: none; since .list-group-item is block level 10 | margin-bottom: 20px; 11 | padding-left: 0; // reset padding because ul and ol 12 | } 13 | 14 | // Individual list items 15 | // ------------------------- 16 | 17 | .list-group-item { 18 | position: relative; 19 | display: block; 20 | padding: 10px 15px; 21 | // Place the border on the list items and negative margin up for better styling 22 | margin-bottom: -1px; 23 | background-color: @list-group-bg; 24 | border: 1px solid @list-group-border; 25 | 26 | // Round the first and last items 27 | &:first-child { 28 | .border-top-radius(@list-group-border-radius); 29 | } 30 | &:last-child { 31 | margin-bottom: 0; 32 | .border-bottom-radius(@list-group-border-radius); 33 | } 34 | 35 | // Align badges within list items 36 | > .badge { 37 | float: right; 38 | } 39 | > .badge + .badge { 40 | margin-right: 5px; 41 | } 42 | } 43 | 44 | // Linked list items 45 | a.list-group-item { 46 | color: @list-group-link-color; 47 | 48 | .list-group-item-heading { 49 | color: @list-group-link-heading-color; 50 | } 51 | 52 | // Hover state 53 | &:hover, 54 | &:focus { 55 | text-decoration: none; 56 | background-color: @list-group-hover-bg; 57 | } 58 | 59 | // Active class on item itself, not parent 60 | &.active, 61 | &.active:hover, 62 | &.active:focus { 63 | z-index: 2; // Place active items above their siblings for proper border styling 64 | color: @list-group-active-color; 65 | background-color: @list-group-active-bg; 66 | border-color: @list-group-active-border; 67 | 68 | // Force color to inherit for custom content 69 | .list-group-item-heading { 70 | color: inherit; 71 | } 72 | .list-group-item-text { 73 | color: lighten(@list-group-active-bg, 40%); 74 | } 75 | } 76 | } 77 | 78 | // Custom content options 79 | // ------------------------- 80 | 81 | .list-group-item-heading { 82 | margin-top: 0; 83 | margin-bottom: 5px; 84 | } 85 | .list-group-item-text { 86 | margin-bottom: 0; 87 | line-height: 1.3; 88 | } 89 | -------------------------------------------------------------------------------- /data/team.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # Team: Alphabetical Order 3 | # ============================================= 4 | 5 | members: 6 | - name: Alexis Sellier 7 | username: cloudhead 8 | contribution: "Original Author, Language Design" 9 | follow: "https://ghbtns.com/github-btn.html?user=cloudhead&type=follow" 10 | gravatar: "https://www.gravatar.com/avatar/a8a0061962c41735ca87789720da46c8" 11 | 12 | - name: Luke Page 13 | username: lukeapage 14 | contribution: "Releasing, Development, Language Design, Documentation" 15 | follow: "https://ghbtns.com/github-btn.html?user=lukeapage&type=follow" 16 | gravatar: "https://www.gravatar.com/avatar/a80ab1a8297225d70baffc52adf6aefd" 17 | 18 | - name: Marcus Bointon 19 | username: Synchro 20 | contribution: "Color Functions" 21 | follow: "https://ghbtns.com/github-btn.html?user=synchro&type=follow" 22 | gravatar: "https://www.gravatar.com/avatar/b4814d6790e91f01c77cac9d25db12b6" 23 | 24 | - name: Mária Jurčovičová 25 | username: sommeri 26 | contribution: "Language Design, Java Port" 27 | follow: "https://ghbtns.com/github-btn.html?user=sommeri&type=follow" 28 | gravatar: "https://www.gravatar.com/avatar/52cf28b41537a1255243f6ba9b5baedc" 29 | 30 | - name: Matthew Dean 31 | username: matthew-dean 32 | contribution: "Project Management, Releasing, Development, Language Design, Community" 33 | follow: "https://ghbtns.com/github-btn.html?user=matthew-dean&type=follow" 34 | gravatar: "https://www.gravatar.com/avatar/09caa4a26a5e57031146b5e06b4d7a8c" 35 | 36 | - name: Max Mikhailov 37 | username: seven-phases-max 38 | contribution: "Development, Documentation, Language Design" 39 | follow: "https://ghbtns.com/github-btn.html?user=seven-phases-max&type=follow" 40 | gravatar: "https://www.gravatar.com/avatar/f7c830e90f5d6a740ab908365dcd3849" 41 | 42 | - name: Lei Chen 43 | username: iChenLei 44 | contribution: "Development, Documentation, Language Design, Community" 45 | follow: "https://ghbtns.com/github-btn.html?user=iChenLei&type=follow" 46 | gravatar: "https://avatars.githubusercontent.com/u/14012511?v=4&s=50" 47 | -------------------------------------------------------------------------------- /content/usage/programmatic-usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Programmatic usage 3 | --- 4 | 5 | The main entry point into `less` is the `less.render` function. This takes the following format 6 | 7 | ```js 8 | less.render(lessInput, options) 9 | .then(function(output) { 10 | // output.css = string of css 11 | // output.map = string of sourcemap 12 | // output.imports = array of string filenames of the imports referenced 13 | }, 14 | function(error) { 15 | }); 16 | 17 | // or... 18 | 19 | less.render(css, options, function(error, output) {}) 20 | ``` 21 | 22 | The options argument is optional. If you specify a callback then a promise will not be returned, where as if you do not specify a callback a promise will be given. 23 | Under the hood, the callback version is used so that less can be used synchronously. 24 | 25 | If you wanted to render a file, you would first read it into a string (to pass to less.render) and then set the filename field on options to be the filename of the main file. less will handle all the processing of the imports. 26 | 27 | The `sourceMap` option is an object which enables you to set sub sourcemap options. Available sub options are: `sourceMapURL`,`sourceMapBasepath`,`sourceMapRootpath`,`outputSourceFiles` and `sourceMapFileInline`. Notice that the `sourceMap` option is not available for the less.js in browser compiler now. 28 | 29 | ```js 30 | less.render(lessInput) 31 | .then(function(output) { 32 | // output.css = string of css 33 | // output.map = undefined 34 | } 35 | //, 36 | less.render(lessInput, {sourceMap: {}}) 37 | .then(function(output) { 38 | // output.css = string of css 39 | // output.map = string of sourcemap 40 | } 41 | //or, 42 | less.render(lessInput, {sourceMap: {sourceMapFileInline: true}}) 43 | .then(function(output) { 44 | // output.css = string of css \n /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJ..= */ 45 | // output.map = undefined 46 | } 47 | ``` 48 | 49 | ### Getting Access to the Log 50 | 51 | You can add a log listener with the following code 52 | 53 | ```js 54 | less.logger.addListener({ 55 | debug: function(msg) { 56 | }, 57 | info: function(msg) { 58 | }, 59 | warn: function(msg) { 60 | }, 61 | error: function(msg) { 62 | } 63 | }); 64 | ``` 65 | 66 | Note: all functions are optional. An error will not be logged, but instead is passed back to the callback or promise in less.render 67 | -------------------------------------------------------------------------------- /styles/bootstrap/scaffolding.less: -------------------------------------------------------------------------------- 1 | // 2 | // Scaffolding 3 | // -------------------------------------------------- 4 | 5 | 6 | // Reset the box-sizing 7 | 8 | *, 9 | *:before, 10 | *:after { 11 | .box-sizing(border-box); 12 | } 13 | 14 | 15 | // Body reset 16 | 17 | html { 18 | font-size: 62.5%; 19 | -webkit-tap-highlight-color: rgba(0,0,0,0); 20 | } 21 | 22 | body { 23 | font-family: @font-family-base; 24 | font-size: @font-size-base; 25 | line-height: @line-height-base; 26 | color: @text-color; 27 | background-color: @body-bg; 28 | } 29 | 30 | // Reset fonts for relevant elements 31 | input, 32 | button, 33 | select, 34 | textarea { 35 | font-family: inherit; 36 | font-size: inherit; 37 | line-height: inherit; 38 | } 39 | 40 | 41 | // Links 42 | 43 | a { 44 | color: @link-color; 45 | text-decoration: none; 46 | 47 | &:hover, 48 | &:focus { 49 | color: @link-hover-color; 50 | text-decoration: underline; 51 | } 52 | 53 | &:focus { 54 | .tab-focus(); 55 | } 56 | } 57 | 58 | 59 | // Images 60 | 61 | img { 62 | vertical-align: middle; 63 | } 64 | 65 | // Responsive images (ensure images don't scale beyond their parents) 66 | .img-responsive { 67 | .img-responsive(); 68 | } 69 | 70 | // Rounded corners 71 | .img-rounded { 72 | border-radius: @border-radius-large; 73 | } 74 | 75 | // Image thumbnails 76 | // 77 | // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. 78 | .img-thumbnail { 79 | padding: @thumbnail-padding; 80 | line-height: @line-height-base; 81 | background-color: @thumbnail-bg; 82 | border: 1px solid @thumbnail-border; 83 | border-radius: @thumbnail-border-radius; 84 | .transition(all .2s ease-in-out); 85 | 86 | // Keep them at most 100% wide 87 | .img-responsive(inline-block); 88 | } 89 | 90 | // Perfect circle 91 | .img-circle { 92 | border-radius: 50%; // set radius in percents 93 | } 94 | 95 | 96 | // Horizontal rules 97 | 98 | hr { 99 | margin-top: @line-height-computed; 100 | margin-bottom: @line-height-computed; 101 | border: 0; 102 | border-top: 1px solid @hr-border; 103 | } 104 | 105 | 106 | // Only display content to screen readers 107 | // 108 | // See: http://a11yproject.com/posts/how-to-hide-content/ 109 | 110 | .sr-only { 111 | position: absolute; 112 | width: 1px; 113 | height: 1px; 114 | margin: -1px; 115 | padding: 0; 116 | overflow: hidden; 117 | clip: rect(0,0,0,0); 118 | border: 0; 119 | } 120 | -------------------------------------------------------------------------------- /styles/bootstrap/progress-bars.less: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | // Webkit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Firefox 16 | @-moz-keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | // Opera 22 | @-o-keyframes progress-bar-stripes { 23 | from { background-position: 0 0; } 24 | to { background-position: 40px 0; } 25 | } 26 | 27 | // Spec and IE10+ 28 | @keyframes progress-bar-stripes { 29 | from { background-position: 40px 0; } 30 | to { background-position: 0 0; } 31 | } 32 | 33 | 34 | 35 | // Bar itself 36 | // ------------------------- 37 | 38 | // Outer container 39 | .progress { 40 | overflow: hidden; 41 | height: @line-height-computed; 42 | margin-bottom: @line-height-computed; 43 | background-color: @progress-bg; 44 | border-radius: @border-radius-base; 45 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 46 | } 47 | 48 | // Bar of progress 49 | .progress-bar { 50 | float: left; 51 | width: 0%; 52 | height: 100%; 53 | font-size: @font-size-small; 54 | line-height: @line-height-computed; 55 | color: @progress-bar-color; 56 | text-align: center; 57 | background-color: @progress-bar-bg; 58 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 59 | .transition(width .6s ease); 60 | } 61 | 62 | // Striped bars 63 | .progress-striped .progress-bar { 64 | #gradient > .striped(); 65 | background-size: 40px 40px; 66 | } 67 | 68 | // Call animation for the active one 69 | .progress.active .progress-bar { 70 | -webkit-animation: progress-bar-stripes 2s linear infinite; 71 | -moz-animation: progress-bar-stripes 2s linear infinite; 72 | -ms-animation: progress-bar-stripes 2s linear infinite; 73 | -o-animation: progress-bar-stripes 2s linear infinite; 74 | animation: progress-bar-stripes 2s linear infinite; 75 | } 76 | 77 | 78 | 79 | // Variations 80 | // ------------------------- 81 | 82 | .progress-bar-success { 83 | .progress-bar-variant(@progress-bar-success-bg); 84 | } 85 | 86 | .progress-bar-info { 87 | .progress-bar-variant(@progress-bar-info-bg); 88 | } 89 | 90 | .progress-bar-warning { 91 | .progress-bar-variant(@progress-bar-warning-bg); 92 | } 93 | 94 | .progress-bar-danger { 95 | .progress-bar-variant(@progress-bar-danger-bg); 96 | } 97 | -------------------------------------------------------------------------------- /styles/components/anchors.less: -------------------------------------------------------------------------------- 1 | // 2 | // Anchors 3 | // -------------------------------------------------- 4 | // Anchors show upon hovering over a heading 5 | 6 | 7 | // PLEASE DON'T CHANGE ANCHOR SIZES without 8 | // Completely understanding what they're doing. 9 | // 10 | // The anchors are used (beyond being anchors) 11 | // to ensure that headings do no overlap with 12 | // the top navbar. 13 | // 14 | // If you feel a need to change heading spacing, 15 | // this is mostl likely not the best place 16 | // to do it. 17 | 18 | 19 | 20 | // allow the container to constrain the width 21 | @anchor-width: @content-gutter; // see less-docs #203 22 | @anchor-distance: 80px; 23 | @anchor-distance-small: 40px; 24 | 25 | 26 | 27 | // Base class 28 | // ---------------------------------------------- 29 | // Our "anchors" are really just icons that sit 30 | // in the left margin, and are only visible when 31 | // hovering over headings or the icons themselves. 32 | 33 | .anchor { 34 | &, &:empty{ 35 | position: absolute; 36 | top: auto; 37 | bottom: 0; 38 | left: 0; 39 | 40 | color: transparent; 41 | font-size: 18px; 42 | padding: 10px 10px 10px 25px; 43 | width: @anchor-width; 44 | } 45 | } 46 | 47 | // Adjust the vertical positioning 48 | // of anchors next to larger headings. 49 | 50 | .anchor { 51 | .adjust(h2); 52 | .adjust(h3); 53 | .adjust(h4); 54 | 55 | .adjust(@tag) { 56 | @{tag} & { 57 | @tag-font-size: ~'font-size-@{tag}'; 58 | margin-bottom: ceil(((@@tag-font-size - @font-size-h1) * @headings-line-height / 2)); 59 | } 60 | } 61 | } 62 | 63 | // Headings 64 | // ---------------------------------------------- 65 | 66 | h1, h2, h3 { 67 | position: relative; 68 | padding-left: @content-gutter; 69 | margin-left: -(@content-gutter); 70 | 71 | .anchor:hover { 72 | color: @gray-darkest; 73 | visibility: visible; 74 | text-decoration: none; 75 | } 76 | } 77 | 78 | 79 | // Offset 80 | // ---------------------------------------------- 81 | // anchor targets are invisible and set the specified 82 | // distance above headings and anchors. This is what 83 | // ensures that our headings won't overlap the navbar. 84 | // If you require clickable anchors, you can 85 | // achieve this with fewer classes and less HTML 86 | 87 | .anchor-target { 88 | position: absolute; 89 | margin-top: -(@anchor-distance); 90 | padding-top: @anchor-distance; 91 | width: 2px; 92 | } 93 | 94 | .anchor-target-small { 95 | margin-top: -(@anchor-distance-small); 96 | padding-top: @anchor-distance-small; 97 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing to the Documentation 2 | 3 | **Formatting Standards** 4 | 5 | For consistency across all examples in the docs and to ensure that our code examples are readable, please follow these guidelines when contributing: 6 | 7 | * Four spaces for indentation, and always use proper indentation 8 | * Multiple-line formatting (one property and value per line) 9 | * Double quotes only, never single quotes 10 | * Always put a space after a property's colon (.e.g, `display: block;` and not `display:block;`) 11 | * End all lines with a semi-colon 12 | * For multiple, comma-separated selectors, place each selector on its own line 13 | * 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) 14 | * When using HTML in your examples, use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags with _no trailing slash_) 15 | * All page files should have globally unique names regardless of where they are located in the repository 16 | 17 | ### Capitalization 18 | 19 | #### In Titles: Do Capitalize 20 | 21 | * Nouns (man, bus, book) 22 | * Adjectives (angry, lovely, small) 23 | * Verbs (run, eat, sleep) 24 | * Adverbs (slowly, quickly, quietly) 25 | * Pronouns (he, she, it) 26 | * Subordinating conjunctions (as, because, that) 27 | 28 | #### In Titles: Do Not Capitalize 29 | 30 | * Articles: a, an, the 31 | * Coordinating Conjunctions: and, but, or, for, nor, etc. 32 | * Prepositions: on, at, to, from, by, etc. 33 | 34 | ## Tools 35 | 36 | ### Assemble 37 | 38 | * Visit [Assemble's documentation](http://assemble.io/docs/) site to learn more about customization and configuration. 39 | * Markdown: [Markdown Cheatsheet](http://assemble.io/docs/Cheatsheet-Markdown.html) 40 | 41 | ## Coding Style 42 | 43 | Examples: 44 | 45 | **Good** 46 | 47 | ```css 48 | body { 49 | padding-top: 80px; 50 | font-size: 12px; 51 | } 52 | ``` 53 | 54 | **Bad** 55 | 56 | ```css 57 | body { 58 | padding-top: 80px; 59 | font-size: 12px; 60 | } 61 | ``` 62 | 63 | **Bad** 64 | 65 | ```css 66 | body { padding-top: 80px; font-size: 12px } 67 | ``` 68 | 69 | ### Feature Requests, Bugs and Pull Requests 70 | 71 | * If you would like to request a feature, suggest an improvement, or report a bug, please [submit an Issue]({{ site.codeissues }}). 72 | * Feature requests are more likely to get attention if you include a clearly-described use case. 73 | -------------------------------------------------------------------------------- /styles/components/docs-section.less: -------------------------------------------------------------------------------- 1 | // 2 | // Docs sections 3 | // -------------------------------------------------- 4 | 5 | 6 | .docs-container { 7 | margin-top: -50px; 8 | } 9 | // Space things out 10 | .docs-section { 11 | margin-bottom: 40px; 12 | } 13 | .docs-section:last-child { 14 | margin-bottom: 0; 15 | } 16 | 17 | 18 | /** 19 | * Add a width to docs-headings inside section-content, 20 | * so we easily get the .anchor when hovering over headings. 21 | * 22 | * **Example**: 23 | * 24 | * ```html 25 | *
      26 | *
      27 | *

      28 | *
      29 | *
      30 | * ``` 31 | */ 32 | 33 | .section-content .docs-heading { 34 | max-width: 80%; 35 | margin-top: 20px; 36 | } 37 | 38 | 39 | 40 | /** 41 | * Remove the width on major headings, so we don't cause them to wrap. 42 | * This class is probably unnecessary, but we'll do it for insurance. 43 | * 44 | * **Example**: 45 | * 46 | * ```html 47 | *
      48 | *
      49 | *

      50 | *
      51 | *
      52 | * ``` 53 | */ 54 | 55 | .page-heading .docs-heading { 56 | max-width: auto; 57 | } 58 | 59 | 60 | 61 | h1[id] { 62 | margin-top: 0; 63 | } 64 | 65 | // Make headings stand out more, give some space 66 | .docs-section { 67 | h1:first-child { 68 | margin-top: 40px; 69 | } 70 | 71 | font-family: @font-family-sans-serif; 72 | p { 73 | font-size: @font-size-large - 3; 74 | line-height: 1.5; 75 | margin: 10px 0 20px; 76 | } 77 | 78 | // Override normal paragraph styles inside blockquotes 79 | // this needs to be extra specific 80 | blockquote { 81 | position: relative; 82 | font-style: normal; 83 | font-weight: 500; 84 | color: inherit; 85 | margin: 0; 86 | border-left-style: none; 87 | padding: 0; 88 | > p { 89 | line-height: 1.5; 90 | color: inherit; 91 | padding: 0px; 92 | &:first-child { 93 | font-size: 18px; 94 | } 95 | } 96 | } 97 | 98 | td { 99 | @g: 10px; 100 | padding: 0 @g (@g / 2) 0; 101 | vertical-align: top; 102 | min-width: 150px; 103 | } 104 | 105 | img { 106 | max-width: 100%; 107 | } 108 | } 109 | 110 | 111 | // individual section of content, usually represented 112 | // by h2, h3 etc. 113 | .section-content { 114 | position: relative; // we need to set position relative for popovers 115 | } 116 | 117 | -------------------------------------------------------------------------------- /styles/bootstrap/grid.less: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | // Set the container width, and override it for fixed navbars in media queries 6 | .container { 7 | .container-fixed(); 8 | } 9 | 10 | // mobile first defaults 11 | .row { 12 | .make-row(); 13 | } 14 | 15 | // Common styles for small and large grid columns 16 | .make-grid-columns(); 17 | 18 | 19 | // Extra small grid 20 | // 21 | // Grid classes for extra small devices like smartphones. No offset, push, or 22 | // pull classes are present here due to the size of the target. 23 | // 24 | // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since 25 | // it's full-width. 26 | 27 | .make-grid-columns-float(xs); 28 | .make-grid(@grid-columns, xs, width); 29 | .make-grid(@grid-columns, xs, pull); 30 | .make-grid(@grid-columns, xs, push); 31 | .make-grid(@grid-columns, xs, offset); 32 | 33 | 34 | // Small grid 35 | // 36 | // Columns, offsets, pushes, and pulls for the small device range, from phones 37 | // to tablets. 38 | // 39 | // Note that `.col-sm-12` doesn't get floated on purpose--there's no need since 40 | // it's full-width. 41 | 42 | @media (min-width: @screen-sm-min) { 43 | .container { 44 | width: @container-sm; 45 | } 46 | 47 | .make-grid-columns-float(sm); 48 | .make-grid(@grid-columns, sm, width); 49 | .make-grid(@grid-columns, sm, pull); 50 | .make-grid(@grid-columns, sm, push); 51 | .make-grid(@grid-columns, sm, offset); 52 | } 53 | 54 | 55 | // Medium grid 56 | // 57 | // Columns, offsets, pushes, and pulls for the desktop device range. 58 | // 59 | // Note that `.col-md-12` doesn't get floated on purpose--there's no need since 60 | // it's full-width. 61 | 62 | @media (min-width: @screen-md-min) { 63 | .container { 64 | width: @container-md; 65 | } 66 | 67 | .make-grid-columns-float(md); 68 | .make-grid(@grid-columns, md, width); 69 | .make-grid(@grid-columns, md, pull); 70 | .make-grid(@grid-columns, md, push); 71 | .make-grid(@grid-columns, md, offset); 72 | } 73 | 74 | 75 | // Large grid 76 | // 77 | // Columns, offsets, pushes, and pulls for the large desktop device range. 78 | // 79 | // Note that `.col-lg-12` doesn't get floated on purpose--there's no need since 80 | // it's full-width. 81 | 82 | @media (min-width: @screen-lg-min) { 83 | .container { 84 | width: @container-lg; 85 | } 86 | 87 | .make-grid-columns-float(lg); 88 | .make-grid(@grid-columns, lg, width); 89 | .make-grid(@grid-columns, lg, pull); 90 | .make-grid(@grid-columns, lg, push); 91 | .make-grid(@grid-columns, lg, offset); 92 | } 93 | 94 | -------------------------------------------------------------------------------- /data/features.yml: -------------------------------------------------------------------------------- 1 | # ============================================= 2 | # PUBLISHED 3 | # ============================================= 4 | # This file is only needed to ensure that the 5 | # sections build in a specific order. 6 | 7 | 8 | # The base path for features docs. Makes this easier 9 | # to update without having to change each path. 10 | base: content/features 11 | 12 | # Published documenation 13 | published: 14 | features-overview: 15 | title: Overview 16 | lead: Simple overview of the basic features 17 | files: <%= features.base %>/overview.md 18 | 19 | variables: 20 | title: Variables 21 | files: <%= features.base %>/variables.md 22 | 23 | parent-selectors: 24 | title: Parent Selectors 25 | files: <%= features.base %>/parent-selectors.md 26 | 27 | import-atrules: 28 | title: "@import At-Rules" 29 | files: <%= features.base %>/imports.md 30 | 31 | extend: 32 | title: Extend 33 | files: <%= features.base %>/extend.md 34 | 35 | merge: 36 | title: Merge properties 37 | files: <%= features.base %>/merge.md 38 | 39 | mixins: 40 | title: Mixins 41 | files: <%= features.base %>/mixins.md 42 | subs: 43 | mixins-parametric: 44 | title: Parametric Mixins 45 | files: <%= features.base %>/mixins-parametric.md 46 | 47 | mixins-as-functions: 48 | title: Using Mixins as Functions 49 | files: <%= features.base %>/mixins-as-functions.md 50 | 51 | loops: 52 | title: Recursive Mixins 53 | files: <%= features.base %>/mixin-loops.md 54 | 55 | mixin-guards: 56 | title: Mixin Guards 57 | files: <%= features.base %>/mixin-guards.md 58 | 59 | mixin-aliasing: 60 | title: Aliasing Mixins 61 | files: <%= features.base %>/mixins-aliasing.md 62 | 63 | detached-rulesets: 64 | title: Detached Rulesets 65 | files: <%= features.base %>/detached-rulesets.md 66 | 67 | maps: 68 | title: "Maps" 69 | files: <%= features.base %>/maps.md 70 | 71 | scope: 72 | title: Scope 73 | files: <%= features.base %>/scope.md 74 | 75 | css-guards: 76 | title: CSS Guards 77 | files: <%= features.base %>/css-guards.md 78 | 79 | plugin-atrules: 80 | title: "@plugin At-Rules" 81 | files: <%= features.base %>/plugins.md 82 | 83 | 84 | 85 | # ============================================= 86 | # NOT PUBLISHED / PLANNED / WIP 87 | # ============================================= 88 | 89 | unpublished: 90 | strict-math: 91 | published: false 92 | title: Strict Math 93 | files: <%= features.base %>/strict-math.md 94 | -------------------------------------------------------------------------------- /assets/root/feed.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Less.js 7 | Sun, 26 Jan 2014 00:00:00 +0000 8 | http://lesscss.org 9 | 10 | Alexis Sellier 11 | self@cloudhead.net 12 | 13 | Copyright (c) 2009-2014, Alexis Sellier. All rights reserved. 14 | 15 | 16 | 17 | About 18 | 19 | Sun, 26 Jan 2014 20:58:34 +0000 20 | http://lesscss.org/about 21 | 22 | 23 | 24 | 25 | 26 | Blog 27 | 28 | Sun, 26 Jan 2014 20:58:34 +0000 29 | http://lesscss.org/blog 30 | 31 | 32 | 33 | 34 | 35 | Cheatsheet 36 | 37 | Sun, 26 Jan 2014 20:58:34 +0000 38 | http://lesscss.org/cheatsheet 39 | 40 | 41 | 42 | 43 | 44 | Language Features 45 | 46 | Sun, 26 Jan 2014 20:58:34 +0000 47 | http://lesscss.org/features 48 | 49 | 50 | 51 | 52 | 53 | Functions 54 | 55 | Sun, 26 Jan 2014 20:58:34 +0000 56 | http://lesscss.org/functions 57 | 58 | 59 | 60 | 61 | 62 | Getting started 63 | 64 | Sun, 26 Jan 2014 20:58:34 +0000 65 | http://lesscss.org/index 66 | 67 | 68 | 69 | 70 | 71 | Plugins 72 | 73 | Sun, 26 Jan 2014 20:58:34 +0000 74 | http://lesscss.org/plugins 75 | 76 | 77 | 78 | 79 | 80 | Usage 81 | 82 | Sun, 26 Jan 2014 20:58:34 +0000 83 | http://lesscss.org/usage 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /content/features/maps.md: -------------------------------------------------------------------------------- 1 | Released [v3.5.0]({{ less.master.url }}CHANGELOG.md) 2 | 3 | > Use rulesets and mixins as maps of values 4 | 5 | By combining namespacing with the lookup `[]` syntax, you can turn your rulesets / mixins into maps. 6 | 7 | ```less 8 | @sizes: { 9 | mobile: 320px; 10 | tablet: 768px; 11 | desktop: 1024px; 12 | } 13 | 14 | .navbar { 15 | display: block; 16 | 17 | @media (min-width: @sizes[tablet]) { 18 | display: inline-block; 19 | } 20 | } 21 | ``` 22 | Outputs: 23 | ```css 24 | .navbar { 25 | display: block; 26 | } 27 | @media (min-width: 768px) { 28 | .navbar { 29 | display: inline-block; 30 | } 31 | } 32 | ``` 33 | 34 | Mixins are a little more versatile as maps because of namespacing and the ability to overload mixins. 35 | 36 | ```less 37 | #library() { 38 | .colors() { 39 | primary: green; 40 | secondary: blue; 41 | } 42 | } 43 | 44 | #library() { 45 | .colors() { primary: grey; } 46 | } 47 | 48 | .button { 49 | color: #library.colors[primary]; 50 | border-color: #library.colors[secondary]; 51 | } 52 | ``` 53 | Outputs: 54 | ```css 55 | .button { 56 | color: grey; 57 | border-color: blue; 58 | } 59 | ``` 60 | 61 | You can also make this easier by [aliasing mixins](#mixins-feature-mixin-aliasing-feature). That is: 62 | 63 | ```less 64 | .button { 65 | @colors: #library.colors(); 66 | color: @colors[primary]; 67 | border-color: @colors[secondary]; 68 | } 69 | ``` 70 | 71 | Note, if a lookup value produces another ruleset, you can append a second `[]` lookup, as in: 72 | 73 | ```less 74 | @config: { 75 | @options: { 76 | library-on: true 77 | } 78 | } 79 | 80 | & when (@config[@options][library-on] = true) { 81 | .produce-ruleset { 82 | prop: val; 83 | } 84 | } 85 | ``` 86 | 87 | In this way, rulesets and variable calls can emulate a type of "namespacing", similar to mixins. 88 | 89 | As far as whether to use mixins or rulesets assigned to variables as maps, it's up to you. You may want to replace entire maps by re-declaring a variable assigned to a rulset. Or you may want to "merge" individual key/value pairs, in which case mixins as maps might be more appropriate. 90 | 91 | ### Using variable variables in lookups 92 | 93 | One important thing to notice is that the value in `[@lookup]` is the key (variable) name `@lookup`, and is not evaluated as a variable. If you want the key name itself to be variable, you can use the `@@variable` syntax. 94 | 95 | E.g. 96 | ```less 97 | .foods() { 98 | @dessert: ice cream; 99 | } 100 | 101 | @key-to-lookup: dessert; 102 | 103 | .lunch { 104 | treat: .foods[@@key-to-lookup]; 105 | } 106 | ``` 107 | This would output: 108 | ```css 109 | .lunch { 110 | treat: ice cream; 111 | } 112 | ``` -------------------------------------------------------------------------------- /styles/components/sidebar.less: -------------------------------------------------------------------------------- 1 | // 2 | // Side navigation 3 | // -------------------------------------------------- 4 | // Scrollspy and affixed-enhanced navigation, 5 | // to highlight sections and secondary 6 | // sections of docs content. 7 | 8 | 9 | // Variables 10 | @sidenav-link-color: #36556E; 11 | 12 | 13 | // Hide the sidenav on smaller screens 14 | .sidebar { 15 | display: none; 16 | } 17 | 18 | // By default it's not affixed in 19 | // mobile views, so undo that 20 | .sidebar.affix { 21 | position: static; 22 | } 23 | 24 | 25 | /* First level of nav */ 26 | .sidenav { 27 | margin-top: 6px; 28 | margin-bottom: 30px; 29 | padding-top: 10px; 30 | padding-bottom: 10px; 31 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 32 | background-color: @gray-lightest; 33 | border-radius: 5px; 34 | } 35 | 36 | /* All levels of nav */ 37 | .sidebar .nav > li > a { 38 | display: block; 39 | color: @sidenav-link-color; 40 | padding: 5px 20px; 41 | } 42 | .sidebar .nav > li > a:hover, 43 | .sidebar .nav > li > a:focus { 44 | text-decoration: none; 45 | background-color: #e8ebee; 46 | border-right: 1px solid #d8dde2; 47 | } 48 | .sidebar .nav > .active > a, 49 | .sidebar .nav > .active:hover > a, 50 | .sidebar .nav > .active:focus > a { 51 | font-weight: bold; 52 | color: @navbar-inverse-bg; 53 | background-color: transparent; 54 | border-right: 1px solid @navbar-inverse-bg; 55 | } 56 | 57 | // Nav: second (nested) level (shown on .active) 58 | .sidebar .nav .nav { 59 | display: none; // Hide by default, show when > 768px 60 | margin-bottom: 8px; 61 | 62 | > li > a { 63 | padding: 3px 30px; 64 | font-size: 90%; 65 | } 66 | } 67 | 68 | // Icons 69 | .sidebar .glyphicon { 70 | font-size: 12px; 71 | margin-left: 10px 72 | } 73 | 74 | 75 | 76 | // Show and affix the side nav when space allows it 77 | @media (min-width: 992px) { 78 | // Show the sidenav on larger screens 79 | .sidebar { 80 | display: block; 81 | padding-top: 65px; 82 | } 83 | .sidebar .nav > .active > ul { 84 | display: block; 85 | } 86 | // Widen the fixed sidebar 87 | .sidebar.affix, 88 | .sidebar.affix-bottom { 89 | width: 213px; 90 | } 91 | .sidebar.affix { 92 | position: fixed; // Undo the static from mobile first approach 93 | top: 15px; 94 | bottom: 0; 95 | overflow: auto; 96 | } 97 | .sidebar.affix-bottom { 98 | position: absolute; // Undo the static from mobile first approach 99 | } 100 | .sidebar.affix .sidenav, 101 | .sidebar.affix-bottom .sidenav { 102 | margin-top: 10px; 103 | margin-bottom: 0; 104 | } 105 | } 106 | 107 | 108 | @media (min-width: 1200px) { 109 | 110 | // Widen the fixed sidebar again 111 | .sidebar.affix-bottom, 112 | .sidebar.affix { 113 | width: 263px; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /styles/bootstrap/tooltip.less: -------------------------------------------------------------------------------- 1 | // 2 | // Tooltips 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .tooltip { 8 | position: absolute; 9 | z-index: @zindex-tooltip; 10 | display: block; 11 | visibility: visible; 12 | font-size: @font-size-small; 13 | line-height: 1.4; 14 | .opacity(0); 15 | 16 | &.in { .opacity(.9); } 17 | &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } 18 | &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } 19 | &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } 20 | &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } 21 | } 22 | 23 | // Wrapper for the tooltip content 24 | .tooltip-inner { 25 | max-width: @tooltip-max-width; 26 | padding: 3px 8px; 27 | color: @tooltip-color; 28 | text-align: center; 29 | text-decoration: none; 30 | background-color: @tooltip-bg; 31 | border-radius: @border-radius-base; 32 | } 33 | 34 | // Arrows 35 | .tooltip-arrow { 36 | position: absolute; 37 | width: 0; 38 | height: 0; 39 | border-color: transparent; 40 | border-style: solid; 41 | } 42 | .tooltip { 43 | &.top .tooltip-arrow { 44 | bottom: 0; 45 | left: 50%; 46 | margin-left: -@tooltip-arrow-width; 47 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; 48 | border-top-color: @tooltip-arrow-color; 49 | } 50 | &.top-left .tooltip-arrow { 51 | bottom: 0; 52 | left: @tooltip-arrow-width; 53 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; 54 | border-top-color: @tooltip-arrow-color; 55 | } 56 | &.top-right .tooltip-arrow { 57 | bottom: 0; 58 | right: @tooltip-arrow-width; 59 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; 60 | border-top-color: @tooltip-arrow-color; 61 | } 62 | &.right .tooltip-arrow { 63 | top: 50%; 64 | left: 0; 65 | margin-top: -@tooltip-arrow-width; 66 | border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; 67 | border-right-color: @tooltip-arrow-color; 68 | } 69 | &.left .tooltip-arrow { 70 | top: 50%; 71 | right: 0; 72 | margin-top: -@tooltip-arrow-width; 73 | border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; 74 | border-left-color: @tooltip-arrow-color; 75 | } 76 | &.bottom .tooltip-arrow { 77 | top: 0; 78 | left: 50%; 79 | margin-left: -@tooltip-arrow-width; 80 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; 81 | border-bottom-color: @tooltip-arrow-color; 82 | } 83 | &.bottom-left .tooltip-arrow { 84 | top: 0; 85 | left: @tooltip-arrow-width; 86 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; 87 | border-bottom-color: @tooltip-arrow-color; 88 | } 89 | &.bottom-right .tooltip-arrow { 90 | top: 0; 91 | right: @tooltip-arrow-width; 92 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; 93 | border-bottom-color: @tooltip-arrow-color; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /content/tools/guis-for-less.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GUIs for Less.js 3 | --- 4 | 5 | **Tip**: try out the different Less tools available for your platform to see which one meets your needs. 6 | 7 | _This page focuses on GUI compilers. For command line usage and tools see [Command Line Usage](#command-line-usage)._ 8 | 9 | ## Cross platform 10 | 11 | ### [Crunch 2!](http://getcrunch.co/) 12 | 13 | > The editor and compiler for awesome people. 14 | 15 | Crunch 2 is a cross-platform (Windows, Mac, and Linux) editor with integrated compiling. If you work with large Less projects, you should definitely try it out, as you only need the free version for Less files. Available at: [https://getcrunch.co/](http://getcrunch.co/). 16 | 17 | 18 | ![Crunch screenshot](http://getcrunch.co/wp-content/uploads/2015/10/crunch_retina2.jpg) 19 | 20 | 21 | ### [Koala](http://koala-app.com/) 22 | 23 | > Koala is a cross-platform GUI application for compiling less, sass and coffeescript. 24 | 25 | Features: cross platform, compile error notification supports and compile options supports. 26 | 27 | Get more info: [http://koala-app.com/](http://koala-app.com/) 28 | 29 | ![koala screenshot](http://koala-app.com/img/screenshot.png) 30 | 31 | #### [Prepros](https://prepros.io/) 32 | > Prepros is a tool to compile Less, Sass, Compass, Stylus, Jade and much more. 33 | 34 | Get more info at [https://prepros.io/](https://prepros.io/) 35 | 36 | ![Prepros screenshot](https://prepros.io/img/shot-shadow.png) 37 | 38 | 39 | ## Specific platforms 40 | 41 | ### Windows 42 | 43 | #### [WinLess](http://winless.org) 44 | 45 | > 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. 46 | 47 | Get more info: [http://winless.org](http://winless.org) 48 | 49 | ![WinLess screenshot](http://winless.org/style/images/WinLess_Screenshot.png) 50 | 51 | ### OS X 52 | 53 | #### [CodeKit](http://incident57.com/codekit) 54 | 55 | > CodeKit is the successor to LESS.app, and supports Less among many other preprocessing languages, such as SASS, Jade, Markdown, and many more. 56 | 57 | Get more info: [http://incident57.com/codekit](http://incident57.com/codekit) 58 | 59 | ![CodeKit screenshot](http://incident57.com/codekit/images/screenshot-images.jpg) 60 | 61 | #### [LiveReload](http://livereload.com) 62 | 63 | > CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work. 64 | 65 | Get more info: [http://livereload.com](http://livereload.com) 66 | 67 | ![LiveReload screenshot](http://assets.livereload.com/embedded-images/LiveReload-LESS-screenshot-on-white.png) 68 | 69 | ### Linux 70 | 71 | #### [Plessc](https://github.com/Mte90/Plessc) 72 | 73 | > Plessc is a gui fronted made with PyQT. 74 | 75 | Auto compile, log viewer, open the less file with the editor chosen, settings for compile the file. 76 | Get more info: [https://github.com/Mte90/Plessc](https://github.com/Mte90/Plessc) 77 | 78 | ![Plessc screenshot](https://github.com/Mte90/Plessc/raw/master/screenshot.png) 79 | -------------------------------------------------------------------------------- /content/usage/command-line-usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Command Line Usage 3 | --- 4 | 5 | > Compile `.less` files to `.css` using the command line 6 | 7 | Heads up! If the command line isn't your thing, learn more about [GUIs for Less](../tools/#guis-for-less). 8 | 9 | ## Installing 10 | 11 | Install with [npm](https://www.npmjs.org/) 12 | 13 | ```bash 14 | npm install less -g 15 | ``` 16 | 17 | The `-g` option installs the `lessc` command available globally. For a specific version (or tag) you can add `@VERSION` after our package name, e.g. `npm install less@2.7.1 -g`. 18 | 19 | ### Installing for Node Development 20 | 21 | Alternatively, if you don't want to use the compiler globally, you may be after 22 | 23 | ```bash 24 | npm i less --save-dev 25 | ``` 26 | 27 | This will install the latest official version of lessc in your project folder, also adding it to the `devDependencies` in your project's `package.json`. 28 | 29 | ### Beta releases of lessc 30 | 31 | Periodically, as new functionality is being developed, lessc builds will be published to npm, tagged as beta. These builds will _not_ be published as a `@latest` official release, and will typically have beta in the version (use `lessc -v` to get current version). 32 | 33 | Since patch releases are non-breaking we will publish patch releases immediately and alpha/beta/candidate versions will be published as minor or major version upgrades (we endeavour since 1.4.0 to follow [semantic versioning](http://semver.org/)). 34 | 35 | 36 | ## Server-Side and Command Line Usage 37 | 38 | The binary included in this repository, `bin/lessc` works with [Node.js](http://nodejs.org/) on *nix, OS X and Windows. 39 | 40 | **Usage**: `lessc [option option=parameter ...] [destination]` 41 | 42 | ### Command Line Usage 43 | 44 | ```bash 45 | lessc [option option=parameter ...] [destination] 46 | ``` 47 | 48 | If source is set to `-' (dash or hyphen-minus), input is read from stdin. 49 | 50 | #### Examples 51 | 52 | Compile bootstrap.less to bootstrap.css 53 | 54 | ```bash 55 | lessc bootstrap.less bootstrap.css 56 | ``` 57 | 58 | ## Options specific to `lessc` 59 | 60 | _For all other options, see [Less Options](#less-options)._ 61 | 62 | #### Silent 63 | 64 | lessc -s 65 | lessc --silent 66 | 67 | Stops any warnings from being shown. 68 | 69 | #### Version 70 | 71 | ```bash 72 | lessc -v 73 | lessc --version 74 | ``` 75 | #### Help 76 | 77 | | | | 78 | |---|---| 79 | | `lessc --help` | | 80 | | `lessc -h` | | 81 | 82 | Prints a help message with available options and exits. 83 | 84 | #### Makefile 85 | 86 | ```bash 87 | lessc -M 88 | lessc --depends 89 | ``` 90 | 91 | Outputs a makefile import dependency list to stdout. 92 | 93 | #### No Color 94 | 95 | *Deprecated*. 96 | 97 | ```bash 98 | lessc --no-color 99 | ``` 100 | 101 | #### Clean CSS 102 | 103 | In v2 of less, Clean CSS is no longer included as a direct dependency. To use clean css with lessc, use the [clean css plugin](https://github.com/less/less-plugin-clean-css). 104 | 105 | 106 | -------------------------------------------------------------------------------- /content/features/mixin-guards.md: -------------------------------------------------------------------------------- 1 | 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. 2 | 3 | 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. 4 | 5 | Let's start with an example: 6 | 7 | ```less 8 | .mixin(@a) when (lightness(@a) >= 50%) { 9 | background-color: black; 10 | } 11 | .mixin(@a) when (lightness(@a) < 50%) { 12 | background-color: white; 13 | } 14 | .mixin(@a) { 15 | color: @a; 16 | } 17 | ``` 18 | 19 | The key is the `when` keyword, which introduces a guard sequence (here with only one guard). Now if we run the following code: 20 | 21 | ```less 22 | .class1 { .mixin(#ddd) } 23 | .class2 { .mixin(#555) } 24 | ``` 25 | 26 | Here's what we'll get: 27 | 28 | ```css 29 | .class1 { 30 | background-color: black; 31 | color: #ddd; 32 | } 33 | .class2 { 34 | background-color: white; 35 | color: #555; 36 | } 37 | ``` 38 | 39 | #### Guard Comparison Operators 40 | 41 | The full list of comparison operators usable in guards are: `>`, `>=`, `=`, `=<`, `<`. Additionally, the keyword `true` is the only truthy value, making these two mixins equivalent: 42 | 43 | ```less 44 | .truth(@a) when (@a) { ... } 45 | .truth(@a) when (@a = true) { ... } 46 | ``` 47 | 48 | Any value other than the keyword `true` is falsy: 49 | 50 | ```less 51 | .class { 52 | .truth(40); // Will not match any of the above definitions. 53 | } 54 | ``` 55 | 56 | Note that you can also compare arguments with each other, or with non-arguments: 57 | 58 | ```less 59 | @media: mobile; 60 | 61 | .mixin(@a) when (@media = mobile) { ... } 62 | .mixin(@a) when (@media = desktop) { ... } 63 | 64 | .max(@a; @b) when (@a > @b) { width: @a } 65 | .max(@a; @b) when (@a < @b) { width: @b } 66 | ``` 67 | 68 | #### Guard Logical Operators 69 | 70 | You can use logical operators with guards. The syntax is based on CSS media queries. 71 | 72 | Use the `and` keyword to combine guards: 73 | 74 | ```less 75 | .mixin(@a) when (isnumber(@a)) and (@a > 0) { ... } 76 | ``` 77 | 78 | You can emulate the *or* operator by separating guards with a comma `,`. If any of the guards evaluate to true, it's considered a match: 79 | 80 | ```less 81 | .mixin(@a) when (@a > 10), (@a < -10) { ... } 82 | ``` 83 | 84 | Use the `not` keyword to negate conditions: 85 | 86 | ```less 87 | .mixin(@b) when not (@b > 0) { ... } 88 | ``` 89 | 90 | #### Type Checking Functions 91 | 92 | Lastly, if you want to match mixins based on value type, you can use the `is` functions: 93 | 94 | ```less 95 | .mixin(@a; @b: 0) when (isnumber(@b)) { ... } 96 | .mixin(@a; @b: black) when (iscolor(@b)) { ... } 97 | ``` 98 | 99 | Here are the basic type checking functions: 100 | 101 | * `iscolor` 102 | * `isnumber` 103 | * `isstring` 104 | * `iskeyword` 105 | * `isurl` 106 | 107 | If you want to check if a value is in a specific unit in addition to being a number, you may use one of: 108 | 109 | * `ispixel` 110 | * `ispercentage` 111 | * `isem` 112 | * `isunit` 113 | -------------------------------------------------------------------------------- /assets/public/js/application.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Adapted from Bootstrap docs JavaScript 3 | */ 4 | 5 | 6 | !function ($) { 7 | 8 | $(function () { 9 | 10 | // IE10 viewport hack for Surface/desktop Windows 8 bug 11 | // 12 | // See Getting Started docs for more information 13 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 14 | var msViewportStyle = document.createElement('style') 15 | msViewportStyle.appendChild( 16 | document.createTextNode( 17 | '@-ms-viewport{width:auto!important}' 18 | ) 19 | ) 20 | document.querySelector('head').appendChild(msViewportStyle) 21 | } 22 | 23 | var $window = $(window) 24 | var $body = $(document.body) 25 | 26 | $body.scrollspy({ 27 | target: '.sidebar', 28 | offset: 40 // required to select the right thing. if this is smaller then you are at the top of one section 29 | // but the next section is highlighted 30 | }); 31 | 32 | $window.on('load', function () { 33 | $body.scrollspy('refresh') 34 | }); 35 | 36 | $('.docs-container [href=#]').click(function (e) { 37 | e.preventDefault() 38 | }); 39 | 40 | 41 | $('.source-link').each(function () { 42 | var id = $(this).data('content'); 43 | var content = $('').append($('#' + id)).html(); 44 | $(this).attr('data-content', content); 45 | 46 | // Keep popovers open when hovered 47 | $(this).popover({ 48 | trigger: 'manual', 49 | container: 'body', 50 | placement: 'left', 51 | template: '

      ', 52 | html: true, 53 | delay: {show: 50, hide: 750} 54 | }).on('mouseenter', function () { 55 | var self = this; 56 | $(this).popover('show'); 57 | $(this).addClass('active'); 58 | $(this).addClass('popover-source'); 59 | 60 | $('.popover').on('mouseleave', function () { 61 | $(self).popover('hide'); 62 | $(self).removeClass('active'); 63 | }); 64 | 65 | }).on('mouseleave', function () { 66 | var self = this; 67 | setTimeout(function () { 68 | if (!$('.popover:hover').length) { 69 | $(self).popover('hide'); 70 | $(self).removeClass('active'); 71 | } 72 | }, 100); 73 | }); 74 | }); 75 | 76 | 77 | // back to top 78 | // setTimeout(function () { 79 | var $sideBar = $('.sidebar') 80 | 81 | /** @todo - replace this with position: sticky */ 82 | $sideBar.affix({ 83 | offset: { 84 | top: function () { 85 | var offsetTop = $sideBar.offset().top 86 | var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10) 87 | var navOuterHeight = $('.docs-nav').height() 88 | 89 | return (this.top = offsetTop - navOuterHeight - sideBarMargin + 15) 90 | }, 91 | bottom: function () { 92 | return (this.bottom = $('.footer').outerHeight(true)) 93 | } 94 | } 95 | }) 96 | // }, 100); 97 | 98 | // setTimeout(function () { 99 | $('.top').affix() 100 | // }, 100); 101 | 102 | }) 103 | 104 | }(jQuery) 105 | -------------------------------------------------------------------------------- /content/tools/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Less Plugins 3 | --- 4 | > Available Less plugins. Find more at [GitHub](https://github.com/search?q=topic%3Aless-plugin&type=Repositories) and [NPM Registry](https://www.npmjs.com/search?q=%22less-plugin%22) 5 | 6 | #### Postprocessor/Feature Plugins 7 | | | | 8 | |---|---| 9 | | [Autoprefixer](https://github.com/less/less-plugin-autoprefix) | Add vendor prefixes 10 | | [CSScomb](https://github.com/bassjobsen/less-plugin-csscomb/) | Beautify/format 11 | | [clean-css](https://github.com/less/less-plugin-clean-css) | Compress/minify 12 | | [CSSWring](https://github.com/bassjobsen/less-plugin-csswring) | Compress/minify 13 | | [css-flip](https://github.com/bassjobsen/less-plugin-css-flip) | Generate left-to-right (LTR) or right-to-left (RTL) CSS 14 | | [functions](https://github.com/seven-phases-max/less-plugin-functions) | Write custom Less functions in Less itself 15 | | [group-css-media-queries](https://github.com/bassjobsen/less-plugin-group-css-media-queries) | Group CSS media queries 16 | | [inline-urls](https://github.com/less/less-plugin-inline-urls) | Convert `url()` to a call to `data-uri()` 17 | | [lesshint](https://github.com/lesshint/lesshint) | Lint your Less 18 | | [lists](https://github.com/seven-phases-max/less-plugin-lists) | Lists/arrays manipulation (incl. loops) 19 | | [pleeease](https://github.com/bassjobsen/less-plugin-pleeease) | Postprocess using pleeease 20 | | [rtl](https://github.com/less/less-plugin-rtl) | Reverse from ltr to rtl 21 | | [variables-output](https://github.com/Craga89/less-plugin-variables-output) | Export top-level variables to a JSON file 22 | 23 | #### Preprocessors 24 | | | | 25 | |---|---| 26 | | [sass2less](https://github.com/mediafreakch/less-plugin-sass2less) | Import and convert Sass/SCSS files into your Less code (incl. variables, mixins and more) 27 | 28 | #### Import Plugins 29 | | | | 30 | |---|---| 31 | | [bower-resolve](https://github.com/Mercateo/less-plugin-bower-resolve) | Import from a Bower package 32 | | [glob](https://github.com/just-boris/less-plugin-glob) | Globbing support in Less imports 33 | | [npm-import](https://github.com/less/less-plugin-npm-import) | Import from npm packages 34 | | [resolve-blocks](https://github.com/Dalee/less-plugin-resolve-blocks) | Going up a tree to find specified component 35 | 36 | #### Function Libraries 37 | | | | 38 | |---|---| 39 | | [advanced-color-functions](https://github.com/less/less-plugin-advanced-color-functions/) | Functions to find more contrast colors 40 | | [cubehelix](https://github.com/bassjobsen/less-plugin-cubehelix) | A `cubehelix` function 41 | | [lists](https://github.com/seven-phases-max/less-plugin-lists) | Lists/arrays manipulation functions 42 | | [urlencode](https://github.com/calvinjuarez/less-plugin-urlencode) | URL Encode function 43 | | [util](https://github.com/FaberVitale/less-plugin-util) | A set of utility functions 44 | 45 | #### Framework Importers 46 | | | | 47 | |---|---| 48 | | [Bootstrap](https://github.com/bassjobsen/less-plugin-bootstrap/) | Bootstrap 49 | | [Cardinal](https://github.com/bassjobsen/less-plugin-cardinal) | Cardinal 50 | | [Flexbox Grid](https://github.com/bassjobsen/less-plugin-flexboxgrid) | [Flexbox Grid](http://flexboxgrid.com/) 51 | | [Flexible Grid System](https://github.com/bassjobsen/less-plugin-flexiblegs) | [Flexible Grid System](https://dnomak.com/flexiblegs/) 52 | | [Ionic](https://github.com/bassjobsen/less-plugin-ionic) | Ionic 53 | | [Lesshat](https://github.com/bassjobsen/less-plugin-lesshat/) | Lesshat 54 | | [Skeleton](https://github.com/bassjobsen/less-plugin-skeleton) | Skeleton 55 | -------------------------------------------------------------------------------- /content/functions/color-definition.md: -------------------------------------------------------------------------------- 1 | ### rgb 2 | 3 | > Creates an opaque color object from decimal red, green and blue (RGB) values. 4 | 5 | Literal color values in standard HTML/CSS formats may also be used to define colors, for example `#ff0000`. 6 | 7 | Parameters: 8 | * `red`: An integer 0-255 or percentage 0-100%. 9 | * `green`: An integer 0-255 or percentage 0-100%. 10 | * `blue`: An integer 0-255 or percentage 0-100%. 11 | 12 | Returns: `color` 13 | 14 | Example: `rgb(90, 129, 32)` 15 | 16 | Output: `#5a8120` 17 | 18 | 19 | ### rgba 20 | 21 | > Creates a transparent color object from decimal red, green, blue and alpha (RGBA) values. 22 | 23 | Parameters: 24 | 25 | * `red`: An integer 0-255 or percentage 0-100%. 26 | * `green`: An integer 0-255 or percentage 0-100%. 27 | * `blue`: An integer 0-255 or percentage 0-100%. 28 | * `alpha`: A number 0-1 or percentage 0-100%. 29 | 30 | Returns: `color` 31 | 32 | Example: `rgba(90, 129, 32, 0.5)` 33 | 34 | Output: `rgba(90, 129, 32, 0.5)` 35 | 36 | 37 | ### argb 38 | 39 | > Creates a hex representation of a color in `#AARRGGBB` format (**NOT** `#RRGGBBAA`!). 40 | 41 | This format is used in Internet Explorer, and .NET and Android development. 42 | 43 | Parameters: `color`, color object. 44 | 45 | Returns: `string` 46 | 47 | Example: `argb(rgba(90, 23, 148, 0.5));` 48 | 49 | Output: `#805a1794` 50 | 51 | 52 | ### hsl 53 | 54 | > Creates an opaque color object from hue, saturation and lightness (HSL) values. 55 | 56 | Parameters: 57 | 58 | * `hue`: An integer 0-360 representing degrees. 59 | * `saturation`: A percentage 0-100% or number 0-1. 60 | * `lightness`: A percentage 0-100% or number 0-1. 61 | 62 | Returns: `color` 63 | 64 | Example: `hsl(90, 100%, 50%)` 65 | 66 | Output: `#80ff00` 67 | 68 | This is useful if you want to create a new color based on another color's channel, forExample: `@new: hsl(hue(@old), 45%, 90%);` 69 | 70 | `@new` will have `@old`'s *hue*, and its own saturation and lightness. 71 | 72 | 73 | ### hsla 74 | 75 | > Creates a transparent color object from hue, saturation, lightness and alpha (HSLA) values. 76 | 77 | Parameters: 78 | * `hue`: An integer 0-360 representing degrees. 79 | * `saturation`: A percentage 0-100% or number 0-1. 80 | * `lightness`: A percentage 0-100% or number 0-1. 81 | * `alpha`: A percentage 0-100% or number 0-1. 82 | 83 | Returns: `color` 84 | 85 | Example: `hsla(90, 100%, 50%, 0.5)` 86 | 87 | Output: `rgba(128, 255, 0, 0.5)` 88 | 89 | 90 | ### hsv 91 | 92 | > Creates an opaque color object from hue, saturation and value (HSV) values. 93 | 94 | Note that this is a color space available in Photoshop, and is not the same as `hsl`. 95 | 96 | Parameters: 97 | * `hue`: An integer 0-360 representing degrees. 98 | * `saturation`: A percentage 0-100% or number 0-1. 99 | * `value`: A percentage 0-100% or number 0-1. 100 | 101 | Returns: `color` 102 | 103 | Example: `hsv(90, 100%, 50%)` 104 | 105 | Output: `#408000` 106 | 107 | 108 | ### hsva 109 | 110 | > Creates a transparent color object from hue, saturation, value and alpha (HSVA) values. 111 | 112 | Note that this is not the same as `hsla`, and is a color space available in Photoshop. 113 | 114 | Parameters: 115 | * `hue`: An integer 0-360 representing degrees. 116 | * `saturation`: A percentage 0-100% or number 0-1. 117 | * `value`: A percentage 0-100% or number 0-1. 118 | * `alpha`: A percentage 0-100% or number 0-1. 119 | 120 | Returns: `color` 121 | 122 | Example: `hsva(90, 100%, 50%, 0.5)` 123 | 124 | Output: `rgba(64, 128, 0, 0.5)` 125 | -------------------------------------------------------------------------------- /content/usage/developing-less.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Developing Less 3 | --- 4 | 5 | Thanks for thinking about contributing! Please read the [contributing instructions]({{ less.master.url }}CONTRIBUTING.md) carefully to avoid wasted work. 6 | 7 | ## Install These Tools 8 | 9 | * **node** - 10 | * **phantomjs** - 11 | 12 | make sure the paths are setup. If you start your favourite command line and type `node -v` you should see the node compiler. If you run `phantomjs -v` you should see the phantomjs version number. 13 | 14 | * clone your less.js repository locally 15 | * navigate to your local less.js repository and run `npm install` this installs less' npm dependencies. 16 | 17 | ## Usage 18 | 19 | [Grunt](https://gruntjs.com/) is used in order to run development commands such as tests, builds, and benchmarks. You can run them either with `grunt [command_name]` if you have `grunt-cli` installed globally or with `npm run grunt -- [command_name]`. 20 | 21 | If you go to the root of the Less repository you should be able to do `npm test` (a handy alias for `npm run grunt -- test`) - this should run all the tests. For the browser specific only, run `npm run grunt -- browsertest` If you want to try out the current version of less against a file, from here do `node bin/lessc path/to/file.less` 22 | 23 | To debug the browser tests, run `npm run grunt -- browsertest-server` then go to http://localhost:8088/tmp/browser/ to see the test runner pages. 24 | 25 | 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. 26 | 27 | You should now be able to do `lessc file.less` and if there is an appropriate `file.less` then it will be compiled and output to the stdout. You can then compare it to running locally (`node bin/lessc file.less`). 28 | 29 | Other grunt commands 30 | 31 | * `npm run grunt -- benchmark` - run our benchmark tests to get some numbers on performance 32 | * `npm run grunt -- stable` to create a new release 33 | * `npm run grunt -- readme` to generate a new readme.md in the root directory (after each release) 34 | 35 | ## How to Run Less in Other Environments 36 | 37 | If you look in the libs folder you will see `less`, `less-node`, `less-browser`. The `less` folder is pure javascript with no environment 38 | specifics. if you require `less/libs/less`, you get a function that takes an environment object and an array of file managers. The file 39 | managers are the same file managers that can also be written as a plugin. 40 | 41 | ```js 42 | var createLess = require("less/libs/less"), 43 | myLess = createLess(environment, [myFileManager]); 44 | ``` 45 | 46 | The environment api is specified in [less/libs/less/environment/environment-api.js](https://github.com/less/less.js/blob/master/lib/less/environment/environment-api.js) 47 | and the file manager api is specified in [less/libs/less/environment/file-manager-api.js](https://github.com/less/less.js/blob/master/lib/less/environment/file-manager-api.js). 48 | 49 | For file managers we highly recommend setting the prototype as a new AbstractFileManager - this allows you to override what is needed and allows us 50 | to implement new functions without breaking existing file managers. For an example of file managers, see the 2 node implementations, the browser implementation or 51 | the npm import plugin implementation. 52 | 53 | ## Guide 54 | 55 | If you look at [http://www.gliffy.com/go/publish/4784259](http://www.gliffy.com/go/publish/4784259), This is an overview diagram of how less works. Warning! It needs updating with v2 changes. 56 | -------------------------------------------------------------------------------- /content/functions/color-channel.md: -------------------------------------------------------------------------------- 1 | ### hue 2 | 3 | > Extracts the hue channel of a color object in the HSL color space. 4 | 5 | Parameters: `color` - a color object. 6 | 7 | Returns: `integer` 0-360 8 | 9 | Example: `hue(hsl(90, 100%, 50%))` 10 | 11 | Output: `90` 12 | 13 | 14 | ### saturation 15 | 16 | > Extracts the saturation channel of a color object in the HSL color space. 17 | 18 | Parameters: `color` - a color object. 19 | 20 | Returns: `percentage` 0-100 21 | 22 | Example: `saturation(hsl(90, 100%, 50%))` 23 | 24 | Output: `100%` 25 | 26 | 27 | ### lightness 28 | 29 | > Extracts the lightness channel of a color object in the HSL color space. 30 | 31 | Parameters: `color` - a color object. 32 | 33 | Returns: `percentage` 0-100 34 | 35 | Example: `lightness(hsl(90, 100%, 50%))` 36 | 37 | Output: `50%` 38 | 39 | 40 | ### hsvhue 41 | 42 | > Extracts the hue channel of a color object in the HSV color space. 43 | 44 | Parameters: `color` - a color object. 45 | 46 | Returns: `integer` `0-360` 47 | 48 | Example: `hsvhue(hsv(90, 100%, 50%))` 49 | 50 | Output: `90` 51 | 52 | 53 | ### hsvsaturation 54 | 55 | > Extracts the saturation channel of a color object in the HSV color space. 56 | 57 | Parameters: `color` - a color object. 58 | 59 | Returns: `percentage` 0-100 60 | 61 | Example: `hsvsaturation(hsv(90, 100%, 50%))` 62 | 63 | Output: `100%` 64 | 65 | 66 | ### hsvvalue 67 | 68 | > Extracts the value channel of a color object in the HSV color space. 69 | 70 | Parameters: `color` - a color object. 71 | 72 | Returns: `percentage` 0-100 73 | 74 | Example: `hsvvalue(hsv(90, 100%, 50%))` 75 | 76 | Output: `50%` 77 | 78 | 79 | ### red 80 | 81 | > Extracts the red channel of a color object. 82 | 83 | Parameters: `color` - a color object. 84 | 85 | Returns: `float` 0-255 86 | 87 | Example: `red(rgb(10, 20, 30))` 88 | 89 | Output: `10` 90 | 91 | 92 | ### green 93 | 94 | > Extracts the green channel of a color object. 95 | 96 | Parameters: `color` - a color object. 97 | 98 | Returns: `float` 0-255 99 | 100 | Example: `green(rgb(10, 20, 30))` 101 | 102 | Output: `20` 103 | 104 | 105 | ### blue 106 | 107 | > Extracts the blue channel of a color object. 108 | 109 | Parameters: `color` - a color object. 110 | 111 | Returns: `float` 0-255 112 | 113 | Example: `blue(rgb(10, 20, 30))` 114 | 115 | Output: `30` 116 | 117 | 118 | ### alpha 119 | 120 | > Extracts the alpha channel of a color object. 121 | 122 | Parameters: `color` - a color object. 123 | 124 | Returns: `float` 0-1 125 | 126 | Example: `alpha(rgba(10, 20, 30, 0.5))` 127 | 128 | Output: `0.5` 129 | 130 | 131 | ### luma 132 | 133 | > Calculates the [luma](http://en.wikipedia.org/wiki/Luma_%28video%29) (perceptual brightness) of a color object. 134 | 135 | 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. 136 | 137 | Before v1.7.0 the luma was calculated without gamma correction, use the luminance function to calculate these "old" values. 138 | 139 | Parameters: `color` - a color object. 140 | 141 | Returns: `percentage` 0-100% 142 | 143 | Example: `luma(rgb(100, 200, 30))` 144 | 145 | Output: `44%` 146 | 147 | 148 | ### luminance 149 | 150 | > Calculates the value of the luma without gamma correction (this function was named `luma` before v1.7.0) 151 | 152 | Parameters: `color` - a color object. 153 | 154 | Returns: `percentage` 0-100% 155 | 156 | Example: `luminance(rgb(100, 200, 30))` 157 | 158 | Output: `65%` 159 | -------------------------------------------------------------------------------- /styles/bootstrap/modals.less: -------------------------------------------------------------------------------- 1 | // 2 | // Modals 3 | // -------------------------------------------------- 4 | 5 | // .modal-open - body class for killing the scroll 6 | // .modal - container to scroll within 7 | // .modal-dialog - positioning shell for the actual modal 8 | // .modal-content - actual modal w/ bg and corners and shit 9 | 10 | // Kill the scroll on the body 11 | .modal-open { 12 | overflow: hidden; 13 | } 14 | 15 | // Container that the modal scrolls within 16 | .modal { 17 | display: none; 18 | overflow: auto; 19 | overflow-y: scroll; 20 | position: fixed; 21 | top: 0; 22 | right: 0; 23 | bottom: 0; 24 | left: 0; 25 | z-index: @zindex-modal-background; 26 | 27 | // When fading in the modal, animate it to slide down 28 | &.fade .modal-dialog { 29 | .translate(0, -25%); 30 | .transition-transform(~"0.3s ease-out"); 31 | } 32 | &.in .modal-dialog { .translate(0, 0)} 33 | } 34 | 35 | // Shell div to position the modal with bottom padding 36 | .modal-dialog { 37 | margin-left: auto; 38 | margin-right: auto; 39 | width: auto; 40 | padding: 10px; 41 | z-index: (@zindex-modal-background + 10); 42 | } 43 | 44 | // Actual modal 45 | .modal-content { 46 | position: relative; 47 | background-color: @modal-content-bg; 48 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) 49 | border: 1px solid @modal-content-border-color; 50 | border-radius: @border-radius-large; 51 | .box-shadow(0 3px 9px rgba(0,0,0,.5)); 52 | background-clip: padding-box; 53 | // Remove focus outline from opened modal 54 | outline: none; 55 | } 56 | 57 | // Modal background 58 | .modal-backdrop { 59 | position: fixed; 60 | top: 0; 61 | right: 0; 62 | bottom: 0; 63 | left: 0; 64 | z-index: (@zindex-modal-background - 10); 65 | background-color: @modal-backdrop-bg; 66 | // Fade for backdrop 67 | &.fade { .opacity(0); } 68 | &.in { .opacity(.5); } 69 | } 70 | 71 | // Modal header 72 | // Top section of the modal w/ title and dismiss 73 | .modal-header { 74 | padding: @modal-title-padding; 75 | border-bottom: 1px solid @modal-header-border-color; 76 | min-height: (@modal-title-padding + @modal-title-line-height); 77 | } 78 | // Close icon 79 | .modal-header .close { 80 | margin-top: -2px; 81 | } 82 | 83 | // Title text within header 84 | .modal-title { 85 | margin: 0; 86 | line-height: @modal-title-line-height; 87 | } 88 | 89 | // Modal body 90 | // Where all modal content resides (sibling of .modal-header and .modal-footer) 91 | .modal-body { 92 | position: relative; 93 | padding: @modal-inner-padding; 94 | } 95 | 96 | // Footer (for actions) 97 | .modal-footer { 98 | margin-top: 15px; 99 | padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; 100 | text-align: right; // right align buttons 101 | border-top: 1px solid @modal-footer-border-color; 102 | .clearfix(); // clear it in case folks use .pull-* classes on buttons 103 | 104 | // Properly space out buttons 105 | .btn + .btn { 106 | margin-left: 5px; 107 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 108 | } 109 | // but override that for button groups 110 | .btn-group .btn + .btn { 111 | margin-left: -1px; 112 | } 113 | // and override it for block buttons as well 114 | .btn-block + .btn-block { 115 | margin-left: 0; 116 | } 117 | } 118 | 119 | // Scale up the modal 120 | @media screen and (min-width: @screen-sm-min) { 121 | 122 | .modal-dialog { 123 | width: 600px; 124 | padding-top: 30px; 125 | padding-bottom: 30px; 126 | } 127 | .modal-content { 128 | .box-shadow(0 5px 15px rgba(0,0,0,.5)); 129 | } 130 | 131 | } 132 | -------------------------------------------------------------------------------- /data/_utils/utils.js: -------------------------------------------------------------------------------- 1 | const url = require('url'); 2 | const file = require('fs-utils'); 3 | const origin = require('remote-origin-url'); 4 | const branch = require('git-branch'); 5 | const repoUrl = require('github-repo-url'); 6 | const ghUsername = require('git-username'); 7 | const ghRepoName = require('git-repo-name'); 8 | 9 | 10 | /** 11 | * Get the current branch for a local git repository 12 | */ 13 | 14 | exports.uppercase = function(str) { 15 | return str.toUpperCase(); 16 | }; 17 | 18 | 19 | /** 20 | * Get the current branch for a local git repository 21 | */ 22 | 23 | exports.origin = origin.url; 24 | 25 | 26 | /** 27 | * Get the current branch for a local git repository 28 | */ 29 | 30 | exports.branch = function () { 31 | return branch; 32 | }; 33 | 34 | 35 | /** 36 | * Get the remote origin url for a local git repository 37 | */ 38 | 39 | exports.repo_url = function () { 40 | return repoUrl; 41 | }; 42 | 43 | 44 | /** 45 | * Get the username from the GitHub remote origin URL 46 | */ 47 | 48 | exports.username = function () { 49 | return ghUsername; 50 | }; 51 | 52 | 53 | /** 54 | * Get the repo name from the GitHub remote origin URL 55 | */ 56 | 57 | exports.repo_name = function () { 58 | return ghRepoName; 59 | }; 60 | 61 | 62 | /** 63 | * Count the number of files returned from the 64 | * given glob pattern. 65 | */ 66 | 67 | exports.fileCount = function(str) { 68 | return file.expand(str).length; 69 | }; 70 | 71 | 72 | /** 73 | * Get the hostname of a URL 74 | * @param {String} str The full URL to parse 75 | * @return {String} The hostname only 76 | * @example 77 | * <%= _.hostname('https://assemble.io') %> 78 | * => assemble.io 79 | */ 80 | 81 | exports.hostname = function(str) { 82 | return url.parse(str).hostname; 83 | }; 84 | 85 | 86 | /** 87 | * Strip `.git` from the end of a URL, so the URL 88 | * can be used and extended in config values. 89 | * 90 | * @param {String} str 91 | * @return {String} 92 | * @example 93 | * <%= _.stripGit('https://github.com/assemble/assemble.io.git') %> 94 | * => https://github.com/assemble/assemble.io 95 | */ 96 | 97 | exports.stripGit = function(url) { 98 | var git = /\.git$/; 99 | if (git.test(url)) { 100 | return url.replace(git, ''); 101 | } 102 | return url; 103 | }; 104 | 105 | 106 | 107 | 108 | /** 109 | * Date functions used in _.date() mixin 110 | * 111 | * @name formatDate 112 | * @param {Object} dateobj The date object to format. 113 | * @param {String} structure The structure to use, e.g. 'YYYY-MM-DD'. 114 | * 115 | * @return {String} The formatted date. 116 | * @api public 117 | */ 118 | 119 | exports.date = function(structure) { 120 | /* jshint unused: false */ 121 | 122 | var dateobj = new Date(); 123 | 124 | var year = dateobj.getFullYear(); 125 | var month = ('0' + (dateobj.getMonth() + 1)).slice(-2); 126 | var date = ('0' + dateobj.getDate()).slice(-2); 127 | var hours = ('0' + dateobj.getHours()).slice(-2); 128 | var minutes = ('0' + dateobj.getMinutes()).slice(-2); 129 | var seconds = ('0' + dateobj.getSeconds()).slice(-2); 130 | var day = dateobj.getDay(); 131 | 132 | var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 133 | var dates = ['Sunday', 'Monday', 'Tuesday', 'Wendesday', 'Thursday', 'Friday', 'Saturday']; 134 | var output = ''; 135 | 136 | structure = structure || 'YYYY-MMM-DD DDD'; 137 | switch (structure) { 138 | case 'YYYY-MM-DD': 139 | output = year + '-' + month + '-' + date; 140 | break; 141 | case 'YYYY': 142 | output = year; 143 | break; 144 | case 'full': 145 | output = dates[parseInt(day)] + ', ' + months[parseInt(month) - 1] + ' ' + date + ', ' + year; 146 | break; 147 | } 148 | return output; 149 | }; 150 | -------------------------------------------------------------------------------- /styles/bootstrap/popovers.less: -------------------------------------------------------------------------------- 1 | // 2 | // Popovers 3 | // -------------------------------------------------- 4 | 5 | 6 | .popover { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | z-index: @zindex-popover; 11 | display: none; 12 | padding: 1px; 13 | text-align: left; // Reset given new insertion method 14 | background-color: @popover-bg; 15 | background-clip: padding-box; 16 | border: 1px solid @popover-fallback-border-color; 17 | border: 1px solid @popover-border-color; 18 | border-radius: @border-radius-large; 19 | .box-shadow(0 5px 10px rgba(0,0,0,.2)); 20 | 21 | // Overrides for proper insertion 22 | white-space: normal; 23 | 24 | // Offset the popover to account for the popover arrow 25 | &.top { margin-top: -10px; } 26 | &.right { margin-left: 10px; } 27 | &.bottom { margin-top: 10px; } 28 | &.left { margin-left: -10px; } 29 | } 30 | 31 | .popover-title { 32 | margin: 0; // reset heading margin 33 | padding: 8px 14px; 34 | font-size: @font-size-base; 35 | font-weight: normal; 36 | line-height: 18px; 37 | background-color: @popover-title-bg; 38 | border-bottom: 1px solid darken(@popover-title-bg, 5%); 39 | border-radius: 5px 5px 0 0; 40 | } 41 | 42 | .popover-content { 43 | padding: 9px 14px; 44 | } 45 | 46 | // Arrows 47 | // 48 | // .arrow is outer, .arrow:after is inner 49 | 50 | .popover .arrow { 51 | &, 52 | &:after { 53 | position: absolute; 54 | display: block; 55 | width: 0; 56 | height: 0; 57 | border-color: transparent; 58 | border-style: solid; 59 | } 60 | } 61 | .popover .arrow { 62 | border-width: @popover-arrow-outer-width; 63 | } 64 | .popover .arrow:after { 65 | border-width: @popover-arrow-width; 66 | content: ""; 67 | } 68 | 69 | .popover { 70 | &.top .arrow { 71 | left: 50%; 72 | margin-left: -@popover-arrow-outer-width; 73 | border-bottom-width: 0; 74 | border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback 75 | border-top-color: @popover-arrow-outer-color; 76 | bottom: -@popover-arrow-outer-width; 77 | &:after { 78 | content: " "; 79 | bottom: 1px; 80 | margin-left: -@popover-arrow-width; 81 | border-bottom-width: 0; 82 | border-top-color: @popover-arrow-color; 83 | } 84 | } 85 | &.right .arrow { 86 | top: 50%; 87 | left: -@popover-arrow-outer-width; 88 | margin-top: -@popover-arrow-outer-width; 89 | border-left-width: 0; 90 | border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback 91 | border-right-color: @popover-arrow-outer-color; 92 | &:after { 93 | content: " "; 94 | left: 1px; 95 | bottom: -@popover-arrow-width; 96 | border-left-width: 0; 97 | border-right-color: @popover-arrow-color; 98 | } 99 | } 100 | &.bottom .arrow { 101 | left: 50%; 102 | margin-left: -@popover-arrow-outer-width; 103 | border-top-width: 0; 104 | border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback 105 | border-bottom-color: @popover-arrow-outer-color; 106 | top: -@popover-arrow-outer-width; 107 | &:after { 108 | content: " "; 109 | top: 1px; 110 | margin-left: -@popover-arrow-width; 111 | border-top-width: 0; 112 | border-bottom-color: @popover-arrow-color; 113 | } 114 | } 115 | 116 | &.left .arrow { 117 | top: 50%; 118 | right: -@popover-arrow-outer-width; 119 | margin-top: -@popover-arrow-outer-width; 120 | border-right-width: 0; 121 | border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback 122 | border-left-color: @popover-arrow-outer-color; 123 | &:after { 124 | content: " "; 125 | right: 1px; 126 | border-right-width: 0; 127 | border-left-color: @popover-arrow-color; 128 | bottom: -@popover-arrow-width; 129 | } 130 | } 131 | 132 | } 133 | -------------------------------------------------------------------------------- /styles/bootstrap/input-groups.less: -------------------------------------------------------------------------------- 1 | // 2 | // Input groups 3 | // -------------------------------------------------- 4 | 5 | // Base styles 6 | // ------------------------- 7 | .input-group { 8 | position: relative; // For dropdowns 9 | display: table; 10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table 11 | 12 | // Undo padding and float of grid classes 13 | &.col { 14 | float: none; 15 | padding-left: 0; 16 | padding-right: 0; 17 | } 18 | 19 | .form-control { 20 | width: 100%; 21 | margin-bottom: 0; 22 | } 23 | } 24 | 25 | // Sizing options 26 | // 27 | // Remix the default form control sizing classes into new ones for easier 28 | // manipulation. 29 | 30 | .input-group-lg > .form-control, 31 | .input-group-lg > .input-group-addon, 32 | .input-group-lg > .input-group-btn > .btn { .input-lg(); } 33 | .input-group-sm > .form-control, 34 | .input-group-sm > .input-group-addon, 35 | .input-group-sm > .input-group-btn > .btn { .input-sm(); } 36 | 37 | 38 | // Display as table-cell 39 | // ------------------------- 40 | .input-group-addon, 41 | .input-group-btn, 42 | .input-group .form-control { 43 | display: table-cell; 44 | 45 | &:not(:first-child):not(:last-child) { 46 | border-radius: 0; 47 | } 48 | } 49 | // Addon and addon wrapper for buttons 50 | .input-group-addon, 51 | .input-group-btn { 52 | width: 1%; 53 | white-space: nowrap; 54 | vertical-align: middle; // Match the inputs 55 | } 56 | 57 | // Text input groups 58 | // ------------------------- 59 | .input-group-addon { 60 | padding: @padding-base-vertical @padding-base-horizontal; 61 | font-size: @font-size-base; 62 | font-weight: normal; 63 | line-height: 1; 64 | color: @input-color; 65 | text-align: center; 66 | background-color: @input-group-addon-bg; 67 | border: 1px solid @input-group-addon-border-color; 68 | border-radius: @border-radius-base; 69 | 70 | // Sizing 71 | &.input-sm { 72 | padding: @padding-small-vertical @padding-small-horizontal; 73 | font-size: @font-size-small; 74 | border-radius: @border-radius-small; 75 | } 76 | &.input-lg { 77 | padding: @padding-large-vertical @padding-large-horizontal; 78 | font-size: @font-size-large; 79 | border-radius: @border-radius-large; 80 | } 81 | 82 | // Nuke default margins from checkboxes and radios to vertically center within. 83 | input[type="radio"], 84 | input[type="checkbox"] { 85 | margin-top: 0; 86 | } 87 | } 88 | 89 | // Reset rounded corners 90 | .input-group .form-control:first-child, 91 | .input-group-addon:first-child, 92 | .input-group-btn:first-child > .btn, 93 | .input-group-btn:first-child > .dropdown-toggle, 94 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 95 | .border-right-radius(0); 96 | } 97 | .input-group-addon:first-child { 98 | border-right: 0; 99 | } 100 | .input-group .form-control:last-child, 101 | .input-group-addon:last-child, 102 | .input-group-btn:last-child > .btn, 103 | .input-group-btn:last-child > .dropdown-toggle, 104 | .input-group-btn:first-child > .btn:not(:first-child) { 105 | .border-left-radius(0); 106 | } 107 | .input-group-addon:last-child { 108 | border-left: 0; 109 | } 110 | 111 | // Button input groups 112 | // ------------------------- 113 | .input-group-btn { 114 | position: relative; 115 | white-space: nowrap; 116 | 117 | // Negative margin to only have a 1px border between the two 118 | &:first-child > .btn { 119 | margin-right: -1px; 120 | } 121 | &:last-child > .btn { 122 | margin-left: -1px; 123 | } 124 | } 125 | .input-group-btn > .btn { 126 | position: relative; 127 | // Jankily prevent input button groups from wrapping 128 | + .btn { 129 | margin-left: -4px; 130 | } 131 | // Bring the "active" button to the front 132 | &:hover, 133 | &:active { 134 | z-index: 2; 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /data/less.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less", 3 | "version": "4.1.3", 4 | "description": "Leaner CSS", 5 | "homepage": "http://lesscss.org", 6 | "author": { 7 | "name": "Alexis Sellier", 8 | "email": "self@cloudhead.net" 9 | }, 10 | "contributors": [ 11 | "The Core Less Team" 12 | ], 13 | "bugs": { 14 | "url": "https://github.com/less/less.js/issues" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/less/less.js.git" 19 | }, 20 | "master": { 21 | "url": "https://github.com/less/less.js/blob/master/", 22 | "raw": "https://raw.githubusercontent.com/less/less.js/master/" 23 | }, 24 | "license": "Apache-2.0", 25 | "bin": { 26 | "lessc": "./bin/lessc" 27 | }, 28 | "main": "index", 29 | "module": "./lib/less-node/index", 30 | "directories": { 31 | "test": "./test" 32 | }, 33 | "browser": "./dist/less.js", 34 | "engines": { 35 | "node": ">=6" 36 | }, 37 | "scripts": { 38 | "test": "grunt test", 39 | "grunt": "grunt", 40 | "lint": "eslint '**/*.{ts,js}'", 41 | "lint:fix": "eslint '**/*.{ts,js}' --fix", 42 | "build": "npm-run-all clean compile", 43 | "clean": "shx rm -rf ./lib tsconfig.tsbuildinfo", 44 | "compile": "tsc -p tsconfig.build.json", 45 | "copy:root": "shx cp -rf ./dist ../../", 46 | "dev": "tsc -p tsconfig.build.json -w", 47 | "prepublishOnly": "grunt dist" 48 | }, 49 | "optionalDependencies": { 50 | "errno": "^0.1.1", 51 | "graceful-fs": "^4.1.2", 52 | "image-size": "~0.5.0", 53 | "make-dir": "^2.1.0", 54 | "mime": "^1.4.1", 55 | "needle": "^3.1.0", 56 | "source-map": "~0.6.0" 57 | }, 58 | "devDependencies": { 59 | "@less/test-data": "^4.1.0", 60 | "@less/test-import-module": "^4.0.0", 61 | "@rollup/plugin-commonjs": "^17.0.0", 62 | "@rollup/plugin-json": "^4.1.0", 63 | "@rollup/plugin-node-resolve": "^11.0.0", 64 | "@typescript-eslint/eslint-plugin": "^4.28.0", 65 | "@typescript-eslint/parser": "^4.28.0", 66 | "benny": "^3.6.12", 67 | "bootstrap-less-port": "0.3.0", 68 | "chai": "^4.2.0", 69 | "cross-env": "^7.0.3", 70 | "diff": "^3.2.0", 71 | "eslint": "^7.29.0", 72 | "fs-extra": "^8.1.0", 73 | "git-rev": "^0.2.1", 74 | "globby": "^10.0.1", 75 | "grunt": "^1.0.4", 76 | "grunt-cli": "^1.3.2", 77 | "grunt-contrib-clean": "^1.0.0", 78 | "grunt-contrib-connect": "^1.0.2", 79 | "grunt-eslint": "^23.0.0", 80 | "grunt-saucelabs": "^9.0.1", 81 | "grunt-shell": "^1.3.0", 82 | "html-template-tag": "^3.2.0", 83 | "jit-grunt": "^0.10.0", 84 | "less-plugin-autoprefix": "^1.5.1", 85 | "less-plugin-clean-css": "^1.5.1", 86 | "minimist": "^1.2.0", 87 | "mocha": "^6.2.1", 88 | "mocha-headless-chrome": "^4.0.0", 89 | "mocha-teamcity-reporter": "^3.0.0", 90 | "nock": "^11.8.2", 91 | "npm-run-all": "^4.1.5", 92 | "performance-now": "^0.2.0", 93 | "phin": "^2.2.3", 94 | "promise": "^7.1.1", 95 | "read-glob": "^3.0.0", 96 | "resolve": "^1.17.0", 97 | "rollup": "^2.52.2", 98 | "rollup-plugin-terser": "^5.1.1", 99 | "rollup-plugin-typescript2": "^0.29.0", 100 | "semver": "^6.3.0", 101 | "shx": "^0.3.2", 102 | "time-grunt": "^1.3.0", 103 | "ts-node": "^9.1.1", 104 | "typescript": "^4.3.4", 105 | "uikit": "2.27.4" 106 | }, 107 | "keywords": [ 108 | "compile less", 109 | "css nesting", 110 | "css variable", 111 | "css", 112 | "gradients css", 113 | "gradients css3", 114 | "less compiler", 115 | "less css", 116 | "less mixins", 117 | "less", 118 | "less.js", 119 | "lesscss", 120 | "mixins", 121 | "nested css", 122 | "parser", 123 | "preprocessor", 124 | "bootstrap css", 125 | "bootstrap less", 126 | "style", 127 | "styles", 128 | "stylesheet", 129 | "variables in css", 130 | "css less" 131 | ], 132 | "rawcurrent": "https://raw.github.com/less/less.js/v", 133 | "sourcearchive": "https://github.com/less/less.js/archive/v", 134 | "dependencies": { 135 | "copy-anything": "^2.0.1", 136 | "parse-node-version": "^1.0.1", 137 | "tslib": "^2.3.0" 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /templates/includes/nav-main.hbs: -------------------------------------------------------------------------------- 1 | 130 | -------------------------------------------------------------------------------- /content/features/mixins.md: -------------------------------------------------------------------------------- 1 | > "mix-in" properties from existing styles 2 | 3 | You can mix-in class selectors and id selectors, e.g. 4 | 5 | ```less 6 | .a, #b { 7 | color: red; 8 | } 9 | .mixin-class { 10 | .a(); 11 | } 12 | .mixin-id { 13 | #b(); 14 | } 15 | ``` 16 | which results in: 17 | ```css 18 | .a, #b { 19 | color: red; 20 | } 21 | .mixin-class { 22 | color: red; 23 | } 24 | .mixin-id { 25 | color: red; 26 | } 27 | ``` 28 | 29 | Historically, the parentheses in a mixin call are optional, but optional parentheses are deprecated and will be required in a future release. 30 | 31 | ```less 32 | .a(); 33 | .a; // currently works, but deprecated; don't use 34 | .a (); // white-space before parentheses is also deprecated 35 | ``` 36 | 37 | ## Mixins With Parentheses 38 | 39 | If you want to create a mixin but you do not want that mixin to be in your CSS output, put parentheses after the mixin definition. 40 | 41 | ```less 42 | .my-mixin { 43 | color: black; 44 | } 45 | .my-other-mixin() { 46 | background: white; 47 | } 48 | .class { 49 | .my-mixin(); 50 | .my-other-mixin(); 51 | } 52 | ``` 53 | outputs 54 | 55 | ```css 56 | .my-mixin { 57 | color: black; 58 | } 59 | .class { 60 | color: black; 61 | background: white; 62 | } 63 | ``` 64 | 65 | ## Selectors in Mixins 66 | 67 | Mixins can contain more than just properties, they can contain selectors too. 68 | 69 | For example: 70 | 71 | ```less 72 | .my-hover-mixin() { 73 | &:hover { 74 | border: 1px solid red; 75 | } 76 | } 77 | button { 78 | .my-hover-mixin(); 79 | } 80 | ``` 81 | 82 | Outputs 83 | 84 | ```css 85 | button:hover { 86 | border: 1px solid red; 87 | } 88 | ``` 89 | 90 | ## Namespaces 91 | 92 | If you want to mixin properties inside a more complicated selector, you can stack up multiple ids or classes. 93 | 94 | ```less 95 | #outer() { 96 | .inner { 97 | color: red; 98 | } 99 | } 100 | 101 | .c { 102 | #outer.inner(); 103 | } 104 | ``` 105 | 106 | Note: legacy Less syntax allows `>` and whitespace between namespaces and mixins. This syntax is deprecated and may be removed. Currently, these do the same thing. 107 | 108 | ```less 109 | #outer > .inner(); // deprecated 110 | #outer .inner(); // deprecated 111 | #outer.inner(); // preferred 112 | ``` 113 | 114 | Namespacing your mixins like this reduces conflicts with other library mixins or user mixins, but can also be a way to "organize" groups of mixins. 115 | 116 | Example: 117 | 118 | ```less 119 | #my-library { 120 | .my-mixin() { 121 | color: black; 122 | } 123 | } 124 | // which can be used like this 125 | .class { 126 | #my-library.my-mixin(); 127 | } 128 | ``` 129 | 130 | ## Guarded Namespaces 131 | 132 | If a namespace has a guard, mixins defined by it are used only if the guard condition returns true. A namespace guard is evaluated exactly the same as a guard on a mixin, so the following two mixins work the same way: 133 | 134 | ```less 135 | #namespace when (@mode = huge) { 136 | .mixin() { /* */ } 137 | } 138 | 139 | #namespace { 140 | .mixin() when (@mode = huge) { /* */ } 141 | } 142 | ``` 143 | 144 | The `default` function is assumed to have the same value for all nested namespaces and mixin. The following mixin is never evaluated; one of its guards is guaranteed to be false: 145 | 146 | ```less 147 | #sp_1 when (default()) { 148 | #sp_2 when (default()) { 149 | .mixin() when not(default()) { /* */ } 150 | } 151 | } 152 | ``` 153 | 154 | ## The `!important` keyword 155 | 156 | Use the `!important` keyword after mixin call to mark all properties inherited by it as `!important`: 157 | 158 | Example: 159 | 160 | ```less 161 | .foo (@bg: #f5f5f5, @color: #900) { 162 | background: @bg; 163 | color: @color; 164 | } 165 | .unimportant { 166 | .foo(); 167 | } 168 | .important { 169 | .foo() !important; 170 | } 171 | ``` 172 | 173 | Results in: 174 | 175 | ```css 176 | .unimportant { 177 | background: #f5f5f5; 178 | color: #900; 179 | } 180 | .important { 181 | background: #f5f5f5 !important; 182 | color: #900 !important; 183 | } 184 | ``` 185 | -------------------------------------------------------------------------------- /styles/components/ad.less: -------------------------------------------------------------------------------- 1 | // 2 | // Ads 3 | // -------------------------------------------------- 4 | 5 | #carbonads { 6 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, 7 | Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 8 | } 9 | 10 | #carbonads { 11 | display: flex; 12 | max-width: 330px; 13 | background-color: hsl(0, 0%, 98%); 14 | box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2); 15 | margin: 1em; 16 | } 17 | 18 | #carbonads a { 19 | color: inherit; 20 | text-decoration: none; 21 | } 22 | 23 | #carbonads a:hover { 24 | color: inherit; 25 | } 26 | 27 | #carbonads span { 28 | position: relative; 29 | display: block; 30 | overflow: hidden; 31 | } 32 | 33 | #carbonads .carbon-wrap { 34 | display: flex; 35 | } 36 | 37 | .carbon-img { 38 | display: block; 39 | margin: 0; 40 | line-height: 1; 41 | } 42 | 43 | .carbon-img img { 44 | display: block; 45 | } 46 | 47 | .carbon-text { 48 | font-size: 13px; 49 | padding: 10px; 50 | line-height: 1.5; 51 | text-align: left; 52 | } 53 | 54 | .carbon-poweredby { 55 | display: block; 56 | padding: 8px 10px; 57 | background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); 58 | text-align: center; 59 | text-transform: uppercase; 60 | letter-spacing: .5px; 61 | font-weight: 600; 62 | font-size: 9px; 63 | line-height: 1; 64 | } 65 | 66 | /* 67 | * Advertisement that shows on all pages (except homepage) in page headers. 68 | * `!important` is required for any pre-set property. 69 | */ 70 | .ad { 71 | width: auto !important; 72 | margin: 50px -30px -40px !important; 73 | padding: 20px !important; 74 | overflow: hidden; /* clearfix */ 75 | height: auto !important; 76 | font-size: 13px !important; 77 | line-height: 16px !important; 78 | text-align: left; 79 | background: darken(@navbar-inverse-bg, 5%) !important; 80 | border: 0 !important; 81 | box-shadow: inset 0 3px 5px rgba(0,0,0,.075); 82 | } 83 | .ad-img { 84 | margin: 0 !important; 85 | } 86 | .ad-text, 87 | .ad-tag { 88 | float: none !important; 89 | display: block !important; 90 | width: auto !important; 91 | height: auto !important; 92 | margin-left: 145px !important; 93 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; 94 | } 95 | .ad-text { 96 | padding-top: 0 !important; 97 | } 98 | .ad-tag { 99 | color: @navbar-inverse-color !important; 100 | text-align: left !important; 101 | } 102 | .ad-text a, 103 | .ad-tag a { 104 | color: #fff !important; 105 | } 106 | .ad #adsense > img { 107 | display: none; /* hide what I assume are tracking images */ 108 | } 109 | 110 | @media (min-width: 768px) { 111 | .ad { 112 | margin: 0 !important; 113 | border-radius: 4px; 114 | box-shadow: inset 0 3px 5px rgba(0,0,0,.075), 0 1px 0 rgba(255,255,255,.1); 115 | } 116 | } 117 | 118 | @media (min-width: 992px) { 119 | .ad { 120 | position: absolute; 121 | top: 20px; 122 | right: 15px; /* 15px instead of 0 since box-sizing */ 123 | padding: 15px !important; 124 | width: 330px !important; 125 | } 126 | } 127 | 128 | /* Homepage variations */ 129 | .docs-home .ad { 130 | margin: 0 -15px 40px !important; 131 | } 132 | @media (min-width: 480px) { 133 | .docs-home .ad { 134 | width: 330px !important; 135 | margin: 0 auto 40px !important; 136 | border-radius: 4px; 137 | } 138 | } 139 | @media (min-width: 768px) { 140 | .docs-home .ad { 141 | float: left; 142 | width: 330px !important; 143 | margin: 0 0 30px !important; 144 | } 145 | .docs-home .bs-social, 146 | .docs-home .bs-masthead-links { 147 | margin-left: 350px; 148 | } 149 | .docs-home .bs-social { 150 | margin-bottom: 10px; 151 | } 152 | .docs-home .bs-masthead-links { 153 | margin-top: 10px; 154 | } 155 | } 156 | @media (min-width: 992px) { 157 | .docs-home .ad { 158 | position: static; 159 | } 160 | } 161 | @media (min-width: 1170px) { 162 | .docs-home .ad { 163 | margin-top: -25px !important; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /content/features/mixins-as-functions.md: -------------------------------------------------------------------------------- 1 | > Selecting properties and variables from mixin calls 2 | 3 | #### Property / value accessors 4 | 5 | _Released [v3.5.0]({{ less.master.url }}CHANGELOG.md)_ 6 | 7 | Starting in Less 3.5, you can use property/variable accessors to select a value from an evaluated mixin's rules. This can allow you to use mixins similar to functions. 8 | 9 | Example: 10 | 11 | ```less 12 | .average(@x, @y) { 13 | @result: ((@x + @y) / 2); 14 | } 15 | 16 | div { 17 | // call a mixin and look up its "@result" value 18 | padding: .average(16px, 50px)[@result]; 19 | } 20 | ``` 21 | 22 | Results in: 23 | 24 | ```css 25 | div { 26 | padding: 33px; 27 | } 28 | ``` 29 | 30 | #### Overriding mixin values 31 | 32 | If you have multiple matching mixins, all rules are evaluated and merged, and the last matching value with that identifier is returned. This is similar to the cascade in CSS, and it allows you to "override" mixin values. 33 | 34 | ```less 35 | // library.less 36 | #library() { 37 | .mixin() { 38 | prop: foo; 39 | } 40 | } 41 | 42 | // customize.less 43 | @import "library"; 44 | #library() { 45 | .mixin() { 46 | prop: bar; 47 | } 48 | } 49 | 50 | .box { 51 | my-value: #library.mixin[prop]; 52 | } 53 | ``` 54 | Outputs: 55 | ```css 56 | .box { 57 | my-value: bar; 58 | } 59 | ``` 60 | 61 | #### Unnamed lookups 62 | 63 | If you don't specify a lookup value in `[@lookup]` and instead write `[]` after a mixin or ruleset call, _all_ values will cascade and the last declared value will be selected. 64 | 65 | Meaning: the averaging mixin from the above example could be written as: 66 | ```less 67 | .average(@x, @y) { 68 | @result: ((@x + @y) / 2); 69 | } 70 | 71 | div { 72 | // call a mixin and look up its final value 73 | padding: .average(16px, 50px)[]; 74 | } 75 | ``` 76 | The output is the same: 77 | ```css 78 | div { 79 | padding: 33px; 80 | } 81 | ``` 82 | 83 | The same cascading behavior is true for rulesets or variables aliased to mixin calls. 84 | ```less 85 | @dr: { 86 | value: foo; 87 | } 88 | .box { 89 | my-value: @dr[]; 90 | } 91 | ``` 92 | This outputs: 93 | ```css 94 | .box { 95 | my-value: foo; 96 | } 97 | ``` 98 | 99 | 100 | #### Unlocking mixins & variables into caller scope 101 | 102 | ***DEPRECATED - Use Property / Value Accessors*** 103 | 104 | Variables and mixins defined in a mixin are visible and can be used in caller's scope. There is only one exception: a variable is not copied if the caller contains a variable with the same name (that includes variables defined by another mixin call). Only variables present in callers local scope are protected. Variables inherited from parent scopes are overridden. 105 | 106 | _Note: this behavior is deprecated, and in the future, variables and mixins will not be merged into the caller scope in this way._ 107 | 108 | Example: 109 | 110 | ```less 111 | .mixin() { 112 | @width: 100%; 113 | @height: 200px; 114 | } 115 | 116 | .caller { 117 | .mixin(); 118 | width: @width; 119 | height: @height; 120 | } 121 | 122 | ``` 123 | Results in: 124 | 125 | ```css 126 | .caller { 127 | width: 100%; 128 | height: 200px; 129 | } 130 | ``` 131 | 132 | Variables defined directly in callers scope cannot be overridden. However, variables defined in callers parent scope is not protected and will be overridden: 133 | ````less 134 | .mixin() { 135 | @size: in-mixin; 136 | @definedOnlyInMixin: in-mixin; 137 | } 138 | 139 | .class { 140 | margin: @size @definedOnlyInMixin; 141 | .mixin(); 142 | } 143 | 144 | @size: globaly-defined-value; // callers parent scope - no protection 145 | ```` 146 | 147 | Results in: 148 | ````css 149 | .class { 150 | margin: in-mixin in-mixin; 151 | } 152 | ```` 153 | 154 | Finally, mixin defined in mixin acts as return value too: 155 | ````less 156 | .unlock(@value) { // outer mixin 157 | .doSomething() { // nested mixin 158 | declaration: @value; 159 | } 160 | } 161 | 162 | #namespace { 163 | .unlock(5); // unlock doSomething mixin 164 | .doSomething(); //nested mixin was copied here and is usable 165 | } 166 | ```` 167 | 168 | Results in: 169 | ````css 170 | #namespace { 171 | declaration: 5; 172 | } 173 | ```` 174 | --------------------------------------------------------------------------------