Apparently in SASS you can store the current selector in a variable, eg a{ $a: &; }
. Useful for dealing with some limitations of &
without having to repeat selectors.
sass posts
SCSS rem fallback mixin, my take
The rem
CSS unit allows you to base your font sizes off of the user’s configured font size, but not be affected by parent elements like em
s are. Older browsers don’t support rem
s though, so it’s good to provide a fallback in px
for them by defining the property with a px
value, then a rem
value. Old browsers take the px
value, then see they don’t know how to handle the rem
value and ignore it. New browsers take the px
value, then override it with the rem
value.
There are a number of SCSS mixins out there for making rem fallbacks automatically by passing in a property and some values and having it automatically output both versions of the property. I started with the css-tricks one. None of the ones I found, though, worked exactly as I wanted. I wanted to be able to work with any property values. I wanted:
- unitless number values (other than 0) to be treated as
px
values px
orrem
values to be converted to the other unit- values with other units or non-numbers to be output as is (
auto
,none
,url
, etc)