I have n number of styles in .css file.
I am using .Net MVC application
assume :
.a{}
.b{}
.c{}
My html is like
<div id='blockA'>
--- nested div containing classes a , b, c
</div>
<div id='blockB'>
--- nested div containing classes a , b, c
</div>
if i want those styles to be applicable for blockA. i can do like this
#blockA .a{}
#blockA .b{}
#blockA .c{}
is there any other way to specify it for a group of styles ?
#blockA
{
.a{}
.b{}
.c{}
}
CSS does not allow nesting rules - this is a feature of CSS preprocessors like SASS and LESS.
Both allow for this:
#blockA {
.a { color: blue; }
.b { color: red; }
.c { color: green; }
}
If you need to achieve the same result using native CSS only, you need to do it the following way (which is exactly what those preprocessors compile your code to):
#blockA .a {
color: blue;
}
#blockA .b {
color: red;
}
#blockA .c {
color: green;
}
If the rules for .a .b and .c are the same:
#blockA {
.a, .b, .c { color: black; }
}
gets compiled to
#blockA .a,
#blockA .b,
#blockA .c {
color: black;
}
Please note that since any preprocessor will have to compile to native CSS, none of them allows you to do stuff you couldn't achieve with native CSS.
Yes you should use css preprocessors like SASS, LESS
then you could define like you mentioned in the .scss / .less file.
#blockA
{
.a{}
.b{}
.c{}
}
Related
What I want to achieve
I want to detect when the class name of the general CSS library and the class name declaration of my CSS file are duplicated (On the editor of PHPStorm, Atom, VSCode, etc).
Is there a way to detect in the HTML file if the class name is duplicated?
What I examined (but they are useless)
So I searched for CSS Lint and found CSS LINT and stylelint.
However, it seems that CSS LINT does not have a function to detect duplicate class names, and the following CSS did not issue any errors or warnings.
.duplicate_class {
background: #ffa;
}
.duplicate_class {
font-size: 5px; /* I want errors and warnings */
}
stylelint's no-duplicate-selectors check selectors instead of class names, thus allowing duplicate class names:
.class {
background: #ffa;
}
body .class {
font-size: 5px;
}
Of course, htmllint didn't have the ability to detect duplicate class names.
I have never come across such a plug, a tool. But it is possible to combine such classes.
Input
.module {
color: green;
}
.another-module {
color: blue;
}
.module {
background: red;
}
.another-module {
background: yellow;
}
Output
.module {
color: green;
background: red;
}
.another-module {
color: blue;
background: yellow;
}
Library is postcss and plugin postcss-combine-duplicated-selectors.
Can be used from the command line.
Is there a tool out there that allows you to combine CSS classes? It seems handy to combine them in something like Tailwind css, but is there a way to "add them up" in the css? Sass has the #extend which is similar to what I'm thinking. But is there something out there that looks like this:
HTML:
<div class="author"></div>
CSS:
.card {with: 100px; height: 100px;}
.green (background-color: green}
.author { .card + .green }
or maybe
.author = .card.green
Then with more classes, it'd end up something like:
.author,
.staff,
.jockey = .card.green.padding-large.centered.motif-top
Does this exist?
You can do so with the help of Less.css. Just add this <script> tag to your HTML file:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>
And add a <link> to an external stylesheet like this (this is not needed, but Less is less buggy if written in an external file .less rather than inside <style> tags in HTML):
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Now, this example you provided:
.card {width: 100px; height: 100px;}
.green (background-color: green}
.author { .card + .green }
Can be written in Less as:
.card {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.author {
.card();
.green();
}
And the second example of:
.author,
.staff,
.jockey = .card.green.padding-large.centered.motif-top
Is written in Less like:
.author, .staff, .jockey {
.card();
.green();
.padding-large();
.centered();
.motif-top();
}
Hopefully this helped you, and go to the official website to learn more about Less CSS (Learner Style Sheets)
This is the pure CSS way, but syntax is slightly different and you don't need the first line:
.author {} /* 1st line is not required*/
.author, .class1 {
width: 100px;
}
.author, .class2 {
height: 100px;
background-color: black;
}
<div class="author"><div>
More Information here: Can a CSS class inherit one or more other classes?
Modernizr adds classes to the document's <html> tag, e.g. <html class="no-touchevents">.
In my code, I used to write something like this.
.style { background: green; }
.no-touchevents .style { background: red; }
So the element would be green (OK) if the touch is supported and red (error) if it's not. Now with CSS modules, my .style class is defined in a single file and gets transformed into something like this.
.xR23A { background: green; }
.hjTT7 .xR23A { background: red; }
If I wrap my class in a :global clause, it should remain unchanged if I understand it correctly. However, this will apply to every nested class, so I will remain with this.
.xR23A { background: green; }
.no-touchevents .style { background: red; }
How do I solve this to arrive to the desired solution? This is what I am after.
.xR23A { background: green; }
.no-touchevents .xR23A { background: red; }
you should be able to use the paren version of global to only hoise the modernizr portion.
i.e.
.style { background: green; }
:global(.no-touchevents) .style { background: red; }
Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier
<div class="box">
<div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
<div class="box__something">Hi</div>
</div>
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
.box__something { // <<< Is some better selector?
background: pink;
}
}
}
Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the result you are after in a slightly un-elegant manner by using the & helper to join the classes that you wish to join. I have included a live example here.
While this does work, you must realise that if you want to style the .box--rounded class directly you must have it inside it's own class as illustrated below, you cannot use it with the trailing & class that we have placed &__something on.
I recommend you play around with my sassmeister gist and see what results you can come up with.
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
}
&--rounded & {
&__something {
background: pink;
}
}
}
I hope this has solved your issue.
The modifier should be used not on the parent, and the child element .box__something
If I understand your problem correctly, I feel your pain! As soon as you nest a nested property & changes to the parent.
You can however cache the original class name as a variable like this:
$box: box;
.#{$box} {
.#{$box}__something {
background: blue;
}
.#{$box}--rounded {
background: green;
.#{$box}__something { // <<< Is some better selector?
background: pink;
}
}
}
The only problem with the method above is that you end up with a larger volume of compiled CSS. This renders to:
.box .box__something {
background: blue;
}
.box .box--rounded {
background: green;
}
.box .box--rounded .box__something {
background: pink;
}
To reduce the size of the output you could combine & with the variable method like so:
.box {
$box: &;
&__something {
background: blue;
}
&--rounded {
background: green;
#{$box}__something {
background: pink;
}
}
}
This renders to:
.box__something {
background: blue;
}
.box--rounded {
background: green;
}
.box--rounded .box__something {
background: pink;
}
That way you can change the class name in the variable and everything gets updated, I also think it reads a bit better.
I have some rules nested inside each other, and I'd like to add another unrelated element to one of the rules.
For example if I have
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
color: red;
}
}
}
and then I'd like to add another element (#element2) to use same rules as .sub-element2, so compiled code would look like this:
#element1{
display:block
}
#element1 .sub-element1 {
background:yellow
}
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Is it possible?
You could use a mixin. You can add rules to a mixin, then include the mixins where you want them:
#mixin redcolor {
color:red;
}
Then simply include this mixin in any selector:
.subelement2, #element2 {
#include redcolor;
}
More on mixins here:
http://sass-lang.com/guide
Use #extend.
#element2 {
#extend .sub-element2
}
The output created by this will however also copy the selector chain, so this would be the output:
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Perhaps that is what you want, but I can imagine it's not.
In this case you'll need to write an #extend only selector. It works much like an #include, except it generates the compact output you outline in your question. You could do it many ways, this is one of them:
%red {
color: red;
}
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
#extend %red;
}
}
}
#element2 {
#extend %red;
}
Here's a link to it in the official docs.