In scss, I have a code as below. I will like to convert that to a mixin with parameters passed for rotate and skew degrees... May somehow help me in converting this to a mixin?
&:first-child {
#include transform(rotate(0deg) skew(60deg));
}
&:nth-child(2) {
#include transform(rotate(30deg) skew(60deg));
}
&:nth-child(3) {
#include transform(rotate(60deg) skew(60deg));
}
&:nth-child(4) {
#include transform(rotate(90deg) skew(60deg));
}
&:nth-child(5) {
#include transform(rotate(120deg) skew(60deg));
}
&:nth-child(6) {
#include transform(rotate(150deg) skew(60deg));
}
I thought of doing like below. However, it does not seem to be working
#include widget-angle(n);
and the mixin
#mixin widget-angle($num) {
&:nth-child(#{$num}n) {
#include transform(rotate((30 *(#{$num}n-1)) deg) skew(60deg));
}
}
You have a mistake here: (30 *(#{$num}n-1), you have to remove the n and don't use interpolation if you are operating with numbers, leave a space before and after the subtraction sign:
#include transform(rotate((30 *($num - 1))deg) skew(60deg));
I ended up having like below
#mixin widget-angle($num) {
&:nth-child(#{$num}) {
#include transform(rotate((30 *( $num - 1 ))+deg) skew(60deg));
}
}
And,
#for $i from 1 through 6 {
#include widget-angle($i);
}
Related
I want to dynamicaly #include other #mixins in a #mixin.
But it seems like #include can't accept a variable as a #mixin-name,
is there any trick to do this?
Here is situation:
#mixin foo($_Value){
#include #{$_Value}
}
#mixin bar(){...}
#mixin baz(){...}
I want to be able to use #include A(B) or #include A(C), to include B or C additionally.
I have a second solution, but that's not the answer I am mainly looking for. I want to explicitly know, if there's any trick to use some sort of interpolation within #mixin-names.
#mixin foo($_Value...){
#if (length($_Value) > 0) {
#if (index($_Value, bar)) { #include bar }
#if (index($_Value, baz)) { #include baz }
}
}
#mixin bar(){...}
#mixin baz(){...}
Interpolation within #function or #mixin name is not supported.
You can't. As well as #functions #mixins don't support interpolation (yet).
This is indeed the best way to achieve what you want.
#mixin A($_Value...){
#if (length($_Value) > 0) {
#if (index($_Value, B)) { #include B }
#if (index($_Value, C)) { #include C }
}
}
I work with a trick to solve this situation.
#mixin foo($_Value...){
#if (length($_Value) > 0) {
#each $_ThisValue in $_Value{
#extend .#{$_ThisValue}
}
}
}
#mixin bar(){...}
#mixin baz(){...}
.bar{
#include bar;
}
.baz{
#include baz;
}
mixin with extend to do this trick
and it also can do with class or limited $_ThisValue
I've upgraded to Bourbon Neat v2 which includes the addition of gutters on the left and right side of the container grid.
In v1 I could use block-collapse in the span-columns mixin to eat the gutters either side of the element, however, in v2 this mixin has been removed. There is a grid-collapse function in v2 but that doesn't quite work as I expected. My current markup is as below (reduced for brevity):
.wrapper {
#include grid-container; // columns: 12, gutter: 1rem
#include grid-visual(lime);
}
.sidebar {
#include grid-columns(2 of 12);
}
.container {
#include grid-columns(10 of 12);
}
How do I remove the outer gutters, an collapse the gutter between column 2 & 3 so that my sidebar and container sit next to each other?
You were correct in looking at the grid-collapse mixin to take care of this.
To do a flush grid like the one you described, your markup would be:
.wrapper {
#include grid-container;
overflow-x: hidden;
}
.wrapper-inner {
#include grid-collapse;
}
.sidebar {
#include grid-column(2 of 12);
}
.container {
#include grid-column(10 of 12);
}
just expanding on the top answer, you need to also make sure to include grid-collapse within grid-media declarations when using multiple grids due to the fact that grid-collapse is based on your gutter values for each grid.
.wrapper {
#include grid-container;
}
.wrapper-inner {
#include grid-collapse;
#include grid-media($sm-neat-grid, $md-neat-grid, $lg-neat-grid) {
#include grid-collapse;
}
}
.sidebar {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(3 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(5 of 15)
}
}
.container {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(9 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(10 of 15)
}
}
by the way, my example is using a modified version of grid-media that allows declaring multiple grids that will share the same values but differ in gutter sizes:
// overrides bourbon-neat grid-media to include more than one grid
#mixin grid-media($grids...) {
#each $grid in $grids {
$_media: _retrieve-neat-setting($grid, media);
$_query: _neat-parse-media($_media);
#media #{$_query} {
$_default-neat-grid: $neat-grid;
$neat-grid: map-merge($neat-grid, $grid) !global;
#content;
$neat-grid: $_default-neat-grid !global;
}
}
}
can't for the life of me remember where I got it from but I've used it in all my projects
I want to replace this SCSS code with #each usage.
body{
#include us(){
#include define-breakpoint("us")
}
#include xs(){
#include define-breakpoint("xs")
}
#include sm(){
#include define-breakpoint("xs")
}
#include md(){
#include define-breakpoint("md")
}
#include lg(){
#include define-breakpoint("lg")
}
#include xl(){
#include define-breakpoint("xl")
}
}
When I use #each function compiler throws out an error - invalid css with #include #{$bp}(){...}
$list: us xs sm md lg xl;
#each $bp in $list{
body{
#include #{$bp}(){
#include define-breakpoint("#{$bp}")
}
}
}
Does everybody know how to handle this error?
Appreciate any help
The problem with this code is that interpolation can't be used to convert a variable to an identifier. The Sass compiler won't allow it. At the point where you interpolate $bp, the compiler expects an identifier. It will treat anything at that point as an identifier and not something that should be interpolated.
From your code it appears you've defined several mixins with #content passed within the block like so
#mixin us() { #content; }
#mixin sm() ( #contnet; }
which is why they are called like so
#include us(){
#include define-breakpoint("us");
}
You could refactor your code to make use of only one mixin since the only thing that's actually changing is the code in the block.
$list: us xs sm md lg xl;
#mixin screen-size() { #content; }
body {
#each $size in $list {
#include screen-size() {
#include define-breakpoint($size);
}
}
}
Another option would be to define the mixin to take a parameter instead and have the code within that block include the define-breakpoint mixin passing the parameter as an argument.
$list: us xs sm md lg xl;
#mixin screen-size($size) {
#include define-breakpoint($size);
}
body {
#each $size in $list {
#include screen-size($size);
}
}
UPDATED ANSWER
To achieve the added functionality specified in your code you can make the following adjustments to the previous answer
//list now takes media query also
$list: 'us' '(max-width: 519px)',
'xs' '(min-width: 520px) and (max-width: 767px)',
'sm' '(max-width: 768px)',
'md' '(min-width: 769px)',
'lg' '(min-width: 519px) and (max-width: 960px)',
'xl' '(min-width: 961px)';
//mixin takes media query as argument
#mixin screen-size($query) {
#media #{$query} {
#content;
}
}
body {
#each $map in $list {
#include screen-size( nth($map, 2) ) {
#include define-breakpoint( nth($map,1) );
}
}
}
Hope this solves your problem
This question already has answers here:
Make backward nesting in scss?
(2 answers)
Closed 6 years ago.
Current code:
.parent-1 {
.child {
#include set-position-offset(10px, 20px);
}
}
.parent-2 {
.child {
#include set-position-offset(20px, 30px);
}
}
.parent-3 {
.child {
#include set-position-offset(30px, 40px);
}
}
Is there a way to simplify the above code?
Like the following style:
.child {
{some operator}.parent-1 {
#include set-position-offset(10px, 20px);
}
{some operator}.parent-2 {
#include set-position-offset(20px, 30px);
}
{some operator}.parent-3 {
#include set-position-offset(30px, 40px);
}
}
A trailing ampersand - selector & { ... } - should do the trick:
.child {
.parent-1 & {
#include set-position-offset(10px, 20px);
}
.parent-2 & {
#include set-position-offset(20px, 30px);
}
.parent-3 & {
#include set-position-offset(30px, 40px);
}
}
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
you can use looping, like this :
#for $i from 1 through 3 {
.parent-#{$i} {
.child {
#include set-position-offset(10px * $i, (10px * $i) + 10);
}
}
}
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
.green-oval-button {
#extend .oval-button;
#include radial-gradient($green-gradient...);
&:active {
#include radial-gradient($green-gradient-active...);
}
}
.blue-oval-button {
#extend .oval-button;
#include radial-gradient($blue-gradient...);
&:active {
#include radial-gradient($blue-gradient-active...);
}
}
Is it possible to simplify above SassScripts with Mixin + Interpolation + Variable Arguments?
Example: It caused error
#mixin color-oval-button($color) {
#extend .oval-button;
#include radial-gradient(#{$color}-gradient...);
&:active {
#include radial-gradient(#{$color}-gradient...);
}
}
#include color-oval-button("$green");
#include color-oval-button("$blue");
variable interpolation is not available in SASS but according to creator, Chris Eppstein it will be possible via the map feature once 3.3 is realeased.
https://github.com/nex3/sass/issues/132
Until then, you can do something of the sort using 2 lists with mapped values and a for loop. just specify the gradient you want in the same index of the list as the color variable you want to call.
$colors: blue, green;
$gradients: [gradient css], [gradient css];
#for $i from 1 through length($colors) {
#mixin #{nth($colors, $i}-oval-button($color) {
#extend .oval-button;
#include radial-gradient( #{nth($gradients, $i)} );
&:active {
#include radial-gradient( #{nth($gradients, $i)} );
}
}
}
which gives you:
#mixin blue-oval-button($color) {
#extend .oval-button;
#include radial-gradient(blue-gradient);
$:active {
#include radial-gradient(blue-gradient);
}
}
etc....
For a fancier and slightly slicker version, check the link to see how to write a lookup function.