In CSS, is there a way to use a class as a property? As in the first line below:
h1 { class = big }
.big { font-size: 25px; }
.small { font-size: 10px; }
The goal being to easily change the h1 styling by replacing "big" with "small" in the first line of code.
You can use less, sass, stylus or something similar.
With those you can easily do that.
No is posible H1 => references an html tag
Related
I have the following HTML:
wide button
narrow button
I've tried using an attribute selector and combining it with the button class but it doesn't work as expected.
.button.[class*="large-"] {
font-size: 0.9em;
}
Am I using this correctly and if not, how?
You don't need the second period, unlike JavaScript the [class*="large-"] isn't compiled to return the found-string, it's simply evaluated as-is:
.button[class*="large-"] {
font-size: 0.9em;
}
JS Fiddle demo.
You are using attribute selector using [class*="large-"] and so you don't need to use period(.) ie class selector here. Just simply write this
.button[class*="large-"] {
font-size: 0.9em;
color:red;
}
JS Fiddle Demo
.button[class*="large-"] {
font-size: 0.9em;
}
wide button
narrow button
narrow button
narrow button
this seems to work
Try this:
a.button[class*=large] {
font-size: 0.9em;
}
I'm confused about double ampersand behaviour in LESS compiler.
Look:
.heading {
&&--type-small {
font-size: 15px;
}
}
Will be compiled to:
.heading.heading--type-small {
font-size: 15px;
}
And thats good.
But.
.wrapper {
.heading {
&&--type-small {
font-size: 15px;
}
}
}
Will produce:
.wrapper .heading.wrapper .heading--type-small {
font-size: 15px;
}
It looks weird. No?
Is there any advice to make this code works like:
.wrapper .heading.heading--type-small {
font-size: 15px;
}
Thanks =)
What happens when you use an ampersand in a nested rule is that the default nested structure gets ignored in the output selector and the ampersand acts as a placeholder for the complete list of outer selectors and will just insert all the parent rules all the way to the top of the hierarchy (the "path" for all nesting levels above) ... no way around that.
So using the first one - & will just join (concatenate) the nested selector to the whole list of outer selectors (appearing as if it just added it to the parent selector) and act as a combinator - see "Nested rules" at lescss.org. But then when you use the second ampersand - your selector will end up including all outer rules once again - the .wrapper and all rules in between will be added twice now. So, the behavior is not really strange. See also my answer to this question: "How to refer to two previous elements / tags / classes with LESS?" and for some more functionality of & see also seven-phases-max's comments below. Or find some examples of & being used as a "path" placeholder under "Advanced Usage of &" at lescss.org.
And to your concrete example:
I am not completely sure why you want to repeat the word "header" in the class name .header--type-small, if you are using it in addition to a class called .header ... I would just use additional classes such as .type-small, like so:
.wrapper {
//style for the wrapper
.heading{
//general style for the heading
&.type-small {
//style for the heading with class .type-small
font-size: 15px;
}
&.type-large {
//style for the heading with class .type-large ... and so on
}
}
}
with output CSS:
.wrapper .heading.type-small {
font-size: 15px;
}
but if you really really need the whole long string with the repeated names for some particular reason ... you could just do something like this:
.wrapper {
//style for the wrapper
.heading {
//general style for the heading
&.heading--type{
&-small {
//style for the heading with class .type-small
font-size: 15px;
}
}
}
}
with output CSS:
.wrapper .heading.heading--type-small {
font-size: 15px;
}
does anybody know a way or a tool how inheritance can be used in CSS independent of the structure of the elements?
Example:
.bg_red {
background: red;
}
.bold {
font-weight: bold;
}
.bg_red_and_bold {
//this class should inherit all the properties of the above two classes
}
I hope it is clear what I mean...
Thanks
There is no way you can do that in CSS, but since you are looking for tools as well, you might look into CSS preprocessing:
LESS
SASS
Their mixin and #extend features should do what you are looking for.
ability to add multiple classes to element is there for exactly that reason.
<div class="bg_red bold">The red and bold text</div>
There is no such thing in CSS. Only thing you can do is:
.bg_red, .bg_red_and_bold {
background: red;
}
.bold, .bg_red_and_bold {
font-weight: bold;
}
CSS does not support this.
Consider using LESS, which compiles to CSS and supports mixins:
.bg_red_and_bold {
.bg_red();
.bold();
}
Probably not what you want but there is aggregation:
<div class="bg_red bold"...
The div will "inherit" characteristics of both styles.
Is it possibile to add span3 class in a mixin to avoid putting it in every element in my HTML?
Something like:
.myclass {
.span3;
// other rules...
}
EDIT
I apologize I forgot to specify an important detail: span3 is a standard class of Bootstrap.
I didn't find its definition in any file of the Bootstrap framework.
New Answer (requires LESS 1.4.0)
What you actually desire is something known as extending in LESS and SASS terminology. For example, you want an HTML element (just an example)...
<div class="myclass"></div>
...to fully behave as if it had a span3 class from bootstrap added to it, but without actually adding that class in the HTML. This can be done in LESS 1.4.0 using :extend(), but still not easily, mainly because of the dynamic class generation of bootstrap will not be picked up by :extend().
Here is an example. Assume this initial LESS code (not dynamically generated .span3 classes as bootstrap does):
.span3 {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
You add this LESS code in 1.4.0:
.myclass {
&:extend(.span3);
}
Which produces this CSS:
.span3,
.myclass {
width: 150px;
}
.someClass .span3 {
font-size: 12px;
}
.someOtherClass.span3 {
background: blue;
}
NOTE how it did not automatically extend the other instances of .span3. This is different than SASS, but it only means you need to be a bit more explicit in extending. This has the advantage of avoiding excessive CSS code bloat.
To fully extend, simply add the all keyword in the extend() (this is updated from my original code, as I was unaware of the all option):
.myclass {
&:extend(.span3 all);
}
Which produces this:
.span3,
.myclass {
width: 150px;
}
.someClass .span3,
.someClass .myclass {
font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
background: blue;
}
That makes your .myclass fully equivalent (in my example) to the .span3 class. What this means in your case, however, is that you need to redefine any dynamic class generations of bootstrap to be non-dynamic. Something like this:
.span3 {
.span(3);
}
This is so the :extend(.span3) will find a hard coded class to extend to. This would need to be done for any selector string that dynamically uses .span#{index} to add the .span3.
Original Answer
This answer assumed you desired to mixin properties from a dynamically generated class (that is what I thought your issue was).
Okay, I believe I discovered your issue. First of all, bootstrap defines the .spanX series of classes in the mixins.less file, so you obviously need to be sure you are including that in your bootstrap load. However, I assume it is a given that you have those included already.
Main Problem
The main issue is how bootstrap is generating those now, through a dynamic class name in a loop. This is the loop that defines the .spanX series:
.spanX (#index) when (#index > 0) {
.span#{index} { .span(#index); }
.spanX(#index - 1);
}
.spanX (0) {}
Currently, because the class name itself is being dynamically generated, it cannot be used as a mixin name. I don't know if this is a bug or merely a limitation of LESS, but I do know that at present time of writing, any dynamically generated class name does not function as a mixin name. Therefore, .span3 may be in the CSS code to put as a class in your HTML, but it is not directly available to access for mixin purposes.
The Fix
However, because of how they have structured the code, you can still get what you need, because as you can see above in the loop code, they use a true mixin itself to define the code for the .spanX classes. Therefore, you should be able to do this:
.myclass {
.span(3);
// other rules...
}
The .span(3) code is what the loop is using to populate the .span3 class, so calling it for your classes will give the same code that .span3 has. Specifically bootstrap has this defined in mixins.less for that mixin:
.span (#columns) {
width: (#fluidGridColumnWidth * #columns) + (#fluidGridGutterWidth * (#columns - 1));
*width: (#fluidGridColumnWidth * #columns) + (#fluidGridGutterWidth * (#columns - 1)) - (.5 / #gridRowWidth * 100 * 1%);
}
So you will get the width properties for the .span3 in your .myclass.
This is easy to accomplish with Less.js, but the real question is: "Should I mix structural grid classes with my non-structural classes?"
And the answer is no.
This is a bad idea, the advantage of a grid system is that it creates a separation of concerns between structural styling and other styling. I'm not saying "it should never, ever, ever be done". But in general, it shouldn't. I don't even like seeing this:
<div class="span3 sidebar">
<ul class="nav">
...
</ul>
</div>
Where the span3 is in the same div as the .sidebar class. The problem with this is that now your sidebar is not just "floating around" inside a column of the grid, it has become part of the grid - which (in general) makes it even more difficult to maintain your styles because of the workarounds you need to create to force this kind of styling to be responsive.
Well you can do it but you have to define .somethign first, in this example I will do it font-wight: bold; and font-size 20px. As you can see in second class .body I didn't have to define font-weight: bold; and font-size: 20px; I just added .something into it
.something {
font-weight: bold;
font-size: 20px;
}
.body {
background-color: gray;
border: ridge 2px black;
.something
}
You can see example here. http://jsfiddle.net/7GMZd/
YOU CAN'T DO IT THIS WAY
.body {
background-color: gray;
border: ridge 2px black;
.something {
font-weight: bold;
font-size: 20px;
}
}
I thought that it was possible, but everyone tells me it's not.
I want context styling in my css file like:
div#foo {
h2 {
color: #F42
}
p.bar {
font-size: 12px
}
}
So that only h2 and p.bar in the div with id foo will be styled. Or is this only possible with LESS and other similar libs?
Thanks & kind regards,
Jurik
This is not possible with standard css, the 2 classes would need to be set like:
div#foo h2 {}
div#foo p.bar {}
This is not possible with pure CSS, that's why you should use SCSS or LESS (i suggest to use SASS/SCSS), which are CSS supersets
LESS/SASS-SCSS allows you to write dynamic CSS with ease, take a look at this comparision
check out COMPASS which is the main reason why I suggest you SASS/SCSS
It's possible, but as follows:
div#foo h2 {
/* styles go here */
}
div#foo p.bar {
/* styles go here */
}
What you have above is just a slightly altered version of:
div#foo h2 { color: #F42; }
div#foo p.bar { font-size: 12px }
I don't really see any gain to it.
Less let's you do pretty much what you described, as well as some other cool stuff like use variables in css etc.
Of course, once you let it compile, it'll just turn it into the valid CSS that has been suggested in the previous answers. Still worth a look IMHO.
yes but separated...
div#foo h2 {
color: #F42
}
div#foo p.bar {
font-size: 12px
}
but I would like too change a bit:
#foo h2 {
color: #F42
}
#foo p.bar {
font-size: 12px
}
you are using an ID so you don't need to say nothing before because ID's are unique
Its not possible using default CSS techniques.
But, by using sass and less however, it is possible.
The code in your question, works in both of the libraries above.