Use the built-in Next.js CSS loader (see here) instead of legacy @zeit/next-sass. Replace @zeit/next-sass package with sass. Remove next.config.js. Or do not change CSS loading in it. Move the global CSS as suggested in the error message. Since Next.js 9.2 global CSS must be imported in Custom <App> component. // pages/_app.js import ‘../global-styles/main.scss’ export default … Read more
I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 : @mixin max-width($width) { @media screen and (max-width: $width) { @content; } } .container { position: relative; display: flex; flex-flow: row wrap; } .item … 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
For Sass 3.3 and later As of Sass 3.3 there is a variable-exists() function. From the changelog: It is now possible to determine the existence of different Sass constructs using these new functions: variable-exists($name) checks if a variable resolves in the current scope. global-variable-exists($name) checks if a global variable of the given name exists. … … Read more
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.
Yes, Less.js introduced extend in v1.4.0. :extend() Rather than implementing the at-rule (@extend) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS’s implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work: .sidenav:extend(.nav) {…} or .sidenav { &:extend(.nav); … Read more
As @dinocarl kindly pointed out, the map and list features of SASS are in version 3+. I had to upgrade sass-rails gem to version 5+ because that version of the gem packages SASS 3+. Worked like a charm after I upgraded the gem version (also were few additional dependencies I had to update).
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
You can create a variable outside the loop to “collect” the shadow values, and then use that variable in your text-shadow property. Example: =stacktextshadow($shadows…) $all: () @for $i from 1 through length($shadows) $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma) text-shadow: $all h1 +stacktextshadow(blue, red, green) Output: h1 { text-shadow: 1px 1px 0 blue, 2px … Read more
TL;DR: -webkit-text-stroke is still quite unpredictable the text-shadow as proposed by @Satheesh Kumar is probably the most reliable solution. @Luke Taylor’s approach – duplicating text to a background pseudo element – also provides a good workaround. Anatomy of a variable font As @diopside: pointed out this rendering behaviour is related to variable fonts. The reason … Read more