In Sass, I could find I can use '#extend' with '#mixin'.
But from the code, I got curious what's the advantage of using extend.
If we know which 'classes' exactly what do we have to use, we can just use two classes, not extend and make another class.
In my opinion, if we just use two classes, not making multiple extends, code would be shorter and we can save memory. What can I think of the advantage is it's just more easy to see on 'CSS output', but usually people just check SCSS file, not CSS code output.
Isn't it just better to use two separate classes instead of using multiple extends? What is the main advantage of using '#mixin'?
It helps you write DRY code quickly. #extend can be very useful when used properly.
It allows a selector to extend the styles of another selector, essentially providing a form of sub-classing. #extend works by combining selectors into a single comma-separated selector.
I.e. -
.A {
font-size: 1rem;
color:red;
}
.a{
#extend .A;
line-height: normal;
}
Which outputs:
.A,.a {
font-size: 1rem;
color:red;
}
.a{
line-height: normal;
}
There are a couple of important issues with extends to keep in mind:
they change the order of your CSS rules and re-group them often awkwardly which can have unintentional issues down the road
they are less performant than Mixins when your Sass is minified and gzipped.
Great article detailing these issues by Harry Roberts: "Mixins for Better Performance"
Related
I'm kind of new to SCSS and I wanted to ask if there is a more efficient way to include mixins into my partials without having to reference it every time. For example, at the top of every partial where I use the mixin for media queries this is what I have:
#use '../abstracts/mixins' as *;
.wrapper {
margin-inline: auto;
padding-inline: 1.5rem;
#include breakpoint(medium) {
max-width: 80rem;
}
}
So, I wanted to know if there was a better way to do this without having to repeat the #use every time? Or is doing this in each partial that I want to use this mixin in fine?
I'm migrating a Stylus library to SCSS since Angular 12 has deprecated Stylus and I'm in that impacted 0.3%. I've run into something we were doing that I'm not sure how to convert to SCSS—maybe it's impossible.
Let me lay this out simply: I work on several projects that all use loads of the same styles, so we put those styles together into one style sheet in its own NPM package. We can then just grab #import '#company/design/styles'; and suddenly we've got all of our regular styles and variables and mixins available in the project, or we can import #import '#company/package/styles/common'; for just the variables and mixins.
The thing is, our projects might need to configure the library before we import it. Suppose the library contains this bit:
// #company/package/styles/_forms.scss
input:invalid {
background: url('/assets/input-error.svg') no-repeat center right;
}
Not every project will have /assets/input-error.svg at that exact location. Maybe one of my projects has to use /subfolder/static/input-error.svg.
I could include this then overwrite input:invalid { background-image: url(...) } to supply it with the correct location, but there may be many references to this particular file and many other assets on top of that to correct. So we instead, in our Stylus library, we introduced an $asset-input-error variable that points to /assets/input-error.svg by default and did something like this:
// #company/package/styles/_forms.scss
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
// the local project
$asset-input-error: '/subfolder/static/input-error.svg';
#import '#company/package/styles';
The above is heavily simplified and isn't actually legitimate SCSS, but I hope it conveys what we're trying to do: we want to set up what are effectively environment variables in our SCSS, include the common style sheet, and have it use those variables.
The thing is, I'm not sure what the legitimate or idiomatic approach is to do this in SCSS. Unlike Stylus, which has a global scope for its variables, SCSS would have me #use '../config'; and reference config.$asset-input-error, and from outside the library there's no way I see to change the configuration to point that asset to a different location. I'm sure SCSS has a way for me to do this, but I'm not sure what it is. Do I convert the entire library into a giant mixin to which I pass optional configuration? Do I do something with global variables? Something else?
How can I provide variables to my SCSS style sheet to configure it as part of including it in a project?
Ultimately the end goal here is just to be able to say to the library things like: “the assets to reference are here” (very important) or “the error color is this in this particuilar project” (less important).
Using #import
You can use global variables declared before the #import as you stated.
SCSS Documentation for this method
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#import 'forms';
local.scss
$asset-input-error: '/different/path/input-error.svg';
#import '#company/package/styles';
CodeSandbox Demo
Using #use [...] with
You can also hop aboard the #use train if you prefer to future-proof your library.
SCSS Documentation for this method
SCSS Documentation for using mixins
SCSS Documentation for configuring forwards
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#forward 'forms';
local.scss
#use 'styles' with (
$asset-input-error: '/different/path/input-error.svg'
);
Sadly CodeSandbox and StackBlitz don't support dart-sass, so I don't have a live demo for this but I tested it on the latest version of sass from npm.
I am debugging my website and I wish I could just search for all the occurrences of property through all the stylesheets.
For example I wish I could find all instances of the property color: #fff; and from that quickly browse through the selectors and the correspondent stylesheet.
Is this possible?
It is (as far as I am aware) impossible to search for a specific selector through the F12 Developer Tools. Having said that, it is very possible to add generic rules that would override existing selectors.
Depending on the exact element(s) that you want to modify the styles for, you can use a non-specific CSS selector to target all of them and apply a rule that would override any existing rules. For example, span will target all <span> tags, regardless of ID and class. You can target any element with the universal (*) selector.
However, it should be noted that the more 'generic' you are, the less 'specific' you are (which stands to reason). This means that if you have any other rules that are more specific, they will override your generic rules. As such, you'll want to combine a generic rule with the !important declaration.
Here's an example of that:
span {
color: red;
font-size: 20px; /* More specific than the * selector */
}
.more {
color: blue; /* Will override span */
}
* {
font-size: 40px;
color: green !important; /* Maximum specificity; override anything */
}
<span>One</span>
<span class="more">Two</span>
<div>Three</div>
In the above, all <span> elements are red. Then <span class="more"> turns blue, because it has a more specific selector. Although * is a less specific selector, adding the declaration !important to the color rule overrides the previous two colours set.
Keep in mind that the above should only be used for testing; you will almost never want to apply such a broad selector as * for production. Also, avoid using the !important declaration outside of testing as well, and instead work with CSS specificity.
You can either add the rules directly to your stylesheet temporarily, or preferably add them client-side through the F12 Developer Tools. Using the F12 Developer Tools will even showcase when rules are overridden (like in the above example) by placing a line through the middle of them. Rules are displayed from most specific to least specific.
The <span class="more"> from the above example is highlighted here:
Using SASS/SUSY,
I am trying to create RTL rules that only apply when [dir="rtl"] is set (dynamically) but my layout is taking on the RTL flow rules by default. How do I do this with SUSY?
I have a Demo here
$default-dir: (
math: fluid,
columns: 12,
gutter-position: split,
gutters: 0,
flow: ltr
);
.boxes{
width: 100%;
display: block;
margin: 0 auto;
max-width: 1280px;
#include clearfix;
#include layout($default-dir);
[dir="rtl"] &{
#include layout(rtl);//I EXPECT THIS LINE TO ONLY APPLY TO RTL [dir="rtl]
background-color: orange;
}
...
}
This is a common confusion between how CSS works, and how Sass works. CSS is DOM-aware, because it is compiled by browsers along with HTML. Sass is working at a different layer, unaware of the DOM structures implied by your CSS.
The layout mixin is a Sass abstraction, changing a few global Sass variables that Susy can refer back to — it has no actual CSS output of its own. The layout mixin changes the output of other functions and mixins that come after it in the Sass. You can also use with-layout() { <content> } to wrap entire blocks of mixins and functions — but in both cases, the variables only exist in Sass.
In order to change the layout based on a selector, you have to provide both layouts in full — not just one layout, and a scoped variable change. That means something more like this:
.box-item {
#include span(1 of 2);
[dir='rtl'] & {
#include span(1 of 2 rtl)
}
}
There are some workarounds to make that less repetitive, but none are as simple and clean as what you hoped for. They basically involve finding ways to compile the same code block twice, with different variables and an extra selector.
Anyone know of a way to use the SASS if function (not the #if directive) without a false (aka else) clause?
Use Case: I have a SASS library that's normally used on its own and includes a full CSS reset. Someone wants to take an individual file from the library and add it to a project that includes Zurb Foundation, which, of course, totally destroys the CSS reset. I'd like to accommodate that use case with something like:
$css-reset: false !default;
.form__input {
border-radius: 4px if(not $css-reset, !important);
}
That's a SASS compile error, though, since the compiler requires a third parameter to the if() function.
Thanks in advance
Not super elegant, but this works:
border-radius: 4px if(not $css-reset, !important, unquote("");