sass automatically inserts white space between and after '/'
in aspect ratio media query :
$asrStr: $asrStr + "(min-aspect-ratio:#{$maxAR1}/#{$maxAR2})";
I am getting the result:
(min-aspect-ratio: 99 / 100)
instead of
(min-aspect-ratio: 99/100)
How to remove these extra white spaces?
I don't think the spaces matter. The following works for me:
$maxAR1: 99;
$maxAR2: 100;
$asrStr: "(min-aspect-ratio:#{$maxAR1}/#{$maxAR2})";
#media #{$asrStr} {
div {
color: red;
}
}
Related
I am stuck here.
I want to calculate 2/3 of 10rem like this:
$percentage : percentage(2/3); // 66.666667%
$width : 10rem;
$calculate : do magic: 66.666667% of 10rem;
img { max-height: calc( 100vh - $calculate ); }
I have been looking in the SASS documentation. I can only find some stuff about math function and not too much about percentage.
The percentage(2/3) function call appends a %. You can not multiply that with a non-unitless value like 10rem. Instead, calculate it directly like:
img {
max-height: calc(100vh - #{2/3 * 10rem});
}
The #{} (interpolation) is needed to render the result of the calculation inside the Css calc() expression.
Read more on...
Sass interpolation: https://sass-lang.com/documentation/interpolation
Operators: https://sass-lang.com/documentation/operators/numeric
I have a map declared like below
Map Definition
$color-array:(
black:#4e4e4e,
blue:#0099cc,
dark-blue:#14394e,
green:#2ebc78,
white:#ffffff,
orange:#ed6a0e
);
and calling the same in for each loop to generate class for text color and background color like below
#each $color-name, $color-value in $color-array{
.#{$color-name}{
color: $color-value !important;
}
.bg-#{$color-name}{
background: $color-value !important;
}
}
I am using gruntjs for for compilation, when i set output style to compressed it gives below error
You probably don't mean to use the color value #000' in interpolation
here. It may end up represented as #000000, which will likely produce
invalid CSS. Always quote color names when using them as strings (for
example, "#000"). If you really want to use the color value here, use
"" + $color-name'.
Error: Invalid CSS after ".": expected class name, was "#000"
on line 25 of SCSS/_base.scss
from line 5 of scss/style.scss
But when i set output style to expanded it runs fine.
In your colors array, change all the key double-quoted string keys and things should work.
$color-array:(
"black":#4e4e4e,
"blue":#0099cc,
"dark-blue":#14394e,
"green":#2ebc78,
"white":#ffffff,
"orange":#ed6a0e
);
An alternative of changing the SCSS code would be to make sure the variable is a string like the error message mentioned
#each $color-name, $color-value in $color-array{
.#{"" + $color-name}{
color: $color-value !important;
}
.bg-#{"" + $color-name}{
background: $color-value !important;
}
}
I've spent the past 4 hours trying to find a way to create a sprite image with Compass and sass that also automatically scales each individual image for use with the background-size property.
Nothing I've found works, can't believe it's that difficult.
Does any one have a working example?
Edit: This is what I have so far
#mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
#include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
width: ceil($width*($percent/100));
height: ceil($height*($percent/100));
background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );
}
#mixin resize-sprite-set($map, $percent, $only...) {
$name: sprite_map_name($map);
#each $sprite in sprite_names($map) {
#if length($only) == 0 or index($only, $sprite) != false {
.#{$name}-#{$sprite} {
#include resize-sprite($map, $sprite, $percent);
}
}
}
}
The mixin returns no errors.
$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize
#import "my-icons/*.png";
$my-icons-sprite-dimensions: true;
#include all-my-icons-sprites;
// the fun part
.small-icons { // overriding all sprites
#include resize-sprite-set($my-icons-sprites, 40); // 40% sized
}
.some-part-of-my-site {
#include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok"
}
I get the following error message from the above implementation when I try to compile. Via Prepros App.
remove ../images/my-icons-s9e77ab1ef1.png
create ../images/my-icons-s9e77ab1ef1.png
error style.scss (Line 62 of _mixins.scss: Undefined mixin 'resize-sprite-set'.)
identical ../css/style.css
I've also done some research on this. This gist is what I came up with:
https://gist.github.com/apauly/7917906
Update:
The solution depends on three key-parts:
scale width
scale height
get background-position
0.
Grab the dimensions for both, the complete sprite and the single icon:
$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);
$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);
1.
Consider a div displaying a sprite as its background. Set background-size: 100%; to make sure, that the background sprite covers the full width of the div.
If one would use width: 100%;, the result would be something like this:
+----------------+
|--| |
|----------------|
|--------| | <--- This is the sprite image we want to display
|------| |
+----------------+
So we need to enlarge our background to get something like this: (the div should have overflow:hidden though)
+----------------+
|---------| |
|-----------------------|
|----------------| | <---
|-------------| |
+----------------+
To achieve that, just divide the width of the complete sprite by the width of the single icon:
width:percentage($sprite-width / $icon-width);
2.
This one is basically inspired by a blog post form tkenny:
http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/
The resulting sass code is this:
display: block;
height: 0;
padding-bottom: percentage($icon-height / $icon-width);
background-size: 100%;
3.
The rest is just some basic math to calculate the top spacing of the icon inside of the sprite as a relative value:
Get the space from the top in pixels (a negative value):
$space-top:floor(nth(sprite-position($map, $icon), 2));
Sass will need a px-value
#if $space-top == 0 {
$space-top: 0px
}
Set the background position with percentages:
background-position:0 percentage(
-1 * $space-top / ( $sprite-height - $icon-height )
);
Here's a mixin for resizing sprites that works beautifully
#mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
#include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
width: ceil($width*($percent/100));
height: ceil($height*($percent/100));
background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );
}
and the github it came from:
https://gist.github.com/darren131/3410875
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.
You need to use calc() instead. Check browser compatibility on Can I use...
.foo {
height: calc(25% - 5px);
}
If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):
$a: 25%;
$b: 5px;
.foo {
width: calc(#{$a} - #{$b});
}
There is a calc function in both SCSS [compile-time] and CSS [run-time]. You're likely invoking the former instead of the latter.
For obvious reasons mixing units won't work compile-time, but will at run-time.
You can force the latter by using unquote, a SCSS function.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }
$var:25%;
$foo:5px;
.selector {
height:unquote("calc( #{$var} - #{$foo} )");
}
IF you know the width of the container, you could do like this:
#container
width: #{200}px
#element
width: #{(0.25 * 200) - 5}px
I'm aware that in many cases #container could have a relative width. Then this wouldn't work.
Sorry for reviving old thread - Compass' stretch with an :after pseudo-selector might suit your purpose - eg. if you want a div to fill width from left to (50% + 10px) of screen you could use (in SASS indented syntax):
.example
background: red
+stretch(0, -10px, 0, 0)
&:after
+stretch(0, 0, 0, 50%)
content: ' '
background: blue
The :after element fills 50% to the right of .example (leaving 50% available for .example's width), then .example is stretched to that width plus 10px.
Just add the percentage value into a variable and use #{$variable}
for example
$twentyFivePercent:25%;
.selector {
height: calc(#{$twentyFivePercent} - 5px);
}
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