What does % mean in SASS?

by

https://sass-lang.com/documentation/style-rules/placeholder-selectors

Placeholder Selectors: %foo

Sass supports a special type of selector called a “placeholder
selector”. These look like class and id selectors, except the # or .
is replaced by %. They’re meant to be used with the @extend directive;
for more information see @extend-Only Selectors.

On their own, without any use of @extend, rulesets that use
placeholder selectors will not be rendered to CSS.

Example

SCSS SYNTAX

    %toolbelt {
      box-sizing: border-box;
      border-top: 1px rgba(#000, .12) solid;
      padding: 16px 0;
      width: 100%;
    
      &:hover { border: 2px rgba(#000, .5) solid; }
    }
    
    .action-buttons {
      @extend %toolbelt;
      color: #4285f4;
    }
    
    .reset-buttons {
      @extend %toolbelt;
      color: #cddc39;
    }

CSS Output

    .action-buttons, .reset-buttons {
      box-sizing: border-box;
      border-top: 1px rgba(0, 0, 0, 0.12) solid;
      padding: 16px 0;
      width: 100%;
    }
    .action-buttons:hover, .reset-buttons:hover {
      border: 2px rgba(0, 0, 0, 0.5) solid;
    }

    .action-buttons {
      color: #4285f4;
    }
    
    .reset-buttons {
      color: #cddc39;
    }

More Related Contents:

  1. To know the sass structure [closed]
  2. False positive “undefined variable” error when compiling SCSS
  3. Adding a unit to a number in Sass
  4. Sass .scss: Nesting and multiple classes?
  5. Append the parent selector to the end with Sass
  6. Modifying the middle of a selector in Sass (adding/removing classes, etc.)
  7. Why does Sass change the format of my colors?
  8. Is Sass 3.3 compatible with Compass?
  9. How to overwrite SCSS variables when compiling to CSS
  10. Using a function in Sass is returning the string containing the name of the function rather than the result
  11. Concatenating nested classes using SASS [duplicate]
  12. Math with interpolated variables?
  13. Sass combining parent using ampersand (&) with type selectors
  14. Define variables in Sass based on classes
  15. Sass calculate percent minus px
  16. Using variables for CSS properties in Sass
  17. Sass color variable not working inside darken()
  18. How to convert a number to a percentage with SASS? [duplicate]
  19. Skipping an optional argument in Sass mixin
  20. Can’t get sass + compass + susy installed due to version conflict
  21. Multiple values for one property with variable argument lists in Sass
  22. Interpolation of prefixes on @keyframes in Sass
  23. Is it possible to reference a further parent than just the one above?
  24. Gulp TypeError: Arguments to path.join must be strings
  25. webpack (with sass-loader) – scss file @import does not recognize resolve alias
  26. SASS compile fontawesome preserve notation
  27. Trying to use sass modules in create-react-app with the new @use syntax but receiving an error
  28. Configure compass browser support (Compass 1.x syntax)
  29. Unexpected results when using @extend for themes
  30. Styling a specific set of input types in a reusable way with Sass

Leave a Comment