Nuxtstop

For all things nuxt.js

Using Sass'/SCSS' %Placeholder Selectors for Same-Sheet Repeatable Styling

#webdev #scss #sass #css
11 0

Skip ahead

Refresher on Mixins
The Problem
Solution: Placeholder Selectors

Refresher on Mixins

A @mixin is an At Rule feature of SASS/SCSS that allows you to define styles as though they were contained in a global class that can be accessed from other style sheets.

As a basic example, you write them like this (typically in a style sheet called mixins.scss):

// mixins.scss
@mixin guest-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid orange;
}
Enter fullscreen mode Exit fullscreen mode

To access them from another location, you import the @mixin style sheet and use @include like so:

// about.component.scss

@import '../scss/mixins.scss';

img {
  @include guest-avatar;
}
Enter fullscreen mode Exit fullscreen mode

The Problem

  • You can't reference a @mixin from within the same style sheet
  • Sometimes you want repeatability so that you can make adjustments to styles at the top of the style sheet only (going beyond basic $variables)

Solution: Placeholder Selectors

With placeholder selectors you can define the same kind of pseudo class with a % in front of the selector:

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}
Enter fullscreen mode Exit fullscreen mode

Now you can reference the selector somewhere on the same style sheet below where it was defined:

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

.bottom-sheet {
  @extend %rounded-top;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

That's it. That's all.

Ria

Add comment