I want to create a list of map values.
$map: (
min-width: 200px,
max-width: 1000px
);
I was intending to use function map.values($map)
but how to get these values returned from this and put into a new list?
Related
I would like to write such a mixin so that you can conditionally pass an array consisting of a property and its value. I will give an example to make it clearer, it is obviously incorrect due to poor knowledge of sass. Is it possible to implement with the tools that sass provides?
#mixin myMedia($args) {
$sizes: (
xxl: 1920px,
xl: 1440px
);
#for $i from 1 through $args {
#media(max-width: $sizes[$i])
$args[$i] #content
}
}
#include myMedia(
{font-size: 16p; line-height: 16px;},
{font-size: 14p; line-height: 14px;}
)
I tried for , each , functions , but didn't come up with anything like what I described above
I want to be able to access the value of each break point set in the $grid-breakpoints variable. It is laid out like this:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
In previous versions, the breakpoints were laid out like
$screen-md: 768px;
and so having something like width: $screen-md would produce width: 768px (or whatever the medium width is).
Now in BS4, I don't see how to do this. When I try using $grid-breakpoints as my variable - it breaks because the variable is pulling in all of those as one value.
Does that make sense what I'm trying to do? How can I do it?
Use map-get like:
map-get($grid-breakpoints, "md")
Demo: https://www.codeply.com/go/31V8zhXAO5
I've been introduced to the gridlover tool. It provides SASS variables like:
$scale0: (
fontSize: 1em,
line: 1.5em,
autoLineCount: 1,
autoLineHeight: 1.5em
);
But I can't figure out what all the values correspond to.
I understand that I can use each one using map-get. fontSize is obviously used to set font-size and line looks like line-height.
.some-class {
font-size: map-get($scale0, fontSize);
line-height: map-get($scale0, line);
}
But what are autoLineCount and autoLineHeight? Are these SASS keywords? What am I suppose to do with them?
Is there any way to combine 4 png cursors into one larger image and style each cursor by positioning the img's x,y?
cursor:url(path/arrow-left.png), auto;
cursor:url(path/arrow-down.png), auto;
cursor:url(path/arrow-right.png), auto;
cursor:url(path/arrow-up.png), auto;
Alternatively can I use just on arrow.png and rotate in for the respective cursor?
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);
}