I have a complex custom built SCSS framework that where mixins can call on other mixins.
For example
#mixin red-combo {
#include red-text;
#include red-background;
}
.div-red {
#include red-combo;
}
In the output CSS, the line comments will only point to red-text and red-background. That fact that red-combo was used to 'call' red-text and red-background is ignored.
Is there any way to make the line comments more detailed, so that red-combo can showed in the line comments.
No, this is not possible. Only one reference is supported per block.
The introduction of source maps does not make a lot of difference either. It would support references for individual properties, yet one reference per property is still a limitation.
Related
i feel like this may be simple enough and I'm just missing it. I recently went to 7-1 folder structure instead of a single scss file. What i'm having difficulty with is referencing .panel(or h2 or span) in _typography.scss to do font-styling and reference the same .panel(h2,span, etc) in my _layout.scss.
I understand from a CSS pov this wouldn't be logical to have them broken up as of sequencing, however, from a sass pov, I feel like there should be a way to structure this so my CSS doesn't have .nav-container mentioned twice.
Just to note, I'm using NPM, not an ide compiler. Maybe I'm just going about structuring generally incorrect and shouldn't separate them.
Please advise,
UPDATE ANSWER
I've marked Frish's answer here correct because the way that they set it up is correct, but after several and i mean several days of research, i've decided to add some context as I see many others have created simiar threads.
The way I initially looked at SASS was incorrect. I was trying to make SASS work in a way i thought would eliminate complexity: (having .nav-container {} typography rules in a typography partial, then .nav-container {} layout in a layout partial.) This isn't the right way of thinking.
The real benefits are all the built in functions (placeholders,mixins, extends) that drive the magic of making SASS more effective.
However, there is a way to still do what you're looking to do, styling selectors across different partials, for example, separating typography styling from layout styling, and so forth, for particular selector. This was a major wakeup call. Passing Style Blocks (or Content Blocks) to a mixin or whatever. So for example:
#mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
#content;
}
.button-green {
#include button {
background: green
}
}
Finally,
this link(https://openclassrooms.com/en/courses/5625786-produce-maintainable-css-with-sass/5951856-write-cleaner-code-with-sass-extensions) is where it really clicked for me
Look at the section paragraph that starts with "extensions are a lot like mixins." Review this example as it should be easy to apply its setup and way of structuring to what you're trying to do.
Getting deeper into this, i did some googling on "passing style blocks" and "sass passing content blocks" and that helped a ton on how to leverage placeholders, mixins, and extends effectively while still maintaining the simplicity of sass structuring.
This isn't a concrete answer as there are many ways to approach this (as you are undoubtedly aware), but here are my thoughts.
I typically use generic stylesheets (_typography, _layout) for generic elements (h1,h2,h3, .section, .container perhaps). Any element that merits special mention in multiple files potentially merits being its own component (e.g. panel.scss).
This does increase the numbers of folders and files floating around, but I still find this preferable to one, or a few, big files. I usually end up with a main.scss file that looks like this:
// main.scss
#import "_variables.scss";
#import "_typography.scss";
// etc....
#import "./components/panel.scss";
#import "./components/navContainer.scss"; // or, nav-container.scss!
// etc....
Components happily override generic styles, and I can track their CSS in individual files. Happy dev! You can sub-divide components or other files as you see fit.
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
The root of my problem is using CSS4 variables with css functions that is overridden by SASS mixins.
SASS overrides rgb and rgba to help with passing hex to them, for instance. Problem is I am using the new CSS4 spec which allows for variables.
What I want to do is:
background-color: rgba(var(--theme-color, 0.5)
Now this would work fine if SASS hadn't taken over and expect a different input.
So is it possible to override this mixin somehow, so I just get it output as a normal css value?
Thanks to Justinas who led me in the right direction on this question.
Although it could be argued that this is a duplicate of
Named CSS grid lines with SCSS, I still want to share the solution that is more spesific to what I tried to solve.
Here is a codepen of a rather ok solution: https://codepen.io/anon/pen/LydWMd
Basically just creating a mixin that either overrides(as pointed out, not necessarely what you want unless you know you will never use the built-in sass functionality in your project) or an addition:
#function native-rgba($string, $opacity) {
#return #{"rgba(#{$string}, #{$opacity})"};
}
Is there a way to indent Sass' 3.3 mappings?
In scss we can write following:
$colors: (
header: #b06,
text: #334,
footer: #666777
)
But in Sass I cannot add any break into parentheses. I think that parentheses is required into mappings syntax.
$colors:
header: #b06
text: #334
footer: #666777
Syntax error: Illegal nesting: Nothing may be nested beneath variable declarations.
I tried some variances and nothing was compiled without errors.
To compile Sass I need to write it into one string like this:
$colors: (header: #b06, text: #334, footer: #666777)
But it is not indented syntax.
I think that will be a good walkthrough to write indented-only things into SCSS file and then import them.
There is number of issues with the indented syntax in SASS.
Unfortunately SASS syntax doesn't support Multi-line. Reading the documentation, there is only one exception, when it comes to multiple CSS selectors like in this example:
.users #userTab,
.posts #postTab
width: 100px
height: 30px
Read the complete documentation here:
http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors
So, there is no possibility to get multi-line support for an argument list in SASS.
This is a known issue and will not be addressed any time soon.
This is definitely something I'd like to add, but it would take a considerable amount of effort due to the refactoring of the indented syntax that would be required. Right now that's just lower priority than adding features that benefit everyone.
https://github.com/sass/sass/issues/1088
I've just started using SASS. Very impressed, however there is something I'd like to do but can't seem to find answer as whether or not it's possible.
I have a block of CSS that I don't want SASS to parse/compile but I would still like that block outputting to the final compiled CSS file. Is this possible?
Thanks.
My first ever SO question, normally provides the answer. Hope I've not missed it somewhere, tried every search term I could think of to find it.
Put it in a separate .css file and import it in your SASS file. File ending in .css are not parsed but are still included in the final output.
This question is a bit old, but, in the spirit of keeping things up-to-date:
The current version of SASS (3.4.22) does a pretty good job of only changing what it needs to. If what you've written is valid CSS, it should output as is.
The only times you should see SASS modifying your styles is if you've done something that looks like it's supposed to be modified. Based on their documentation, that would be things like:
Nesting styles
Concatenating strings
content: 'foo' + 'bar';
Using interpolation
left: calc(50% - #{$variable})
Using variables
width: $variable
Using #extend or nesting an #include
In most other situations, in my experience, SASS will happily spit out whatever you've written.
If you do need to output something that SASS insists on parsing when it doesn't need to, you can wrap the offending piece in quotes and remove them using the unquote function:
$family: unquote("Droid+Sans");
#import url("http://fonts.googleapis.com/css?family=#{$family}");
which compiles to
#import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Try to enclose your block in /* ..... */ in your scss file. Hope it helps.