CODEWITHSUNDEEP
cssless
Wei Ma
Wei Ma

Reputation: 3165

difference in id selector and namespace in less

I am trying to learn less to reduce the pain of repetitive css. One thing that confuses me is the syntax of namespace in less. To my understanding, less is compatible with css, therefore 

#myelement-id{}

is an id selector. On the other hand, less supports namespace by specifying 

#namespace{}

So, when I read a less file, how can I tell which "#" is for id selector and which is for namespace?

Thanks for your help.

Upvotes: 1

Views: 5937

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

More over, there's no difference even between a mixin and a namespace. A namespace can also be parametric (though parametric namespaces have some unusual properties/side-effects that make them differ from non-parametric namespaces). See for example #1205, #1316, #1525.

Basically, LESS namespace is just any ruleset that contains another ruleset(s). It's more like a logical concept/convention, not a language construction.

Upvotes: 1

ScottS
ScottS

Reputation: 72271

There is no difference. A #id or .class can be used as a namespace call to access its other classes or mixins. To make it different, you need to make it a mixin. So either of these is valid:

#namespace {
  .test {
    prop: 1;
  }
}

#namespace() {
  .test {
    prop: 1;
  }
}

The first will produce css output as an id selector, the second will not. But either can access the nested values, so either of these work inside a selector block to access the .test class via this:

.class {
  #namespace > .test;
}

But the output will be different, as the first will be:

#namespace .test {
  prop: 1;
}
.class {
  prop: 1;
}

And the second just:

.class {
  prop: 1;
}

Upvotes: 5

Related Questions