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 … Read more
Bootstrap4 alpha for Angular2 CLI (also works for Angular4 CLI) If you are using the angular2 cli/angular 4 cli do following: npm i bootstrap@next –save This will add bootstrap 4 to your project. Next go to your src/style.scss or src/style.css file and import bootstrap there: For style.css /* You can add global styles to this … Read more
To note! node-sass is deprecated as by now! Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass. Instead you can see … Read more
As of Sass 3.4, this is now supported. The syntax looks like this: .message-error { background-color: red; @at-root p#{&} { background-color: yellow } } Note the @at-root directive and the interpolation syntax on the ampersand. Failure to include the @at-root directive will result in a selector like .message-error p.message-error rather than p.message-error.
Simply use the command sass –watch <input folder>:<output folder>, like this: $ ls -l css/ sass/ $ sass –watch sass:css Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Your problem might better be solved by using variables to contain your selectors. By using a mixin, you’re losing the ability to chain it with similar elements. $form-input-text: ‘input[type=”text”], input[type=”password”], input[type=”search”], input[type=”email”], input[type=”tel”], input[type=”url”]’; $form-input-buttons: ‘input[type=”submit”], input[type=”reset”], input[type=”button”], button’; $form-input-dates: ‘input[type^=”date”], input[type=”month”], input[type=”week”], input[type=”time”]’; $form-input-not-radio: ‘input:not([type=”radio”]):not([type=”checkbox”])’; #{$form-input-text}, textarea { @include border-radius(.25em); border: $form-input-border; } #{$form-input-text}, … Read more
Update 2021 for Bootstrap 5 Per the guidance in the docs… “Variable overrides must come after our functions are imported, but before the rest of the imports.” Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss … Read more
— UPDATE: You should never actually need to use this function. Sass math is very smart about units, and I have never seen a use-case in which stripping units was a better option than simply using correct math to get what you need. See the Sass issue thread where this has been discussed at length. … Read more
Extends, as you’ve already discovered, can get rather messy. I would go about solving your problem by using an @content aware mixin in combination with global variables (this uses mappings, which are part of 3.3… you can do it with lists of lists, but it’s a little less elegant): $base-color: null; // don’t touch $accent-color: … Read more
You can check out the following resource: Building Color Palettes with SASS Basically, here’s the meat of it: @function color-diff($a, $b) { $sat: saturation($a) – saturation($b); $lig: lightness($a) – lightness($b); $fn-sat: if($sat > 0, ‘desaturate’, ‘saturate’); $fn-lig: if($lig > 0, ‘darken’, ‘lighten’); @return ( adjust-hue: -(hue($a) – hue($b)), #{$fn-sat}: abs($sat), #{$fn-lig}: abs($lig) ); } You … Read more