Angular: Compilation of SCSS/SASS results in unexpected whitespace issues

Question

Angular: Compilation of SCSS/SASS results in unexpected whitespace issues

I am encountering an issue with whitespace being added to the CSS after compiling a *.scss file in my Angular 7 project. This unwanted whitespace is causing incorrect results in the UI.

To replicate the problem, you can visit...

...and copy and paste the code snippet provided below:

$color-background-default:  white;
$color-foreground-default:  black;

$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;

$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;

$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;

.Tab
{
    background-color: $color-background-default;
    color:            $color-foreground-default;

    :hover
    {
        background-color: $color-background-mouseover;
        color:            $color-foreground-mouseover;
    }
    :active
    {
        background-color: $color-background-mousedown;
        color:            $color-foreground-mousedown;
        border-color:     $color-background-mousedown;
    }
}

In the CSS box of Sassmeister, you may notice that there are unnecessary whitespaces between ".Tab" and ":hover", as well as ".Tab" and ":active".

Removing these whitespaces will result in the correct UI display:

.Tab {
  background-color: white;
  color: black;
}

.Tab:hover {
  background-color: #00a7dc;
  color: white;
}

.Tab:active {
  background-color: #00467F;
  color: white;
  border-color: #00467F;
}

The second option without whitespaces provides the desired UI outcome.

My question is: How can I prevent these whitespace issues in Angular 7?

css angular sass compiler-errors

Answer 1

Answer №1

The special parent selector, denoted by &, was created by Sass for use in nested selectors to reference the outer selector. This allows for more intricate styling techniques, such as applying a pseudo-class or introducing a selector before the parent. (taken from SASS official documentation)

When defining rules for pseudo-classes like hover, active, and others, you can utilize the ampersand to refer to the parent selector (one level up), as demonstrated below:

.link {
  color: blue;

  &:hover {
    color: green;
  }
}

Therefore, your SCSS code can be updated as follows:

$color-background-default:  white;
$color-foreground-default:  black;

$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;

$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;

$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;

.Tab
{
    background-color: $color-background-default;
    color:            $color-foreground-default;

    &:hover
    {
        background-color: $color-background-mouseover;
        color:            $color-foreground-mouseover;
    }

    &:active
    {
        background-color: $color-background-mousedown;
        color:            $color-foreground-mousedown;
        border-color:     $color-background-mousedown;
    }
}

Answer 2

The special parent selector, denoted by &, was created by Sass for use in nested selectors to reference the outer selector. This allows for more intricate styling techniques, such as applying a pseudo-class or introducing a selector before the parent. (taken from SASS official documentation)

When defining rules for pseudo-classes like hover, active, and others, you can utilize the ampersand to refer to the parent selector (one level up), as demonstrated below:

.link {
  color: blue;

  &:hover {
    color: green;
  }
}

Therefore, your SCSS code can be updated as follows:

$color-background-default:  white;
$color-foreground-default:  black;

$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;

$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;

$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;

.Tab
{
    background-color: $color-background-default;
    color:            $color-foreground-default;

    &:hover
    {
        background-color: $color-background-mouseover;
        color:            $color-foreground-mouseover;
    }

    &:active
    {
        background-color: $color-background-mousedown;
        color:            $color-foreground-mousedown;
        border-color:     $color-background-mousedown;
    }
}

Answer 3

Answer №2

Are you in search of the sass ampersand?

.Tab {
  :hover {
     ...
  }
}

The correct syntax should be:

.Tab {
  &:hover {
     ...
  }
}

& signifies the "current selector." By using &:hover, you are specifying
#{currentSelector}:hover.

If you omit the ampersand, it translates to #{currentSelector} :hover, which is not what you intend for constructs like

.a {
   .b {
     ...
   }
}

This will result in .a .b {...}.

You can find a detailed explanation here.

Note: The ampersand also allows you to specify a prefix to the current selector. For example:

.a {
  .b {
    prop: value;
    .c & {
       prop: otherValue;
    }
  }
}

This will be interpreted as:

.a .b { prop: value; }
.c .a .b { prop: otherValue; }

Answer 4

Are you in search of the sass ampersand?

.Tab {
  :hover {
     ...
  }
}

The correct syntax should be:

.Tab {
  &:hover {
     ...
  }
}

& signifies the "current selector." By using &:hover, you are specifying
#{currentSelector}:hover.

If you omit the ampersand, it translates to #{currentSelector} :hover, which is not what you intend for constructs like

.a {
   .b {
     ...
   }
}

This will result in .a .b {...}.

You can find a detailed explanation here.

Note: The ampersand also allows you to specify a prefix to the current selector. For example:

.a {
  .b {
    prop: value;
    .c & {
       prop: otherValue;
    }
  }
}

This will be interpreted as:

.a .b { prop: value; }
.c .a .b { prop: otherValue; }

Angular: Compilation of SCSS/SASS results in unexpected whitespace issues

Answer №1

Answer №2

Similar questions

Performing several HTTP requests in a for loop in Angular 8

Provide users with the option to select the email they want to use for signing up while utilizing Angular Firebase's Google signup

The JQuery CSS function is unable to alter the height of the element

Ways to expand media queries using sass

The JSX function seems to be malfunctioning, as the function part is not displaying on the webpage as intended

Transitioning into a fade out effect using CSS

A method to access a stored value in localStorage that does not involve utilizing the __zone_symbol__value property

What causes the layout of an application to become distorted when I extend the theme in Tailwind.css?

Encountering an error with 'ng serve' on a recently established Angular project

Challenger arises in the realm of Chakra UI styling

Ways to adjust the size of the parent element based on the height of a specific element

Event to listen to for rendering dynamically updated data from a service

Manage both the return of an observable and the setting of a value within a single method using

Steer clear of utilizing Number() when working with scientific notation

Showcasing an item hidden behind text and a dropdown menu

The background of the webpage section is being cropped on mobile devices

Implementing CSS and JS for targeted elements or functions in WordPress

Switch up the placement of the boxes by moving them in different directions, such as

Adding a sibling inline can be accomplished by simply using the "+"

Making an API request at regular intervals of x seconds