You can do it like this: I have a folder named utilities and inside that I have a file named _variables.scss in that file i declare variables like so: $black: #000; $white: #fff; then I have the style.scss file in which i import all of my other scss files like this: // Utilities @import “utilities/variables”; … Read more
If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders: app/assets/fonts lib/assets/fonts vendor/assets/fonts For Rails versions > 4, you must place your fonts in the app/assets/fonts folder. Note: To place fonts outside of these designated folders, use the following configuration: config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/ For Rails … Read more
Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this: ng config schematics.@schematics/angular:component.style scssand the resulting angular.json shall look like this “schematics”: { “@schematics/angular:component”: { “style”: “scss” } } Other possible solutions & explanations: To create a new project with angular … Read more
Looks like @mixin and @include are not needed for a simple case like this. One can just do: .myclass { font-weight: bold; font-size: 90px; } .myotherclass { @extend .myclass; color: #000000; }
You can use the parent selector reference &, it will be replaced by the parent selector after compilation: For your example: .container { background:red; &.desc{ background:blue; } } /* compiles to: */ .container { background: red; } .container.desc { background: blue; } The & will completely resolve, so if your parent selector is nested itself, … Read more
For concatenating selectors together when nesting, you need to use the parent selector (&): .class { margin:20px; &:hover { color:yellow; } }
After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github. I just want to point out that as December 2014, this issue has been resolved. It is now possible to import css files directly into your sass file. The following PR in … Read more
TL;DR npm uninstall node-sass npm install sass Or, if using Yarn yarn remove node-sass yarn add sass Edit3: yes, another edit. Moving to sass (dart-sass) is the best solution. Previous one included locking node-sass to version 4.x.x, which is 2 years old and lacks newer SCSS features. Edit2: sass-loader v10.0.5 fixes it. The problem is … Read more
I hit the same error. I suspect you’re using Node.js 12 and Gulp.js 3. That combination does not work: Gulp.js 3 is broken on Node.js 12 #2324 A previous workaround from Jan. does not work either: After update to Node.js 11.0.0 running Gulp.js exits with ‘ReferenceError: internalBinding is not defined’ #2246 Solution: Either upgrade to … Read more
Interpolate: body height: calc(100% – #{$body_padding}) For this case, border-box would also suffice: body box-sizing: border-box height: 100% padding-top: $body_padding