Selector as Minix: tag.class

[vicctor]

I'm trying to extend my class by bootstrap class input.search-query like this:

serch-form #search-input {

.input-xxlarge();
input.search-query();
}

Bootstrap file forms.less has this rule defined as:

input.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // Remove the default margin on all inputs
.border-radius(15px);
}

When compiling my less scrip compiler reports a syntax erro in line input.search-query();

Suppose the problem is related to the way how the rule was declared in the forms.less file.
I can not find any approach how to include this kind of rules into my final rule.

[SomMeri]

The problem is that the input.search-query is not a class - it is selector that matches an input tag with .search-query class. Only classes and ids can be used as a mixin.

You have to use new extends feature instead. Extend inside ruleset means: take my selector and add it to the other ruleset.

For example:

input.search-query {
  padding-right: 14px;
}

#serch-form #search-input {
  &:extend(input.search-query); \\ extend the other ruleset
  other: declarations;
}

would produce this:

input.search-query,
#serch-form #search-input { \\ extended selector
  padding-right: 14px;
}
#serch-form #search-input {
  other: declarations;
}

If the above solution does not help you, you can lobby for "general purpose CSS Selector as a mixin" issue #1048 .

[vicctor]

Yea! Thanks. This solves my problem. Going to check it out.

[SomMeri]

You are welcome, I'm closing this issue then.

[vicctor]

Thx. This works for me. I just changed the name of the issue so one who will find the same problem as me will have better chance to find the solution as well.