I'm trying to extract values from an SCSS variable that contains 1+ values. For testing purposes, let's say I want to get the 2nd value of the argument passed in, and if it only contains 1 value, then return that. e.g.
#function get-second-value($args) {
// Obviously this syntax isn't correct, but something like this
#return $args.split(' ')[1] || $args;
}
$var1: 1px;
$var2: 1px 2px;
$var3: 1px 2px 3px;
#debug get-second-value($var1); // returns 1px
#debug get-second-value($var2); // returns 2px
#debug get-second-value($var3); // returns 2px
I've tried searching all over, but my search terms must be inadequate, so apologies if this is a dupe. How can I accomplish the above?
I think I figured it out... I didn't realize that the variable I was defining was actually a list, so I can do normal list operations on it. My function then becomes:
#function get-second-value($args) {
$return: nth($args, 1);
#if (length($args) > 1) {
$return: nth($args, 2);
}
#return $return;
}
Related
When you assign a scss variable to an existing css variable like this
--color: #FFF;
$color: var(--color);
This will result in $color holding the var(--color) as a value. Is there a trick so it would hold the actual CSS value? So $color would save the #FFF?
You can define variable like this
$color: #FFF;
and use it like this for example
p {
color: $color;
}
In Sass is it possible to put a variable argument and a variable with a default value all wrapped inside one mixin?
Here is what I've been trying
#mixin p($size: 20px, $font-fam...){
font-family: $font-fam;
font-size: $size;
}
I know that a default value normally should be put on the end but in this case $font-fam would think it was a part of its own variable.
Is this possible or will I just need to separate out the mixin for it to work?
Thanks!
I don't think variable arguments can have a default value, but you can check if the variable exists, and if not then set its value:
#mixin p($size: 20px, $font-fam...){
#if length($font-fam) == 0 {
$font-fam: "Helvetica", sans-serif;
}
font-family: $font-fam;
font-size: $size;
}
I've got this function:
#function toRem($val){
#return #{$val / $fontSize}rem;
}
And also this property but it compiled badly:
top: 3.5rem + toRem(15); --> 3.5rem0.9375rem (compiled)
I have tried with this as well but doesn't work either, the result is the same:
top: #{$headerHeight + toRem(15)};
But if I remove the function it works:
top: 3.5rem + 0.9375rem; --> 4.4375rem
Is not possible to do this or I am doing something wrong? Can't find any info about functions in math operators :S
Thanks in advance!
In SASS, #{} is used for interpolation.
In your case, the interpolation syntax around the variables is the reason why you were seeing the resulting value get concatenated like: 3.5rem0.9375.
To work around this, you could evaluate the math expression as you normally would, without interpolation, and then add 0rem in order to coerce the number into a rem unit:
#function toRem($val){
#return ($val / $fontSize) + 0rem;
}
Example usage:
$fontSize: 16;
#function toRem($val){
#return ($val / $fontSize) + 0rem;
}
element {
top: toRem(32);
left: 3.5rem + toRem(15);
}
Output:
element {
top: 2rem;
left: 4.4375rem;
}
I am new to SASS and Compass trying to create one function which can convert passed pixel value to em. I found one tutorial but it is for SCSS and that doesn't work with SASS.
Even I have checked on SASS website but seem they have most document for SCSS and not everything they have describe for SASS.
Here what I am writing
#function em($px, $base: 24px)
#return ($px / $base) * 1em
Also using vertical-rythem in my project and tried this to but than again giving error for $base-font-size
#function em($px, $base: $base-font-size)
#return ($px / $base) * 1em
So when I use it as
font-size: em(16px)
It should convert to 1em in output
The function you have seems correct. Just make sure you have defined $base-font-size with a value such as 16px.
The above mixin you have should also work
$base-font-size: 16px;
#function em($px, $base: $base-font-size) {
#return ($px / $base ) * 1em;
}
Now you can call font-size: em(16px); and it should work
You can also call this function with an optional base, sometimes you might want to calculate on a base that's not 16px.
Please also look up http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ for rem font sizing. You might want to skip em because they have a nesting problem http://css-tricks.com/why-ems/
For a more detailed version of the above mixin, where you can call
border: emCalc (10 20 30 40);
Where you don't have to repeat the px value again and again and you may have 1 to 4 values within, check the mixin in Zurb's foundation _global.scss
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss#L183
This question already has answers here:
Adding a unit to a number in Sass
(2 answers)
Closed 7 years ago.
I am quiet new to Sass... I want to create some css with percentage values like:
width : 13%;
The value is the result of a sass number operation. Writing this
width : $main-width + "%"
scss code generates this:
width : "13%";
css, what is actually not working because it should be:
width : 13%;
writing
width : $main-width %;
results in
width : 13 "%"
what also leads to a non working css-rule. Is there a way to make Sass print 13% plain, with no quotes?
Think of units in Sass like variables in algebra instead of just concatenating strings.
In algebra:
2x * 3 = 6x
In Sass:
13 * 1% = 13%
Use this approach to do more advanced math.
10px * 3px = 30px*px
But px*px isn't a valid CSS unit so you have to cancel one out by dividing by 1px
30px*px / 1px = 30px
Hope this helps beyond your original question.
unquote("%") does the trick.
You could try #.
I had a similar problem with a mixin and lists
#mixin p($value, $position: a, $unit: $rhythm-unit){
$vallist: ();
#if length($value) > 1 {
#each $sval in $value {
$sval: 0 !default;
$vallist: append($vallist, #{$sval}#{$unit});
}
padding: $vallist;
} #else{
#if $position == t {
padding-top: $value+$unit;
} #else if $position == r {
padding-right: $value+$unit;
} #else if $position == b {
padding-bottom: $value+$unit;
} #else if $position == l {
padding-left: $value+$unit;
} #else {
padding: $value+$unit;
}
}
}
The problem was
append($vallist, $sval+$unit);
It always added quotes around these values e.g. "1rem" "1.25rem" which is not a correct css syntax.
I replaced it with:
append($vallist, #{$sval}#{$unit});
As you can see i use #-sign with {} and + it not necessary any more.
The very interesting here is that this only appear with lists/append as you can see in my outer else.
You could find it at the sass reference page Division and slash
If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example:
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
Hope it helps