So I'm trying to pass a modifier into a SASS mixin:
$headerHeight: 40px;
#mixin hh($prop, $mod: " + 0") {
#{$prop}: #{$headerHeight + $mod};
}
.something {
#include hh(padding-top, " * 2"); // Should return padding-top: 80px;
}
I keep getting things like padding-top: 40px + 0; no matter how many times I try and unquote it. Is it not possible to have the math string evaluated inside a mixin?
I've tried it without the px on $headerHeight, but that doesn't seem to work either.
I can do something like this:
#mixin hh($prop, $aMod: 0px, $mMod: 1) {
#{$prop}: ($headerHeight + $aMod) * $mMod;
}
But I'd prefer to just be able to put any arbitrary math string in there instead of having to break up the additive and multiplicative aspects of the math.
Thanks
Unfortunately, you would have to do something like create functions that act as operators for you and call them with the call() function inside your mixin:
#function plus($i, $j: 0) {
#return $i + $j;
}
#function times($i, $j: 0) {
#return $i * $j;
}
$headerHeight: 40px;
#mixin hh($prop, $func, $mod) {
#{$prop}: call($func, $headerHeight, $mod);
}
.something {
#include hh(padding-top, 'plus', 2); // 42px
#include hh(padding-bottom, 'times', 2); // 80px
}
I don't think that this is possible, you could do something like the following however to achieve the same goal:
$headerHeight: 40;
#mixin hh($prop, $mod, $modval) {
#if $mod == '+' {
#{$prop}: $headerHeight + $modval * 1px;
}
#if $mod == '-' {
#{$prop}: $headerHeight - $modval * 1px;
}
#if $mod == '*' {
#{$prop}: $headerHeight * $modval * 1px;
}
#if $mod == '/' {
#{$prop}: $headerHeight / $modval * 1px;
}
}
.something {
#include hh(padding-top, '*', 2); // Should return padding-top: 80px;
}
http://sassmeister.com/gist/be55fe73c307d0ad018c
Related
To cite my sources, I'm converting the tiles functionality from Metro-UI into a custom SCSS/Angular project I'm building. So far I've been able to convert much of it 1:1 by watching for mixins, includes, and variables. However, I'm not following what Metro's team is doing in this section when it comes to column arrangement. Their original code (from their LESS file - line 243):
.tiles-grid {
.create-tiles-cells(#i: 1, #k: 1) when (#k <= #i) {
.tile-small.col-#{k} {
grid-column: #k / span 1;
}
.tile-medium.col-#{k} {
grid-column: #k / span 2;
}
.tile-wide.col-#{k} {
grid-column: #k / span 4;
}
.tile-large.col-#{k} {
grid-column: #k / span 4;
}
.tile-small.row-#{k} {
grid-row: #k / span 1;
}
.tile-medium.row-#{k} {
grid-row: #k / span 2;
}
.tile-wide.row-#{k} {
grid-row: #k / span 4;
}
.tile-large.row-#{k} {
grid-row: #k / span 4;
}
//.col-#{k} {
// grid-column: #k;
//}
//.row-#{k} {
// grid-row: #k;
//}
.create-tiles-cells(#i; #k + 1);
}
.create-tiles-cells(12);
}
.tiles-grid {
&.size-half {
width: 70px + #tileMargin * 2;
}
.create-tiles-grid-size(#i: 1, #k: 1) when (#k <= #i) {
&.size-#{k} {
width: (#tileCellSize + #tileMargin * 2) * #k;
}
.create-tiles-grid-size(#i; #k + 1);
}
.create-tiles-grid-size(10);
}
.tiles-grid {
.generate-tiles-media-options(#mediaBreakpointListMobileLength);
.generate-tiles-media-options(#name, #j: 1) when (#j <= #mediaBreakpointListMobileLength) {
#m: extract(#mediaBreakpointListMobile, #j);
#media screen and (min-width: ##m) {
.create-tiles-cells(#i: 1, #k: 1) when (#k <= #i) {
.col-#{m}-#{k} {
grid-column: #k;
}
.row-#{m}-#{k} {
grid-row: #k;
}
.create-tiles-cells(#i; #k + 1);
}
.create-tiles-cells(12);
.create-tiles-grid-size(#i: 1, #k: 1) when (#k <= #i) {
&.size-#{m}-half {
width: 70px + #tileMargin * 2;
}
&.size-#{m}-#{k} {
width: (#tileCellSize + #tileMargin * 2) * #k;
}
.create-tiles-grid-size(#i; #k + 1);
}
.create-tiles-grid-size(10);
}
.generate-tiles-media-options(#name, #j + 1);
}
}
My conversion so far:
.tiles-grid {
#mixin create-tiles-cells($i: 1, $k: 1) when ($k <= $i){
.tile-small.col-#{$k} {
grid-column: $k / span 1;
}
.tile-medium.col-#{$k} {
grid-column: $k / span 2;
}
.tile-wide.col-#{$k} {
grid-column: $k / span 4;
}
.tile-large.col-#{$k} {
grid-column: $k / span 4;
}
.tile-small.row-#{$k} {
grid-row: $k / span 1;
}
.tile-medium.row-#{$k} {
grid-row: $k / span 2;
}
.tile-wide.row-#{$k} {
grid-row: $k / span 4;
}
.tile-large.row-#{$k} {
grid-row: $k / span 4;
}
//.col-${k} {
// grid-column: $k;
//}
//.row-${k} {
// grid-row: $k;
//}
#include create-tiles-cells($i, $k + 1);
}
#include create-tiles-cells(12);
}
.tiles-grid {
&.size-half {
width: 70px + $tileMargin * 2;
}
#mixin create-tiles-grid-size($i: 1, $k: 1) when ($k <= $i){
&.size-#{$k} {
width: ($tileCellSize + $tileMargin * 2) * $k;
}
#include create-tiles-grid-size($i, $k + 1);
}
#include create-tiles-grid-size(10);
}
.tiles-grid {
#include generate-tiles-media-options($mediaBreakpointListMobileLength);
#mixin generate-tiles-media-options($name, $j: 1) when ($j <= $mediaBreakpointListMobileLength){
$m: extract($mediaBreakpointListMobile, $j);
#media screen and (min-width: $m) {
#mixin create-tiles-cells($i: 1, $k: 1) when ($k <= $i){
.col-#{$m}-#{$k} {
grid-column: $k;
}
.row-#{$m}-#{$k} {
grid-row: $k;
}
#include create-tiles-cells($i, $k + 1);
}
#include create-tiles-cells(12);
#mixin create-tiles-grid-size($i: 1, $k: 1) when ($k <= $i){
&.size-#{$m}-half {
width: 70px + $tileMargin * 2;
}
&.size-#{$m}-#{$k} {
width: ($tileCellSize + $tileMargin * 2) * $k;
}
#include create-tiles-grid-size($i, $k + 1);
}
#include create-tiles-grid-size(10);
}
#include generate-tiles-media-options($name, $j + 1);
}
}
It's of course the "when" statement that is causing the issue. I understand from similar questions that I may need to use a "for" or "each" statement and break it down from there, but the syntax rules are very different logic when I'm reviewing similar answers (like this one). Since I didn't author the original LESS syntax I'm trying to work backwards through their logic to determine its SCSS equivalent.
From what I can tell it's trying to determine how to spread out the grids if/when the two values for I and K are different, but since you can't create a new class based upon a conditional variable in SCSS I'm getting tripped up. I'd appreciate any guidance. This is the last portion of my code that won't compile.
LESS and SCSS are a bit different when it comes to syntax – I always found SCSS to be the better choice – why my knowledge on LESS is somewhat limited.
I ran the LESS code on codepen and looked at the output – I think I'm able to help you with the first two parts. The last part with the media queries makes no sense it just produces a bunch of media queries and classes doing the same thing as the size part...
(let me know if you can produce something meaningful - then I'll have a second look).
I hope the comments makes sense :-)
Code on sassmeister.com
// -------------------------------------------------------
// Create tile cells mixin
// if no arguments are passed 12 will be used as default
// small note! mixins can't be nested in selectors
// -------------------------------------------------------
#mixin create-tiles-cells($count: 12){
// map holding size information (think object like)
$sizes:(small: 1, medium: 2, wide: 3, large: 4);
// outer selector
.tiles-grid {
// loop from 1 through cell count
#for $i from 1 through $count {
// loop through sizes map
#each $key, $value in $sizes {
// print class using $key (small, medium,...)
.tile-#{$key} {
// use & to bind the .col and .row class to the parent .tile-xxx
&.col-#{$i} { grid-column: $i / span $value; }
&.row-#{$i} { grid-row: $i / span $value; }
}
}
}
}
}
// -------------------------------------------------------
// Create tile sizes mixin
// if no arguments are passed 10 will be used as default
// -------------------------------------------------------
#mixin create-tiles-grid-size($count: 10){
// variables
$tile-margin: 5px;
$tile-cell-size: 150px;
// #tileMargin: 5px;
.tiles-grid {
// hardcoded half class
&.size-half { width: 70px + $tile-margin * 2;}
// loop from 1 through size count
#for $i from 1 through $count {
&.size-#{$i}{
width: ($tile-cell-size + $tile-margin * 2) * $i;
}
}
}
}
// -------------------------------------------------------
// Include the mixins
// -------------------------------------------------------
#include create-tiles-cells(12);
#include create-tiles-grid-size(10);
How could you convert this function written in SASS to LESS? It converts pixelvalues to rem.
#function unit($number) {
#return $number / ($number * 0 + 1);
}
#function getRems($Pixels, $_base-fontsize:16px) {
$getRems: ();
#each $pixel in $Pixels {
$getRems: append($getRems, strip-unit($pixel) / strip-unit($_base-
fontsize) + rem,'space');
}
#return $getRems;
}
.image {
padding:getRems(250px 25px 10px 50px);
}
Reversing the order of a #for iteration output in SCSS can be done as so:
SCSS example: GIST DEMO
$colors : green, gold, red;
a{
$i : length($colors);
#each $c in $colors {
&:nth-child(#{$i}){
fill:$c;
}
$i : $i - 1;
}
}
Output:
a:nth-child(3) {
fill: green;
}
a:nth-child(2) {
fill: gold;
}
a:nth-child(1) {
fill: red;
}
Is this the best way of SASS reverse iterating?
Does anyone know of a more "SCSS native" way of achieving this goal which increases readability?
Your solution is ok.
You can create a function that will reverse your array:
#function reverse($list, $recursive: false) {
$result: ();
#for $i from length($list)*-1 through -1 {
#if type-of(nth($list, abs($i))) == list and $recursive {
$result: append($result, reverse(nth($list, abs($i)), $recursive));
}
#else {
$result: append($result, nth($list, abs($i)));
}
}
#return $result;
}
$list: #aaa, #bbb, #ccc, #ddd;
$new-list: reverse($list);
#for $i from 1 through length($new-list){
div:nth-child(#{$i}){
color: nth($new-list, $i);
}
}
You can use nth-last-child selector.
#for $i from 1 through length($list){
div:nth-last-child(#{$i}){
color: nth($list, $i);
}
}
You can rewrite your array: $list: #ddd, #aaa, #bbb, #ccc and use nth-child.
I'm trying to do a mixin that have optional arguments. This is a simplified version:
#mixin marginCalculator($size, $size2:"") {
margin: $size * 1px unquote($size2 * 1px);
}
I'm just passing in numbers as arguments. But i only want the first one to be mandatory. No problem if it only would output the number but i need to add a unit to it.
As can be seen in the snippet above i'm trying to multiplicate 1px with "" which ouputs an error message. As it should! But i was hoping for the empty quote to be returned. Is there another way to achieve this?
You have 2 options:
Check the type of the value being passed in
#mixin marginCalculator($size, $size2: "") {
margin: ($size * 1px) (if(type-of($size2) == number, $size2 * 1px, null));
}
Loop over a list
This is a much better solution since it will allow you to gracefully handle 3-value margins as well.
#mixin marginCalculator($size...) {
$xs: ();
#each $s in $size {
$xs: append($xs, $s * 1px);
}
margin: $xs;
}
.foo {
#include marginCalculator(1);
#include marginCalculator(1, 2);
#include marginCalculator(1, 2, 3);
}
Alternately:
#mixin marginCalculator($sizes) {
$xs: ();
#each $s in $size {
$xs: append($xs, $s * 1px);
}
margin: $xs;
}
.foo {
#include marginCalculator(1);
#include marginCalculator(1 2);
#include marginCalculator(1 2 3);
}
Output:
.foo .foo {
margin: 1px;
margin: 1px 2px;
margin: 1px 2px 3px;
}
You can use an if() function to check if it has no value:
#mixin marginCalculator($size, $size2:"") {
margin: ($size * 1px) if($size2!="", $size2 * 1px, null);
}
Here, i check it against the default, an empty string, and return the calculation if it isn't that, and null if it is. If we return an empty string, it'll cause a CSS error.
I have a mixin that converts px to rem PX TO REM, I have this code:
.button {
#include rem(font-size, 24px);
#include rem(padding, 10px);
#include rem(border-radius, 5px);
}
This would produce this CSS:
.button {
font-size: 1.5rem;
padding: 0.625rem;
border-radius: 0.3125rem; }
But I'd like to use some mixins from compass and for example I want to use border-radius from compass
.box {
#include border-radius(10px);
}
And it would generate this CSS:
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; }
Is there a way to do something like this:
.box {
#include rem(#include border-radius(10));
}
You can't add two mixins together the way you'd like. So you just have to make the rem mixin do what you want it to do. So I wrote new code to handle that for you.
#function parseInt($n) {
#return $n / ($n * 0 + 1);
}
#mixin rem($property, $values, $prefix: false) {
$px: ();
$rem: ();
#each $value in $values {
#if $value == 0 or $value == auto or unit($value) == "%" {
$px: append($px, $value);
$rem: append($rem, $value);
} #else {
$unit: unit($value);
$val: parseInt($value);
#if $unit == "px" {
$px: append($px, $value);
$rem: append($rem, ($val / 16 + rem));
}
#if $unit == "rem" {
$px: append($px, ($val * 16 + px));
$rem: append($rem, $value);
}
}
}
#if $px == $rem {
#{$property}: $px;
} #else if $prefix == true {
#{-moz- + $property}: $px;
#{-moz- +$property}: $rem;
#{-webkit- +$property}: $px;
#{-webkit- +$property}: $rem;
#{$property}: $px;
#{$property}: $rem;
} #else {
#{$property}: $px;
#{$property}: $rem;
}
}
Now all you have to do add prefixes to any property is add the value true to the end of the mixin like so...
#include rem(border-radius, 10px, true);
Otherwise if you don't want any prefixs on property like fon-size or something you just don't add a last value like so...
#include rem(font-size, 10px);
I have a working demo here...
*Also on a side note I modified this mixin to handle percentages too.