In SCSS, what does % symbol indicate?

Question

What does % indicate in scss?

Use of % in context: (source: https://codepen.io/FWeinb/pen/GrpqB?editors=1100)

@import "compass/css3";

.box{
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  line-height: 10em;
  overflow: hidden;
}

%box__dir{
  position: absolute;
  width: inherit;
  height: inherit;          
  text-align: center;
  line-height: inherit;
  transition:transform .4s ease;
}

What does the percentage sign before "box_dir" indicate?

Well, SCSS and SASS are clearly different. A person that has no knowledge of SASS would be looking for a question about SCSS not SASS. What more is there to say; this is not a duplicate. — xing Zì, Mar 16 '19 at 10:56
https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass — Temani Afif, Mar 16 '19 at 11:16
@TemaniAfif For a person who doesn't about SASS, having this question would help him out a lot. He might see the question you marked my question as a duplicate of and think that it wouldn't help him because it's about SASS -- remember, he doesn't know that SASS and SCSS is largely the same. (Not long ago, I was in that situation) — xing Zì, Mar 16 '19 at 11:23
I still don't see the issue of marking as duplicate. Closing a question doesn't mean deleting the question. A person can still find your question and the below answer and he will also understand that SASS is the same as SCSS. The comments we are also writing now will make anyone who will find this question better understand that both are the same — Temani Afif, Mar 16 '19 at 11:25

Andy Hoffman · Accepted Answer · 2019-03-16T10:45:40.813

25

In SCSS, the % indicates a placeholder selector.

[Placeholders] are very similar to class selectors, but instead of using a period (.) at the start, the percent character (%) is used. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.

So if you included this in your SCSS somewhere but never used (extended) it, it will not appear in your generated CSS.

%box__dir {
 position:absolute;
 width:inherit;
 height:inherit;
 text-align:center;
 line-height:inherit;
 transition:transform .4s ease;
}

Once you use the placeholder, it will appear in your generated CSS as expected.

.something {
  color: red;
  @extend %box__dir;
}

Generated CSS:

.something {
  color: red;
  position:absolute;
  width:inherit;
  height:inherit;
  text-align:center;
  line-height:inherit;
  transition:transform .4s ease;
}

edited Mar 16 '19 at 10:45

answered Mar 16 '19 at 10:29

Andy Hoffman

18,436
4
42
61

"@extend $box__dir" - the dollar symbol indicates it's a variable right? – xing Zì Mar 16 '19 at 10:43
@sebastiannielsen That was a typo. Fixed. The link I included in my answer has several real-world examples that should help you beyond the scope of the answer. – Andy Hoffman Mar 16 '19 at 10:46
What is the difference between mixins and % ? If a mixin is not used in any class it also is not gerated, right? – Aleks Grunwald Jun 11 '21 at 12:50
@AleksGrunwald Good explanation [here](https://medium.com/@linker21/scss-placeholders-vs-mixins-fe79b9dbb6d5) with practical examples towards the end of the article. – Andy Hoffman Jun 11 '21 at 16:43

In SCSS, what does % symbol indicate?

1 Answers1