SASS only recognizes classes with an ampersand symbol, the root class is not included

Question

SASS only recognizes classes with an ampersand symbol, the root class is not included

Can a sass/css class with an ampersand be used in conjunction with VueJS effectively? I've noticed that the CSS attribute assigned on the ampersand works, but the root element itself isn't detected by the browser.

<style lang="scss" scoped>
.curved-input {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;

  &__lg {
    width: 300px;
  }

  &__sm {
    width: 150px;
  }
}
</style>

The browser appears to detect the width: 300px or width: 150px, but not the

border-radius, height, margin-right

attributes.

<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>

The textbox width changes, but other attributes are not displayed when inspecting them in the browser tools. Am I overlooking something here?

My objective is to avoid coding it as

class="curved-input curved-input__lg

and instead only utilize curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).

css vue.js sass

Answer 1

Answer №1

If you want to avoid cluttering your markup with additional classes or redundant code, you can utilize the @extend feature.

.curved-input {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
}

.curved-input {
  &__lg {
    @extend .curved-input;
    width: 300px;
  }

  &__sm {
    @extend .curved-input;
    width: 150px;
  }
}

This approach would result in the following CSS output:

.curved-input,
.curved-input__sm,
.curved-input__lg {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
}

.curved-input__lg {
  width: 300px;
}
.curved-input__sm {
  width: 150px;
}

Answer 2

If you want to avoid cluttering your markup with additional classes or redundant code, you can utilize the @extend feature.

.curved-input {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
}

.curved-input {
  &__lg {
    @extend .curved-input;
    width: 300px;
  }

  &__sm {
    @extend .curved-input;
    width: 150px;
  }
}

This approach would result in the following CSS output:

.curved-input,
.curved-input__sm,
.curved-input__lg {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
}

.curved-input__lg {
  width: 300px;
}
.curved-input__sm {
  width: 150px;
}

Answer 3

Answer №2

The reason for this is that you must also define the curved-input class. Therefore, your class attribute should appear as

class="curved-input curved-input__lg"

.

If you were to write your CSS code in full, it would look something like this:

.curved-input {
   border-radius: 5px;
   height: 50px;
   margin-right: 1rem;
}

.curved-input__lg {
   width: 300px;
}

.curved-input__sm {
   width: 150px;
}

Keeping this in mind, it becomes clear that you need to include the curved-input class as well.

Answer 4

The reason for this is that you must also define the curved-input class. Therefore, your class attribute should appear as

class="curved-input curved-input__lg"

.

If you were to write your CSS code in full, it would look something like this:

.curved-input {
   border-radius: 5px;
   height: 50px;
   margin-right: 1rem;
}

.curved-input__lg {
   width: 300px;
}

.curved-input__sm {
   width: 150px;
}

Keeping this in mind, it becomes clear that you need to include the curved-input class as well.

Answer 5

Answer №3

When attempting to format it in that manner, one suggestion is to modify the initial line as follows:

[class*="curved-input"]

Answer 6

When attempting to format it in that manner, one suggestion is to modify the initial line as follows:

[class*="curved-input"]

SASS only recognizes classes with an ampersand symbol, the root class is not included

Answer №1

Answer №2

Answer №3

Similar questions

Use JavaScript to jumble up each individual letter

Tips for retrieving element height using Vue.js

Explore a unique navigation bar using CSS hover effects

Using Vue to display a Div inside a TD element of a table does not result in a reactive behavior

Ingress-nginx rewriting destination target

Body overflow appears horizontal in Windows Operating System while it works fine in macOS

Steps to automatically show the keyboard when the page is loaded

I am eager to utilize emit in order to toggle between various page components

Using PHPs nth-child in media queries

Add a JSON file containing an image path as a value into a CSS background property

Issue with background image positioning in IE 7 while scrolling

Ways to decrease the saturation of a background image within a div using CSS

Issue encountered when utilizing properties in a Vue.js instance with vue-class-components and TypeScript

Having difficulties with the Sort() function

The font remains the same despite the <Div style=> tag

In Laravel Blade, you can dynamically add rows and columns based on a certain condition

Ways to eliminate the leading bullet point from an unordered list

Styling for elements containing any class or id in Css

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

Develop a dynamic animation using gradient and opacity properties