CSS property as SASS mixin value [duplicate]

by

If you want to use variables as property names you need to use string interpolation – #{$var}.

So this should work:

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

DEMO

Just a note: for your attribute selectors … *="_m" will also apply to the ones that have _mid in them (see here) … so maybe you should rethink this a little.

More Related Contents:

  1. How to define a dynamic mixin or function name in SASS?
  2. why i can’t save scss file of template?
  3. CSS filter:invert not working with background-color
  4. Overlapping/overlaying multiple inline images
  5. Attaching a SCSS to HTML docs [closed]
  6. What’s the difference between the HTML width / height attribute and the CSS width / height property on the img element?
  7. Blank Space To Right Of Webpage? (Hidden min-width?) [closed]
  8. div 100% width with other div fixed
  9. Trying to work on responsiveness of login form
  10. One flex/grid item sets the size limit for siblings
  11. Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?
  12. How do I get this CSS text-decoration override to work?
  13. Why does position:relative; appear to change the z-index?
  14. Align an element to bottom with flexbox
  15. Does opacity:0 have exactly the same effect as visibility:hidden
  16. Flexbox and Internet Explorer 11 (display:flex in ?)
  17. Is it possible to style a mouseover on an image map using CSS?
  18. HTML: Changing colors of specific words in a string of text
  19. Changing highlight color
  20. Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
  21. How to change content on hover
  22. Prevent a child element from overflowing its parent in flexbox [duplicate]
  23. Why isn’t position:sticky with left:0 working inside a scrollable container?
  24. Why does `transform` break `position: fixed`?
  25. Why do Firefox and Opera ignore max-width inside of display: table-cell?
  26. Blank iFrame in IE
  27. text-decoration not working for visited state link
  28. How do I horizontally center an absolute positioned element inside a 100% width div? [duplicate]
  29. download webpage and dependencies, including css images [closed]
  30. Can you have a within a ?

Leave a Comment