This is actually possible to do using SASS maps instead of variables. Here is a quick example: Referencing dynamically: $colors: ( blue: #007dc6, blue-hover: #3da1e0 ); @mixin colorSet($colorName) { color: map-get($colors, $colorName); &:hover { color: map-get($colors, #{$colorName}-hover); } } a { @include colorSet(blue); } Outputs as: a { color:#007dc6 } a:hover { color:#3da1e0 } Creating … Read more
Ok I got it. I just had to install Sass using gem install sass and now everything is fine…couldn’t be easier.
Figured it out. I needed to add @use ‘sass:math’; at the top of the file.
Try it like this margin: 0 (-$pad) 20px (-$pad);
You’re looking for the @content directive: @mixin placeholder { ::-webkit-input-placeholder {@content} :-moz-placeholder {@content} ::-moz-placeholder {@content} :-ms-input-placeholder {@content} } @include placeholder { font-style:italic; color: white; font-weight:100; } SASS Reference has more information, which can be found here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content As of Sass 3.4, this mixin can be written like so to work both nested and unnested: @mixin … Read more
Thanks to jonrsharpe. Worked for me: install / downgrade node.js to a stable version (LTS) like 14.15.0 install the compatible node-sass version via npm install node-sass@4.14.0; you can find the list here, or even install gulp-sasswith npm i gulp-sass –save-dev. direct link to list
Have you tried the Interpolation syntax? background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
SVGs are different than bitmap images such as PNG etc. If an SVG has a viewBox – as yours appear to – then it will be scaled to fit it’s defined viewport. It won’t directly scale like a PNG would. So increasing the width of the img won’t make the icons any taller if the … Read more
Without the combined child selector you would probably do something similar to this: foo { bar { baz { color: red; } } } If you want to reproduce the same syntax with >, you could to this: foo { > bar { > baz { color: red; } } } This compiles to this: … Read more
Have you tried the percentage function ? $my_width: percentage(4/12); div{ width: $my_width; } UPDATE This function was updated since version 1.33.0 and now this is a correct method to do it: @use “sass:math”; div { width: math.percentage(math.div(4,12)); } Source: https://sass-lang.com/documentation/modules/math#percentage