I have a setup with sass where I need a way to store a value without it getting overridden when I minify all my css together.
I have a template scss file that styles a specific bunch of tags that have class selectors.
Then I have a body id selector on each html page. Each html page has its own unique scss file.
I need a way to assign the unique body id selector to a variable so it can be used to append the unique page id to the start of every class in the template scss file . Example:
template.scss
$basePageID: "";
#{$basePageID} .myclass{
}
#{$basePageID} .myclass2{
}
Now in my html specific scss files I have this setup.
**homepage.scss**
#import "template.scss";
$basePageID: "#home";
#{$basePageID} .myclass{
}
**contact.scss**
#import "template.scss";
$basePageID: "#contact";
#{$basePageID} .myclass{
}
Ok so hopefully you can see what I'm trying to do here. The problem is when all my css files are minified the $basePageID variable will get set to whatever is the last css file to be added. I need a way to be able to pass template the unique page id for each scss file even when all files are combined into one css file. Not sure how I can do that in scss
Cant you just do this...
template.scss:
#{$basePageID} .myclass{
}
#{$basePageID} .myclass2{
}
homepage.scss:
$basePageID: "#home";
#import "template.scss";
#{$basePageID} .myclass{
}
To me it looked like you where overwriting the basePageID at the wrong times.
Related
I have the following 3 scss files:
// component.scss
#use 'componentFunctions' as componentFunctions;
/** Adding a default color theme to the component **/
#include componentFunctions.addColorTheme(...);
// componentFunctions.scss
#mixin addColorTheme($param) {
... mixin that creates a color theme for the component
}
// main.scss
#use 'component' as componentName;
/** I would also like to use the createColorTheme mixin in this file, to add a new color theme for this component, in case this module is loaded, how can I achieve this? **/
What I am trying to achieve, is to access the function defined in componentFunction.scss, in the main.scss file. The only way I've managed to do this, is to manually redefine the function in the component.scss file, but surely there has to be a better way around for this.
Strangely, if I am not re-namespacing my imports, everything works automatically. There is a possibility that I misunderstood how the #use functionality works in SCSS, could someone elaborate on how could I achieve the desired effect?
According to Sass docs:
Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
So you can use #use again in your main.scss file as the code below:
#use 'component' as componentName;
#use 'componentFunctions' as componentFunctions;
$newVar: componentFunctions.myFunction();
In that way you don't need to redefine the function in the component.scss.
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.
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'm trying to compile my scss in a css file.
Everything is working except this :
#import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700');
In my css, I've got the same thing :
#import url("http://fonts.googleapis.com/css?family=Roboto:400,500,700,300");
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} ......
Here my gulp task :
return sass(vendorFiles.scss.app, {
compass: true,
style: 'compressed'
})
.on('error', sass.logError)
.pipe(rename('app.css'))
.pipe(gulp.dest(distPaths.css));
});
I tried without quotes, without url, none of this worked.
Others imports work but when I try with #import url, with any url, it doesn't matter, it wont work.
Any ideas?
What do you mean by it won't work? Do you get a sass error?
Try https --- note the "s"
Is it the first line of your css?
Where and how do you use Roboto - I see no reference to it?
You are not supposed to use #import in as it can cause render block issues, and i did tried the #import in VSCode with sass-lint. They showed an error.
I would suggest using in this way :
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
Problem: This method of calling CSS is bad because it adds to the time that it takes to load your css before your page can load.
Solution: Locate the # import calls and replace them.
Detection: Use the pagespeed tool. In the left hand column one of the items is "Avoid # CSS import". If you have a green checkmark, no #imports were found. If found, there will be a red "x".
Details: CSS imports look like this and will usually be near the top of the file.
#import url("style.css")
Rather than call that css file using the import method it is better to just keep that additional css in just one file (copy and paste the imported css into the original css file).
For more info: Go through this link. Dont use #import