Save classes in CSS

Question

Save classes in CSS

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

It turns out that I'm doing some outline, normal, and clean buttons.
Normal have background-color , outlines only border, and clean only color, I also have color attributes, my intention is that this attribute is only used in html , for example:

<button --color-blue></button>

What in css would be:

[--color-blue] {
  background-color: blue;
  color: white;
}

But I do not know how to do that to fit the outline and clean buttons, because it puts background-color and the text in white, would there be some kind of conditional only - CSS? how

[--color-blue] {
  button.clean {
    backround-color: transparent;
    color: blue
  }
  button.outline {
    background-color: transparent;
    border-color: blue;
  }
}

html css

asked by Esteban Fernández 23.04.2018 в 20:09

source

2 answers

Warning message in PHP when not finding records How can I make it recognize "/" when concatenating with javascript?

score 5 · Answer 1

No, in CSS3 there are no conditionals, however there are other extensions with pre-compilers like less and sass . Preferably I prefer SASS since they have enough functions.
Here is an example of what it would look like in this language.

button {
  &[--color-blue] {
    color: blue;
  }
  &.clean {
    backround-color: transparent;
    color: blue;
  }
  &.outline {
    background-color: transparent;
    border-color: blue;
  }
}

Here is an example working with SASS in a jsFiddle so you can try it.

score 2 · Answer 2

The possible syntaxes in CSS are:

button[--color-blue].clean{
  backround-color: transparent;
  color: blue
}
button[--color-blue].outline{
   background-color: transparent;
   border-color: blue;
}

[--color-red]
   button.clean {
   backround-color: transparent;
   color: red;
   }
[--color-red]
   button.outline{
   background-color: transparent;
   border-color: red;}
   }

<button --color-blue class="outline">color blue</button>
<button --color-blue class="clean">color blue</button>

<div --color-red>
<button class="outline">color red</button>
<button class="clean">color red</button>
<div>

As it says Kleith , if you want / need to write it in another way you will have to use a preprocessor. Frequent changes or complex nests that can be a nightmare of copying and pasting are the most usual cases.