CODEWITHSUNDEEP
sass
Martin54
Martin54

Reputation: 1894

Target input type in scss

I have this code in scss. Is there some way, how to target input type more efficiently?

  &__form {
    input {
      display:block;
    }
    [type="number"] {display:block;}
    [type="date"] {display:block;}
    [type="name"] {display:block;}
  }

for example something like this (but it doesn't work)

  &__form {
    input {
      display:block;
    }

    [type] {
      "number" {display:block}
      "name" {display:block}
      "date" {display:block}
    }
  }

EDIT: display:block is not important here, it is only some dummy data

Upvotes: 2

Views: 2300

Answers (3)

nxxn
nxxn

Reputation: 349

This worked for me:

  &[type='number'] {
    display: block;
  }

Upvotes: 1

connexo
connexo

Reputation: 56853

You can comma-separate selectors before starting your rules block:

.foo {
  &__form {
    input {
      display: block;
    }
    [type="number"],
    [type="date"],
    [type="name"] {
      display: block;
    }
  }
}

Regarding the compiled output, that is what SCSS would also do with your code:

.foo__form input {
  display: block;
}

.foo__form [type="number"],
.foo__form [type="date"],
.foo__form [type="name"] {
  display: block;
}

Upvotes: 0

Chris W.
Chris W.

Reputation: 23280

I'm not entirely sure what you're shooting for but I'm guessing something like;

$inputs: number, date, name;

@each $input in $inputs{
  [type=#{$input}] {
    display: block;
  }
}

Upvotes: 1

Related Questions