Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added @media bubbling/nesting/merging (similar to SASS) #634

Merged
merged 8 commits into from

4 participants

@sirlantis

Also mentioned in #286 and #152. It would be nice if the following conversion could be made by Less:

#a {
  @media screen { ... }
}
@media screen {
  #a { ... }
}

This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet (quoted from SASS reference).

In 936ab7d I separated Media from Directive and added an algorithm which merges media-queries (also similar to SASS).

@media a, b and c {
  @media x, y { ... }
}
@media a and x, b and c and x, a and y, b and c and y { ... }

Note: A nested media-query will always be forced after the top-level media-query. In the following example the header AND the footer will be black iff a and b.

@media a {
   footer { color: white; }

  @media b {
    header { color: black }
    footer { color: black; }
  }

  header { color: white; }
}
@joeldrapper

@sirlantis That looks really useful. I'm looking forward to using this.

@sirlantis

Updated pull-request description to include infos on the last two commits (which add media-query condition merging).

@sirlantis

Note: Using nested @media in mixins doesn't work correctly right now. Taking a look into that tomorrow.

@cloudhead
Owner

Very cool.

@alexpeattie

+1, very useful

@cloudhead cloudhead merged commit 2723c4e into from
@SomMeri SomMeri referenced this pull request in SomMeri/less4j
Closed

Media queries #42

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 14, 2012
  1. @sirlantis
  2. @sirlantis
Commits on Feb 15, 2012
  1. @sirlantis

    fixed double-space

    sirlantis authored
Commits on Feb 16, 2012
  1. @sirlantis

    moved @media code to own file

    sirlantis authored
Commits on Feb 17, 2012
  1. @sirlantis
  2. @sirlantis
  3. @sirlantis
  4. @sirlantis
This page is out of date. Refresh to see the latest.
View
3  lib/less/index.js
@@ -82,7 +82,8 @@ var less = {
'selector', 'quoted', 'expression', 'rule',
'call', 'url', 'alpha', 'import',
'mixin', 'comment', 'anonymous', 'value',
- 'javascript', 'assignment', 'condition', 'paren'
+ 'javascript', 'assignment', 'condition', 'paren',
+ 'media'
].forEach(function (n) {
require('./tree/' + n);
});
View
2  lib/less/parser.js
@@ -1089,7 +1089,7 @@ less.Parser = function Parser(env) {
features = $(this.mediaFeatures);
if (rules = $(this.block)) {
- return new(tree.Directive)('@media', rules, features);
+ return new(tree.Media)(rules, features);
}
}
},
View
6 lib/less/tree/directive.js
@@ -2,7 +2,6 @@
tree.Directive = function (name, value, features) {
this.name = name;
- this.features = features && new(tree.Value)(features);
if (Array.isArray(value)) {
this.ruleset = new(tree.Ruleset)([], value);
@@ -13,11 +12,9 @@ tree.Directive = function (name, value, features) {
};
tree.Directive.prototype = {
toCSS: function (ctx, env) {
- var features = this.features ? ' ' + this.features.toCSS(env) : '';
-
if (this.ruleset) {
this.ruleset.root = true;
- return this.name + features + (env.compress ? '{' : ' {\n ') +
+ return this.name + (env.compress ? '{' : ' {\n ') +
this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n ') +
(env.compress ? '}': '\n}\n');
} else {
@@ -25,7 +22,6 @@ tree.Directive.prototype = {
}
},
eval: function (env) {
- this.features = this.features && this.features.eval(env);
env.frames.unshift(this);
this.ruleset = this.ruleset && this.ruleset.eval(env);
env.frames.shift();
View
2  lib/less/tree/import.js
@@ -71,7 +71,7 @@ tree.Import.prototype = {
[i, 1].concat(ruleset.rules[i].eval(env)));
}
}
- return this.features ? new(tree.Directive)('@media', ruleset.rules, this.features.value) : ruleset.rules;
+ return this.features ? new(tree.Media)(ruleset.rules, this.features.value) : ruleset.rules;
}
}
};
View
114 lib/less/tree/media.js
@@ -0,0 +1,114 @@
+(function (tree) {
+
+tree.Media = function (value, features) {
+ var el = new(tree.Element)('&', null, 0),
+ selectors = [new(tree.Selector)([el])];
+
+ this.features = new(tree.Value)(features);
+ this.ruleset = new(tree.Ruleset)(selectors, value);
+ this.ruleset.allowImports = true;
+};
+tree.Media.prototype = {
+ toCSS: function (ctx, env) {
+ var features = this.features.toCSS(env);
+
+ this.ruleset.root = (ctx.length === 0 || ctx[0].multiMedia);
+ return '@media ' + features + (env.compress ? '{' : ' {\n ') +
+ this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n ') +
+ (env.compress ? '}': '\n}\n');
+ },
+ eval: function (env) {
+ if (!env.mediaBlocks) {
+ env.mediaBlocks = [];
+ env.mediaPath = [];
+ }
+
+ var blockIndex = env.mediaBlocks.length;
+ env.mediaPath.push(this);
+ env.mediaBlocks.push(this);
+
+ var media = new(tree.Media)([], []);
+ media.features = this.features.eval(env);
+
+ env.frames.unshift(this.ruleset);
+ media.ruleset = this.ruleset.eval(env);
+ env.frames.shift();
+
+ env.mediaBlocks[blockIndex] = media;
+ env.mediaPath.pop();
+
+ return env.mediaPath.length === 0 ? media.evalTop(env) :
+ media.evalNested(env)
+ },
+ variable: function (name) { return tree.Ruleset.prototype.variable.call(this.ruleset, name) },
+ find: function () { return tree.Ruleset.prototype.find.apply(this.ruleset, arguments) },
+ rulesets: function () { return tree.Ruleset.prototype.rulesets.apply(this.ruleset) },
+
+ evalTop: function (env) {
+ var result = this;
+
+ // Render all dependent Media blocks.
+ if (env.mediaBlocks.length > 1) {
+ var el = new(tree.Element)('&', null, 0);
+ var selectors = [new(tree.Selector)([el])];
+ result = new(tree.Ruleset)(selectors, env.mediaBlocks);
+ result.multiMedia = true;
+ }
+
+ delete env.mediaBlocks;
+ delete env.mediaPath;
+
+ return result;
+ },
+ evalNested: function (env) {
+ var i, value,
+ path = env.mediaPath.concat([this]);
+
+ // Extract the media-query conditions separated with `,` (OR).
+ for (i = 0; i < path.length; i++) {
+ value = path[i].features instanceof tree.Value ?
+ path[i].features.value : path[i].features;
+ path[i] = Array.isArray(value) ? value : [value];
+ }
+
+ // Trace all permutations to generate the resulting media-query.
+ //
+ // (a, b and c) with nested (d, e) ->
+ // a and d
+ // a and e
+ // b and c and d
+ // b and c and e
+ this.features = new(tree.Value)(this.permute(path).map(function (path) {
+ path = path.map(function (fragment) {
+ return fragment.toCSS ? fragment : new(tree.Anonymous)(fragment);
+ });
+
+ for(i = path.length - 1; i > 0; i--) {
+ path.splice(i, 0, new(tree.Anonymous)("and"));
+ }
+
+ return new(tree.Expression)(path);
+ }));
+
+ // Fake a tree-node that doesn't output anything.
+ return new(tree.Ruleset)([], []);
+ },
+ permute: function (arr) {
+ if (arr.length === 0) {
+ return [];
+ } else if (arr.length === 1) {
+ return arr[0];
+ } else {
+ var result = [];
+ var rest = this.permute(arr.slice(1));
+ for (var i = 0; i < rest.length; i++) {
+ for (var j = 0; j < arr[0].length; j++) {
+ result.push([arr[0][j]].concat(rest[i]));
+ }
+ }
+ return result;
+ }
+ }
+};
+
+})(require('../tree'));
View
2  lib/less/tree/ruleset.js
@@ -130,7 +130,7 @@ tree.Ruleset.prototype = {
for (var i = 0; i < this.rules.length; i++) {
rule = this.rules[i];
- if (rule.rules || (rule instanceof tree.Directive)) {
+ if (rule.rules || (rule instanceof tree.Directive) || (rule instanceof tree.Media)) {
rulesets.push(rule.toCSS(paths, env));
} else if (rule instanceof tree.Comment) {
if (!rule.silent) {
View
49 test/css/media.css
@@ -25,3 +25,52 @@
max-width: 480px;
}
}
+@media print {
+ body {
+ padding: 20px;
+ }
+ body header {
+ background-color: red;
+ }
+}
+@media print and (orientation: landscape) {
+ body {
+ margin-left: 20px;
+ }
+}
+@media a, b and c {
+ body {
+ width: 95%;
+ }
+}
+@media a and x, b and c and x, a and y, b and c and y {
+ body {
+ width: 100%;
+ }
+}
+.a {
+ background: black;
+}
+@media handheld {
+ .a {
+ background: white;
+ }
+}
+@media handheld and (max-width: 100px) {
+ .a {
+ background: red;
+ }
+}
+.b {
+ background: black;
+}
+@media handheld {
+ .b {
+ background: white;
+ }
+}
+@media handheld and (max-width: 200px) {
+ .b {
+ background: red;
+ }
+}
View
46 test/less/media.less
@@ -5,7 +5,7 @@
@media print {
.class {
- color: blue;
+ color: blue;
.sub {
width: @var;
}
@@ -29,3 +29,47 @@
max-width: 480px;
}
}
+
+body {
+ @media print {
+ padding: 20px;
+
+ header {
+ background-color: red;
+ }
+
+ @media (orientation:landscape) {
+ margin-left: 20px;
+ }
+ }
+}
+
+body {
+ @media a, b and c {
+ width: 95%;
+
+ @media x, y {
+ width: 100%;
+ }
+ }
+}
+
+.mediaMixin(@fallback: 200px) {
+ background: black;
+
+ @media handheld {
+ background: white;
+
+ @media (max-width: @fallback) {
+ background: red;
+ }
+ }
+}
+
+.a {
+ .mediaMixin(100px);
+}
+
+.b {
+ .mediaMixin();
+}
Something went wrong with that request. Please try again.