placeholders.md

➲ Placeholders:

Sass has a special kind of selector called placeholder. This behavior same as a class selector, but it starts with a percentage symbol %.

When it is declared but would not compiled into CSS output until it been extended.

It same like a mixins that contains set of style rules, but it doesn't accept any arguments.

It can extend and apply style rules as well as their pseudo selectors style rule only if defined.

@extend rule and Placeholder will be compiled and resolved after all other style rules is compiled. Exactly, after their parent selectors compiled and resolved.

It can handles and ensures the combinators, pseudo-classes and universal selectors that contain selectors.

Sass has selector function similar to @extend rule is selector.extend() function. But it works on a single selector.

If multiple selectors are extended then it will match every rule and combine that together.

☴ Overview:

1. Placeholder Declaration
2. Extending Placeholders
3. Extending Multiple Placeholders
4. Private Placeholders
5. Optional Placeholders
6. Extend Rule with Class Selector
7. Extend Pseudo Selector

✦ Placeholder Declaration:

Sass Placeholder can be declared by starts with percentage symbol % followed by placeholder name. And it contains style rule. That would not compiled into CSS until it is extended in some other style rules.

.link, %link {
  font-weight: normal;
}

%link:hover {
  font-weight: bold;
  color: red;
}

Respective CSS Output:

.link {
  font-weight: normal;
}

✦ Extending Placeholders:

Sass Placeholders and it's definitions will be utilized by @extend rule inside another style rule. Otherwise it would not emitted in the CSS output.

%link {
	font-weight: normal;
	color: blue;
}

%link:hover {
	font-weight: bold;
	color: red;
}

a {
	@extend %link;	
}

Respective CSS Output:

a {
  font-weight: normal;
  color: blue;
}

a:hover {
  font-weight: bold;
  color: red;
}

✦ Extending Multiple Placeholders:

Sass can extend multiple class selectors and placeholders with comma separated.

%-link {
	border-radius: 0px;
	color: #424242;
	background-color: #F7F7F7;
	padding: 5px 10px;
}

%font {
	font-family: 'Open Sans', sans-serif;
}

.button {
	@extend %-link, %font;
}

Respective CSS Output:

.button {
  border-radius: 0px;
  color: #424242;
  background-color: #F7F7F7;
  padding: 5px 10px;
}

.button {
  font-family: "Open Sans", sans-serif;
}

✦ Private Placeholders:

Sass gives possibilities to control placeholder visibility by adding hyphen - or underscore _. It is just like a private members declaration.

This private placeholders can be accessible and visible within the current stylesheet.

// main.scss
@use 'partials';

// _partials.scss
%-link {
	border-radius: 0px;
	color: #424242;
	background-color: #F7F7F7;
	padding: 5px 10px;
}

.button {
	@extend %-link;
}

Respective CSS Output:

.button {
  border-radius: 0px;
  color: #424242;
  background-color: #F7F7F7;
  padding: 5px 10px;
}

See More Private Member at Meta Comments

✦ Optional Placeholders:

If the specific placeholder has problem with accessibility or visibility. But it required to compile without private placeholders by setting !optional flag at the end of it.

@extend %link !optional;

✦ Extend Rule with Class Selector:

@extend Rule can inherit or extend styles from another block or class selector or placeholder.

.alert {
	width: 100%;
	border-radius: 10px;

  &-danger {
    @extend .alert;
	  background-color: #EF5350;
	  color: #EDEDED;
  }

  &-warning {
    @extend .alert;
	  background-color: #FFEB3B;
	  color: #424242;
  }
}

Respective CSS Output:

.alert, .alert-warning, .alert-danger {
  width: 100%;
  border-radius: 10px;
}
.alert-danger {
  background-color: #EF5350;
  color: #EDEDED;
}
.alert-warning {
  background-color: #FFEB3B;
  color: #424242;
}

✦ Extend Pseudo Selector:

@extend Rule can inherit styles from another block or level or placeholder as well as their pseudo style rules.

.button {
	border-radius: 0px;
	padding: 5px 10px;
	transition: all 0.3s ease;

	&:hover {
		border-radius: 10px;
		letter-spacing: 3px;
	}

	&-danger {
		@extend .button;
	}

	&-warning {
		@extend .button;
	}
}

Respective CSS Output:

.button, .button-warning, .button-danger {
  border-radius: 0px;
  padding: 5px 10px;
  transition: all 0.3s ease;
}
.button:hover, .button-warning:hover, .button-danger:hover {
  border-radius: 10px;
  letter-spacing: 3px;
}

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page