This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
Is it possible to set the value of a variable once, inside a single sass-breakpoint, rather than each time I use the variable?
In other words, I'd like to do this:
$tab: 600px;
$wp: 100%;
#include breakpoint($tab) {
$wp: 95%;
}
.alpha {
// ...
width: $wp;
}
.beta {
// ...
width: $wp;
}
.gamma {
// ...
width: $wp;
}
... rather than this:
$tab: 600px;
$wp: 100%;
$wp-tab: 95%;
.alpha {
// ...
width: $wp;
#include breakpoint($tab) {
width: $wp-tab;
}
}
.beta {
// ...
width: $wp;
#include breakpoint($tab) {
width: $wp-tab;
}
}
.gamma {
// ...
width: $wp;
#include breakpoint($tab) {
width: $wp-tab;
}
}
I don't think the first approach will work as is. Is there another way to achieve the same result? Is this approach a bad idea?
That is not possible.
Quoting nex3, the developer of Sass:
While this would be pretty cool, it's very much contrary to the
existing semantics of a Sass stylesheet. What you've outlined already
has a meaning: it sets the variable twice in sequence and then
accesses it (modulo some scoping issues). The sequential and largely
imperative nature of Sass means that the sort of automatic duplication
of rules you're describing becomes very complex. We actually
considered something very similar for handling SassScript &, and ended
up realizing that it was effectively impossible to do so and preserve
the existing semantics.
The best approximation you can do right now is to put the styles that
need to vary in a mixin with parameters and include that in your media
queries.
Source: https://github.com/nex3/sass/issues/1227
Related
I have the following SASS rules:
p {
margin: 0;
}
#include desktop() {
p {
margin: 0;
}
}
The mixin is like this:
#mixin desktop() {
#media screen and (min-width: 1200px) {
#content;
}
}
Elsewhere in the codebase there's a margin being set on desktop, hence in this case I need to explicitly remove it on the desktop breakpoint too, just having the first p selector rule doesn't cut it.
Is there a neat way to combine the selectors as it feels verbose having the same margin: 0 rule twice? I realise there's probably something more fundamentally wrong here with the inheritance, but that's outside the scope of the question. I don't want to use !important.
Many thanks.
Is there a neat way to combine the selectors? Sure there is… Just use another mixin:
#mixin para {
p {
margin: 0;
}
}
#include para;
#include desktop {
#include para;
}
You clearly already know how to use mixins, so I'm assuming your question is really about whether you can nest one mixin within another (yes), or whether you can include selectors within a mixin (yes).
Learning about #mixin and I came across this code. How come the hover-not-disabled on the first line is not followed by () and is it ok to do this? Thanks in advance!
#mixin hover-not-disabled {
&:not([disabled]):hover {
#content;
}
}
.button {
border: 1px solid black;
#include hover-not-disabled {
border-color: blue;
}
}
Its fine. It won't cause any errors, since (…) is meant to contain the arguments which when using a #mixin are usually needed, however in this case the editor wants to pass the mixin into mutliple elements and then edit the #content.
From a subjective point of view, I'd recommned to always include the () for the sake of consistency even if they would be empty, so when quickly scanning the code, nothings seems odd.
So this would be my approach, but generally spoken, it's totally fine to leave them in such cases.
#mixin hover-not-disabled() {…}
#include hover-not-disabled();
Searched but can't find an answer..
I have an element which gets generated (by an external platform) with the following classes: p-button and button.
Now the SCSS is like this:
.p-button {
&.button {
margin: 10px;
}
}
But I want to refactor using mixin includes (this is a big project so there is no other way of making this code better except using mixins). The mixin takes the given selector and applies a . to it. I can't change the mixin, as it is used by many other teams, so I can't pass the ampersand together with the selector. I tried this:
.p-button {
& {
#include button-appearance("button") {
margin: 10px;
}
}
}
But that doesn't work (puts a space between it). You can't do this:
.p-button {
&#include button-appearance("button") {
margin: 10px;
}
}
Anyone have a clue?
EDIT: Here is the mixin
#mixin button-appearance(
$appearance-class,
$show,
$background-color,
$background-image,
$background-position) {
$sel: $button-selector;
#if $appearance-class {
$sel: $sel + '.' + $appearance-class;
}
#{$sel} {
#include normalized-background-image($background-image);
#include show($show);
background-color: $background-color;
background-position: $background-position;
}
#content;
}
EDIT 2: Here is the $button-selector (I can not edit this in the platform, but maybe overwrite it in my own project?)
$button-class: 'p-button';
$button-selector: '.#{$button-class}';
Everyone, finally found the solution. I just removed the &.button from the .p-button mixin include and now it works:
#include button-appearance ("button") { *styles* }
#include button-appearance () { *styles* }
Edited the answer after the original question was edited adding the used and un modifiable mixin
The original mixin does not append the ‘#content’ passed to the mixin to the generated selector. So if you cannot modify the original mixin, the only way is to add your properties outside the mixin. According to the mixin the selector will match a predefined ‘$button-selector’ variable, so it won’t use your class.
So, if you want to use the same class defined in ‘$button-class’, try the following:
#{$button-selector}.button {
margin: 10px;
}
Will output:
.p-button.button {
margin: 10px;
}
I'm trying to get SASS to do something akin to an abstract superclass in programming. I'm getting as far as the superclass part
.box {
#include span-columns(1);
#include border-radius(5px);
height: 360px;
overflow: hidden;
}
article {
#extend .box;
}
figure {
#extend .box;
}
This is a way to define commonalities of boxes without duplicating them in the generated CSS, as would happen with a mixin. However, this solution has the blemish of defining a rule for a (CSS) class "box" that I don't really need and want.
To be sure, this is a minor issue, still I'd like to know if there is a way to make ".box" into a label that is only used during SASS preprocessing and does not appear in CSS.
You want to define your "superclass" using a % instead of a .
%box {
#include span-columns(1);
#include border-radius(5px);
height: 360px;
overflow: hidden;
}
article {
#extend %box;
}
figure {
#extend %box;
}
Note that this requires version 3.2+
I'm using
.w400 {
width: 400px;
}
.w110 {
width: 110px;
}
.w600 {
width: 600px;
}
is it possible to make dynamic class with sass?
something like
.w(size) {
width: size+px
}
If you want to be able to use arbitrary .w(something) classes, I believe (see below) that is not possible with Sass. However, if you know beforehand what sizes you need, you could use mixins with arguments to generate the classes. Something like this:
#mixin width-class($size) {
.w#{$size} {
width: $size * 1px;
}
}
You would use it like this:
#include width-class(400);
#include width-class(110);
This generates the following CSS:
.w400 {
width: 400px; }
.w110 {
width: 110px; }
Now, if you want to avoid writing a new #include line for each of the classes, you can create another mixins (or combine the two mixins into one):
#mixin dynwidths($size-list) {
#each $size in $size-list {
#include width-class($size)
}
}
Now you can pass it a list of widths. This generates the same CSS as above:
#include width-classes(400 110);
Note: This is just a guess, but wildcard class names might be possible by extending Sass with Ruby. However, I'm not sure if this is a desirable feature.