In a next.js project, I have a sass file called main.scss.
Here I'm importing another sass file with:
#import "style-1.scss";
But now I'm facing a situation where instead of style-1.scsss, I need to import another sass file called style-2.scss.
Basically I'm trying to find a way to import style-1.scss or style-2.scss conditionally based on a class in body or maybe based on existence of a prop.
Something like this:
if (body has class amp)
#import "style-2.scss";
esle
#import "style-1.scss";
Alternatively (although I don't think that I can use porps in a sass file)
if (prop two is true)
#import "style-2.scss";
esle
#import "style-1.scss";
The main idea is that only one of the two sass files should output any css and the other one shouldn't.
But I still couldn't find a working solution. Any help would be appreciated.
Related
I've set up my project to use Bootstrap and scss with Webpacker, however, whenever I start my server locally I get this error:
ActionView::Template::Error (Error: Undefined variable: "$secondary-accent".
on line 76:23 of app/assets/stylesheets/_hero.scss
>> border: solid 0.5px $secondary-accent;
This error actually goes away locally if I do a hard refresh, but of course, Capistrano is not as forgiving and I want to figure out the issue anyway.
In my /app/javascscript/ folder I have a src/style.scss file which imports the required stylesheets.
#import '../../assets/stylesheets/_globals.scss'; //import globals first so the values propagate to Bootstrap
#import '~bootstrap/scss/bootstrap'; //import bootstrap
#import '../../assets/stylesheets/application.scss' //import everything else;
/assets/stylesheets/application.scss looks like:
#import '_navbar';
#import 'actiontext';
#import '_hero';
#import 'comments';
#import 'static_pages';
body {
font-family: $body-font;
font-size: $standard;
}
Of course, the easy way to get rid of this is to just add #import 'globals' to each of the partials but that does not seem to fit with the sass way. I don't really want to add #import 'globals' at the top of every single .scss file, not a big deal at the moment but as the project grows and the complexity of the styles increases maintainability could become a headache. I thought that Webpacker would take care of this, am I wrong? Am I missing something in the setup?
Ps. I realize this question has been asked dozens of times, but they all seem to be for older versions of Rails, or the solutions don't apply to me (such as removing the require tree from application.css
This was resolved by tightening my Webpacker set up a bit.
The biggest issue was installing scss I thought sass-rails in my gemfile was sufficient but I also needed yarn add scss. I didn't need to import the globals inside of src/style.scss just in application.scss.
I am planning to use SASS by creating [_partial] and use [#import].
Question: How can I create selectors with no declaration?.
I will of course populate the selectors with declaration,
but that input comes from the other [_partials]. Have I understood correctly that SASS will delete a selector that has no declaration? Is there any workaround?
My partials structure looks as below.
#import '_1-partial_variables.sass'
#import '_2-partial_divs_only.sass'
#import '_3-partial_wrapper.sass'
#import '_4-partial_divs_layout.sass'
What I have tried so far:
In [_2-partial_divs_only.sass] I have tried:
.div-1
(the build executes without errors, but the div itself is not created).
.div-1 {};
(the build script says, "Error: Expected newline".
What about same scenarios using SCSS as source file?
The results are exactly same, a selector with blank declaration, is not created.
My build-line is:
sass --no-source-map main.sass main.css
Seems this works in order for the SASS compiler to create the selector [.div-1]:
.div-1
/*! keep */
This works also:
.div-1
/**/
As the source is a SASS file, I do not add [{}] nor [;].
Those characters are being created automatically when building from SASS to CSS.
Is it possible to share variables between files, without importing my variables file in every file? Here's an example:
Variables.scss
$primary: #0000FF;
HelpPage.scss
#help-page-container {
background: $primary;
}
Core.scss
#import "Variables.scss";
#import "HelpPage.scss";
Core.scss is the only file that gets compiled. All my single-page files, common CSS classes, and Variables.scss is included in this file.
If I want to use $primary inside my HelpPage.scss file, I would need to either do:
#import "Variables.scss";
or
/// <reference path="Variables.scss" />
Either one works. However, if I have 20 pages, I would need to import/reference the variables file at the top of each and every one of them, just to make Visual Studio happy and not throw a
Undeclared variable
error at me.
Have you read this?
http://thesassway.com/beginner/how-to-structure-a-sass-project
Essentially you would import _variables.scss and _help-page.scss into core.scss
This way helppage partial has access to all variables.
I have three Sass files in the same directory: _include.scss, app.scss and partials.scss.
Both app.scss and partials.scss have an import at the first line:
#import "include";
And at the first line in _include.scss:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass([
'app.scss',
'partials.scss'
]);
});
Bootstrap's and my own Sass code is combined into the same CSS file (public/css/app.css). The only problem is that Bootstrap's CSS is inserted after app.scss, so any changes I make will be overridden by Bootstrap if they collide. partials.scss is inserted at the correctly at the bottom.
What causes this? I have, as far as I can see, the exact same setup in other projects without this problem.
The error lies in the doubled #import "include"; statement:
Both app.scss and partials.scss have an import at the first line
There is an issue for import once semantics in SASS, but it is still not resolved. I would suggest to include the library only in one place until the issue is resolved.
Update: There is an informative blog post on the topic as well, which might help you to find a workaround that suits you.
I'm using the Susy SASS-library. I'm compiling one main SASS-file that #imports various partial SASS-files. Inside the partials I use Susy-mixins. Do I need to #import "Susy" for every single partial SASS-file? What's the smart way to do this?
You can just have a single #import "Susy" before you import all of your other partials. As long as your main file imports Susy first, your partials will be able access it.
#import "Susy";
#import "partials/header";
#import "partials/footer";