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
Related
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;
}
This question already has an answer here:
SASS: randomly pick background-image from a list
(1 answer)
Closed 7 years ago.
I want to specify an array of colours and then apply the colors randomly to a list.
So far I have it so that the colors will cycle through in order.
How can I randomise it?
Here is the Sass code so far:
$colors: red, orange, yellow, green, blue, purple;
#for $i from 1 through length($colors) {
li:nth-child(#{length($colors)}n+#{$i}) {
background: lighten(nth($colors, $i), 20%);
}
}
li {
list-style: none;
padding: 1em;
}
and the markup:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
</ul>
Example on Codepen:
http://codepen.io/anon/pen/azbwJm
Edit: Sass introduced a module system. The random() function is transitioning to math.random(). See the documentation for the function and for the module system for more information.
First, I should state a reminder to everyone reading that Sass is precompiled into CSS; you cannot achieve random behavior "at runtime" (i.e. on page load) using Sass.
Sass has a random() function that might interest you:
$colors: red, orange, yellow, green, blue, purple;
$repeat: 20 // How often you want the pattern to repeat.
// Warning: a higher number outputs more CSS.
#for $i from 1 through $repeat {
li:nth-child(#{length($colors)}n+#{$i}) {
background: lighten(nth($colors, random(length($colors))), 20%);
}
}
li {
list-style: none;
padding: 1em;
}
This chooses a random index of your $colors array and uses the associated color.
Note: the documentation states that random($limit) "returns a random whole number between 1 and $limit." This includes $limit as a possible value. As a result, if you use nth($colors, random(length($colors) + 1)), you are liable to get an error for using an index out of bounds.
This question already has an answer here:
Math with interpolated variables?
(1 answer)
Closed 7 years ago.
Trying to do math inside my loop.
#for $i from 1 through length($colors) {
ul li:nth-child(#{$i}) {
z-index: length($colors) - #{$i};
}
}
But what I get in CSS, for example, is:
li:nth-child(2) {
z-index: 8-2;
}
How can I force SASS to do math and get:
li:nth-child(2) {
z-index: 6;
}
Thanks for help!
You are putting the $i value as a string in the z-index property. If you want to calculate the value correctly you should do it:
$length: length($colors)
#for $i from 1 through length($colors) {
ul li:nth-child(#{$i}) {
z-index: $length - $i;
}
}
Also I recommend you to set a variable with the value of length to prevent multiple calls to this function.
Regards.
This question already has an answer here:
cycling through a list of colors with sass
(1 answer)
Closed 7 years ago.
I have 4 list items that I each need a different background colour on.
I can put my 4 different colour variables in a Sass list and each through them as $color but in the content block of that loop I obviously need to specify which <li> I am talking about using :nth-of-type 1, 2, 3 or 4.
I'm not sure how to specify which <li> I need on each turn of the loop.
Any ideas?
This should do the trick:
$colors: (#000, #F00, #0F0, #00F);
#for $i from 1 through length($colors) {
li:nth-of-type(#{$i}) {
background: nth($colors, $i);
}
}
It produces:
li:nth-of-type(1) {
background: black; }
li:nth-of-type(2) {
background: red; }
li:nth-of-type(3) {
background: lime; }
li:nth-of-type(4) {
background: blue; }
I have a question. So in a mixing I am making a reference to the parent selector "&". This works as long as the mixin is not nested. Is there a way to to detect if the mixing is being used in a non nested scenario, or to check if "&" is null?
This works when the mixin call is not nested
=myresponsiveMixin($media)
#if $media == small {
#media only screen and (max-width: $break-small)
#content
#else if $media == medium
#media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
#content
This works great when the mixin call is nested, but will not resolve '&' when not nested
=myresponsiveMixin($media)
#if $media == small {
#media only screen and (max-width: $break-small)
.classInHTMLToAllowMediaQueries &
#content
#else if $media == medium
#media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
.classInHTMLToAllowMediaQueries &
#content
So the question is, if there is a way to be able to check the value of parent selector "&", so I can cover all bases in a single mixin?
#mixin does-parent-exist {
#if & {
.exists & {
color: red;
}
} #else {
.doesnt-exist {
color: red;
}
}
}
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-script
You're trying a wrong solution to solve your issue.
Have a look at how this problem is addressed in powerful SASS frameworks. Let's take Susy by Eric Meyer as a great example.
Let's imagine you've got the following HTML:
<div class="container">
<div class="parent">
<div class="child">
Bla bla
</div>
</div>
</div>
When you call a mixin for the first time, you're doing it simply (the code is in the indented .sass syntax):
$total-columns: 8 // Declaring a varible that will be used by the mixin
.parent
+span-columns(4) // Span four of eight columns
But when you call that for a child element, the proportions would be crooked, because the parent is already proportioned:
.child
+span-columns(2) // This will fail. You want 2 of 8 columns,
// but due to nesting the math is crooked.
// It will be "2 of (4 of 8)".
To address the issue, you provide an optional argument: a context that is used to do the math:
.child
+span-columns(2, 4) // Now the mixin will take 2 parts of 4
// instead of 2 parts of four
The source code for this mixin is available on GitHub.
In short, it creates an optional argument like this (the code is in the CSS-like .scss syntax):
#mixin span-columns(
$columns,
$context: $total-columns
//...
) {
//...
width: columns($cols, $context /*...*/);
//...
}
See how $context has a default value? Thanks to the default value this argument can be omitted. In other words, $context is an optional argument.
When calling this mixin, if $context is not provided (e. g. span-columns(2)), then it is set equal to $total-columns. The $total-columns variable should be set prior to calling the mixin for the first time (see my example above).
Then the two arguments are used to calculate the width.
UPD 2013-03-30
I am not trying to figure out things in regards to columns... I have modifier my question to make it clearer.
First of all, my recommendation concerns not only grid columns. It's a universal technique you can adopt.
Secondly, now i see that you're trying to nest media queries.
Well, some media queries of different type can be combined in CSS3: e. g. print and width. But you can't put a min-width: 601px inside max-width: 600px, this just won't work!
There's an extensive answer here on StackOverflow describing why you should not nest media queries of the same type: https://stackoverflow.com/a/11747166/901944
Thirdly, you're trying to invent the wheel. There's already a fantastic mixin for crunching media queries: Respond To by Snugug. It's super easy to use and very effective.
Fourthly, the XY thing. Instead of asking about your crooked mixin, please describe the problem that you're trying to solve with it! Show us the actual HTML and explain what behavior you would like to achieve.
We will show you that it can be solved with a simple, elegant, semantic solution that does not require SASS hacking.