I'm trying to call a mixin using a variable as the name, like so:
#include $mixin-name;
That doesn't seem so difficult...
I've seen a few people online mention wanting to do this. This ticket (http://dev.vaadin.com/ticket/9546) says "fixed", which I assumed meant that in Sass 3.2 it was possible, but this comment from the Sass group on Google Groups seems to suggest otherwise: http://goo.gl/HtdHu
I see what they're saying, it seems many people who are asking about it could quite easily solve their issues another way.
I can't think of another way for my issue though, so let me explain and maybe someone might have an idea or two?
CSS Animation
I've created a mixin for #keyframes so that I can call #include animation(); and get the full list of prefixed and official #keyframes
#include keyframes(reveal) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Gives me:
#-webkit-keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Which is great! But if I use Compass transform in one of the keyframe states:
#include keyframes(round) {
from {
#include transform(rotateZ(-145deg));
opacity: 1;
}
to {
#include transform(rotateZ(-45deg));
opacity: 0.5;
}
}
then I end up getting something like:
#-webkit-keyframes round {
from {
-webkit-transform: rotateZ(-145deg);
-moz-transform: rotateZ(-145deg);
-ms-transform: rotateZ(-145deg);
-o-transform: rotateZ(-145deg);
transform: rotateZ(-145deg);
opacity: 1;
}
to {
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
opacity: 0.5;
}
}
etc...
Prefixes inside prefixes
So, I know that this is pedantic, but it's really annoying me that I am declaring -webkit-animation, but then inside I have to declare all of the prefixes when what I want to do is only declare the same prefix as the keyframes and the official, eg:
#-webkit-keyframes round {
from {
-webkit-transform: rotateZ(-145deg);
transform: rotateZ(-145deg);
opacity: 1;
}
to {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
opacity: 0.5;
}
}
#-moz-keyframes round {
from {
-moz-transform: rotateZ(-145deg);
transform: rotateZ(-145deg);
opacity: 1;
}
to {
-moz-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
opacity: 0.5;
}
}
etc...
Mixin problems
So, I've created a mixin using #include experimental-value, but I can't automate it enough because
#function browser-is-prefix($browser, $prefix) {
#if $browser == $prefix {
#return true;
} #else {
#return false;
}
}
#mixin transform-prefix($transform, $browser) {
#include experimental-value(transform, $transform,
browser-is-prefix($browser, -moz),
browser-is-prefix($browser, -webkit),
browser-is-prefix($browser, -o),
browser-is-prefix($browser, -ms),
false, true);
}
#mixin animation-name($browser) {
from {
#include transform-prefix(transform(translate(-25px,200px) scale(0.5)), $browser);
opacity: 0;
}
to {
#include transform-prefix(transform(translate(0,0) scale(0.5)), $browser);
opacity: 1;
}
}
Calling #include animation-name(-webkit) will work great and give us:
#-webkit-keyframes animation-name {
from {
-webkit-transform: translate(-25px,200px) scale(0.5);
transform: translate(-25px,200px) scale(0.5);
opacity: 0;
}
to {
-webkit-transform: translate(0,0) scale(0.5);
transform: translate(0,0) scale(0.5);
opacity: 1;
}
}
But I can't automate it!
To automate the process I wanted to be able to call a mixin, something like #include prekeyframes(animation-name); and have prekeyframes do exactly what the keyframes mixin does above, except instead of blindly including the #content of the, it will include the mixin and only use the prefixes it should based on what prefix the #keyframes has:
#mixin prekeyframes($name) {
$prefixes : -webkit-, -moz-, -o-, -ms-, '';
#each $prefix in $prefixes {
#include $name($prefix);
}
}
This, of course, throws an error. If I interpolate $name (#include #{$name}($prefix)), it's still an issue.
So, I could just live with the extra transform values, or I could do it all manually, but I've always been really impressed with the flexibility of Sass and this seems really limiting to me...
To summarise:
I want to define the animation once, in one place.
I want to be able to #include transform within that animation.
I want the correctly prefixed transform inside the correctly prefixed #keyframes
I've spent a few hours on this now, and I'll continue to fiddle... But if anyone has similar experiences or problems, I'd love to know...
Thanks!
Check out Bourbon (relevant code and documentation), it's fantastic.
Related
I'm trying to create a mixin that allows me to write code blocks flexibly depending on whether body has a certain class.
#mixin when($class) {
body.#{$class} & {
#content;
}
}
Use Cases
#hero {
#include when('theme--dark') {
span {
content: 'Good Evening';
}
}
}
#hero {
#include when('page-landing') {
button.cta {
padding: 3rem 5rem;
font-size: 3rem;
background-color: $green;
}
}
}
even better if the following can be achieved
#mixin when($parent, $class) {
#{$parent}.#{$class} & {
#content;
}
}
#hero {
#include when('body','page-landing') {
button.cta {
padding: 3rem 5rem;
font-size: 3rem;
background-color: $green;
}
}
}
non of the previous codes work, not even certain of the syntax but wondering if something similar can be produced, any help is appreciated thanks!
Though your approach is absolutely fine, here is a slightly cleaner implementation, that grants a little more flexibilty when it comes to the number of selectors you want to check for.
#mixin when($selectors...) {
$n: "";
#each $selector in $selectors {
$n: str-insert($n, "#{$selector}", str-length($n) + 1);
}
#{$n} {
#content;
}
}
#hero {
#include when('body', '[dark-mode=true]', '.primary') {
color: #fff;
}
}
I'm trying to style placeholders for input fields (for different browsers) in Sass 3.3.1, and want to change the opacity when the field is focused. I'm having a hard time combining the pseudo-class and pseudo-elements with the ampersand. The following gives a compilation error:
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder{
... some default styling
:focus#{&}{
opacity: 0;
}
}
Can this be done?
Edit
This is the output I am looking for:
::-webkit-input-placeholder {
opacity: 1;
}
:-moz-placeholder{
opacity: 1;
}
::-moz-placeholder{
opacity: 1;
}
:-ms-input-placeholder{
opacity: 1;
}
:focus::-webkit-input-placeholder {
opacity: 0;
}
:focus:-moz-placeholder{
opacity: 0;
}
:focus::-moz-placeholder{
opacity: 0;
}
:focus:-ms-input-placeholder{
opacity: 0;
}
// Cross-browsers opacity: #include opacity(0.5);
#mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
// Transitions for all: #include transition($transition);
$transition: all .3s ease;
#mixin transition($value) {
-webkit-transition: $value;
-moz-transition: $value;
-ms-transition: $value;
-o-transition: $value;
transition: $value;
}
// Input placeholder animation: #include placeholder { color: #000 }
#mixin placeholder {
&::-webkit-input-placeholder {
#content;
}
&:-moz-placeholder {
#content;
}
&::-moz-placeholder {
#content;
}
&:-ms-input-placeholder {
#content;
}
}
// How to use:
input {
text-overflow: ellipsis;
color: mediumseagreen;
#include placeholder {
color: cornflowerblue;
transition: $transition;
#include opacity(1);
}
&:focus {
#include placeholder {
#include opacity(0);
transition: $transition;
}
}
}
This is going to be the other way around, actually:
element:focus{
&::-webkit-input-placeholder,
&:-moz-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder{
opacity: 0;
}
}
Edit
I seem to have a problem combining them in my testing, but the following should work:
::-webkit-input-placeholder{
color: red;
&:focus{
color: blue;
}
}
On thing to note, though, is that this only works if they are separated out. You cannot combine multiple pseudo-selectors to one definition (like ::-webkit-input-placeholder, :-moz-input-placeholder{ /* this does not work in my testing */ }).
Update 2
Heres a quick SASS function I mocked up that will simplify the process:
#mixin input-placeholder($all:default){
#if $all == default {
$all : ("::-webkit-input-placeholder", ":-moz-placeholder","::-moz-placeholder",":-ms-input-placeholder");
}
#each $placeholder in $all {
#{unquote($placeholder)}{
#content;
}
}
}
You can use it by doing the following:
#include input-placeholder{
color: red;
&:focus {
color: blue;
}
}
This means you only have to write your code once. It will output all of them on individual lines and apply the same rules to them.
Solution from SASS Compass:
// Style the html5 input placeholder in browsers that support it.
//
// The styles for the input placeholder are passed as mixin content
// and the selector comes from the mixin's context.
//
// For example:
//
// #{elements-of-type(text-input)} {
// #include input-placeholder {
// color: #bfbfbf;
// font-style: italic;
// }
// }
//
// if you want to apply the placeholder styles to all elements supporting
// the `input-placeholder` pseudo class (beware of performance impacts):
//
// * {
// #include input-placeholder {
// color: #bfbfbf;
// font-style: italic;
// }
// }
#mixin input-placeholder {
#include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
#if $current-prefix == -webkit {
&::-webkit-input-placeholder { #content; }
}
#elseif $current-prefix == -moz {
// for Firefox 19 and below
#if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
&:-moz-placeholder { #content; }
}
// for Firefox 20 and above
&::-moz-placeholder { #content; }
}
#elseif $current-prefix == -ms {
&:-ms-input-placeholder { #content; }
}
}
// This is not standardized yet so no official selector is generated.
}
see this codepen
it is super basic
$span1Width: 10;
$marginWidth: 5;
#mixin span-width($spannr) {
width: $span1Width * $spannr *1%;
*width: $marginWidth* $spannr -1 *1%;
}
div{
#use span-width(10);
}
resulting in "empty rule" when doing a analyse css with codepen.
If you check the example on sass documentation on how to use mixins you can see:
$color: white;
#mixin colors($color: blue) {
background-color: $color;
#content;
border-color: $color;
}
.colors {
#include colors { color: $color; }
}
So you should use #include and { } instead. Like (using default 5 in this example):
$span1Width: 10;
$marginWidth: 5;
#mixin span-width($spannr: 5) {
width: $span1Width * $spannr *1%;
*width: $marginWidth* $spannr -1 *1%;
}
div{
#include span-width{ spannr: 10};
}
That should give you the correct result
I'm trying to loop through a list of values in Sass and use interpolation of the current key to dynamically output class names that utilize #include and #extend, respectively.
Here is a pen showing the problem, simplified. http://codepen.io/ghepting/pen/vBmLy
As you can see in the markup, I have tried including the "_" inside of the interpolated string as well as outside of it. Is there something I'm missing to work around this limitation of how Sass supports interpolation?
(Note: the OP's pen has disappeared. This is not the original code found in the pen, but a rough approximation of the problem)
$error-light: red;
$error-dark: darken(red, 10%);
$success-light: green;
$success-dark: darken(green, 10%);
$dialogs: error, success;
#each $d in $dialogs {
.#{$d} {
background: $#{$d}-light;
}
}
Interpolation doesn't work on mixins or variables at this point in time. You'll have to come up with a different way to achieve your goal.
As of Sass 3.3, you can use mappings for this purpose for variables:
$dialogs:
( error:
( light: red
, dark: darken(red, 10%)
)
, success:
( light: green
, dark: darken(green, 10%)
)
);
#each $name, $colors in $dialogs {
.#{$name} {
color: map-get($colors, dark);
}
}
And for functions:
#function green() {
#return lighten(green, 10%);
}
#function red() {
#return lighten(red, 10%);
}
#mixin my-bg($function-name) {
background: call($function-name);
}
.foo {
#include my-bg('red');
}
Alternative workaround (for a particular use case):
https://sass-lang.com/documentation/at-rules/mixin#passing-arbitrary-arguments
💡 Fun fact:
Because an argument list keeps track of both positional and keyword arguments, you use it to pass both at once to another mixin. That makes it super easy to define an alias for a mixin!
If you are interested in mixin interpolation because you have a group of mixins, like this:
//_mixins.scss
#mixin text-style-1($args...){ //sass here }
#mixin text-style-2($args...){ //sass here }
#mixin text-style-3($args...){ //sass here }
//_text.scss
.text-style-1 {
#include text-style-1;
}
.text-style-1-contrast {
#include text-style-1($contrast: true);
}
.text-style-2 {
#include text-style-2;
}
.text-style-2-contrast {
#include text-style-2($contrast: true);
}
We can take advantage of passing arbitrary arguments and use an alias for the group:
//_mixins.scss
#mixin text-style-1($args...){ //sass here }
#mixin text-style-2($args...){ //sass here }
#mixin text-style-3($args...){ //sass here }
#mixin text($mixin, $args...) {
#if $mixin == 'style-1' { #include text-style-1($args...); }
#else if $mixin == 'style-2' { #include text-style-2($args...); }
#else if $mixin == 'style-3' { #include text-style-3($args...); }
}
//_text.scss
$text-styles: 'style-1', 'style-2', 'style-3';
#each $style in $text-styles {
.text-#{$style} {
#include text($style);
}
.text-#{$style}-contrast {
#include text($style, $contrast: true);
}
}
Ran into this issue of trying to include an interpolated variable inside a mixin and was able to resolve it with placeholders:
%color-scheme-dark-bg-1 { background-color: #4e5163; }
%color-scheme-dark-color-1 { color: #4e5163 !important; }
%color-scheme-light-bg-1 { background-color: #c7c8ce; }
%color-scheme-dark-bg-2 { background-color: #fd6839; }
%color-scheme-dark-color-2 { color: #fd6839 !important; }
%color-scheme-light-bg-2 { background-color: #fecfc1; }
.card_color {
#mixin CardColorScheme($arg: 1) {
.borderPercent {
#extend %color-scheme-dark-bg-#{$arg};
}
.border {
#extend %color-scheme-light-bg-#{$arg};
}
ul li:before {
#extend %color-scheme-dark-color-#{$arg};
}
.percent {
#extend %color-scheme-dark-color-#{$arg};
}
.heading {
#extend %color-scheme-dark-color-#{$arg};
}
}
&--scheme {
&-1 {
#include CardColorScheme(1);
}
&-2 {
#include CardColorScheme(2);
}
}
}
Hat tip to: https://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables
This question already has an answer here:
Ampersand (&) at the end, and part of, a selector in SASS
(1 answer)
Closed 7 years ago.
I have a class semantic which I apply to many different elements. Depending on which html tag the class is applied to, I would like it to apply a different style. This is how I tried to do it:
.semantic {
&ul {
padding: 0;
margin: 0;
}
&p {
margin: 0;
}
}
This doesn't work. Of course I could write it like this, but it wouldn't be very "DRY":
.semantic ul {
padding: 0;
margin: 0;
}
.semantic p {
margin: 0;
}
Is this possible?
Edit: For clarification, here is an example of what my HTML looks like:
<ul class='semantic'>
<li>An Item</li>
</ul>
<p class='semantic'>This text is semantically a paragraph, but should not be displayed as such</p>
On Sass 3.4:
.semantic {
#at-root {
ul#{&} {
padding: 0;
margin: 0;
}
p#{&} {
margin: 0;
}
}
}
Generates:
ul.semantic {
padding: 0;
margin: 0;
}
p.semantic {
margin: 0;
}
#at-root moves the block to the top-level. This has several uses (see link) but here it's being used to keep take advantage of the & syntax without implying that the rules are child selectors of .semantic.
What you're wanting for would in theory look like this:
.semantic {
ul& {
padding: 0;
margin: 0;
}
p& {
margin: 0;
}
}
This is not possible because the & must be first. You're just going to have to deal with the fact that it isn't DRY and write it out by hand:
ul.semantic {
padding: 0;
margin: 0;
}
p.semantic {
margin: 0;
}
As of Sass 3.3 or 3.4, it is possible using this syntax:
.semantic {
ul#{&} {
padding: 0;
margin: 0;
}
p#{&} {
margin: 0;
}
}
Because of how CSS specificity works you could just do this:
.semantic {
margin: 0;
}
ul.semantic {
padding: 0;
}
In your HTML, p.semantic and ul.semantic would have margin: 0; and only ul.semantic would have padding: 0;
Less Sass, less CSS. DRY.
If, unlike your example, elements on the real site have even less in common, you might want to rethink why they need to have the same class name.