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.
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.
This is my main.scss file.
// Main
// Variables (variables.scss)
#use "../../../style/variables" as *;
// Custom Normalize (normalize.scss)
#use "../../../style/normalize";
// Site header (header.scss)
#use "sections/header";
Variables defined in variables.scss are not accessible in normalize.scss & header.scss. Is there a way to use them inside those files without separate #use 'variables' statement?
Or would you just use separate #use method for each file? I am a newbie, so I don't know what's better.
You have two options.
1. #import
If you use #import except #use for imports, then you can access variables defined in variables.scss inside the normalize.scss & header.scss.
But it has a disadvantage. It is difficult to trace where your variables and mixins are coming from because #import enables an endless chain of imported files. It also allows for overlap and makes it difficult to trace back why your perfect css breaks. This is a problem especially with complex file structures and projects with multiple contributors and global libraries, which is why #import is no longer recommended by Sass.
2. #use
It also works like #import to break our stylesheet into smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members. To do this you will need to refer to the namespace of the original file.
Here's an example of simple SCSS partials.
_variables.scss
$primary_color: #000;
_header.scss
#use 'variables';
.header {
color: variables.$primary_color
}
If you need more info read this article - https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/
Let me know if you need further support.
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