This question already has answers here:
Sass negative variable value?
(6 answers)
Closed 7 years ago.
I can't use shorthand when I need to use variable arithmetic in SASS,
This is expected result:
text-shadow: 0 -2px white;
But when I code this:
$shadow: 2px;
text-shadow: 0 -$shadow white;
But I get this:
text-shadow: -2px white;
How to fix that?
Found a solution:
text-shadow: 0 #{-$shadow} white;
Related
This question already has an answer here:
Can Sass evaluate strings that contain mathematical expressions?
(1 answer)
Closed 7 years ago.
In Sass I have a string, for example 1px + 1px.
Can I evaluate this string, using Sass, to get 2px result?
You have an actual string?
as in $foo: "1px + 1px";
because no, in Sass you can't do anything like that, but you can just add numbers together so 10px + 100px will equal 110px
See this pen: http://codepen.io/anon/pen/MwEgrX
This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
How can I modify the root element of the parent selector chain? (using sass 3.3.x) Something like...
=prepend($prefix)
#at-root .#{$prefix}#{&} // note there is no dot (.) separating it
#content
.foo
.bar
+prepend(baz)
background: red
and return
.baz.foo .bar {
background: red;
}
or even better... an explicit way to target the root element (or even the nth element)?
=prepend($prefix)
&.#{$prefix}
#content
.foo
+prepend("baz")
.bar
background: red
Returns this:
.foo.baz .bar {
background: red;
}
On the right track?
I am using Sublime Text 2 and LiveReload to compile my .scss file. I also tried codekit with the same problem.
Using + and - work no problem, but * and / don't compile.
font-size: 30px / 2px; doesn't compile to font-size: 15px;
but
font-size: 30px + 2px; does compile to font-size: 32px;
Any ideas? The code hinting also doesn't seem to be working for the multiply and divide operators, could it be a package conflict? Seems unlikely.
Put it in parenthesis so SCSS understands you want it to do an arithmetic operation. Also, you do not want to divide px by another px number as this will result in a unitless number.
This is what you are looking for:
div {
font-size: (30px / 2)
}
Seen discussions here but it has been 2 years!
I don't know if I'm using this right but I have the following sass/compass code:
+text-shadow(red 0 3px 0 3px)
Generating the following css:
text-shadow: red 0 3px 3px, red 0 3px 0 3px;
text-shadow: red 0 3px 0 3px, red 0 3px 0 3px;
Which not works in neither Chrome/Safari/Firefox/Opera.
Is this something with the declaration or this spread feature was really removed from specs?
It's not ideal, but since text-shadow accepts a comma separated list of values, you can "stack" text-shadows on top of each other to get a more opaque outcome.
text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white;
It says in the specs that,
This property accepts a comma-separated list of shadow effects to be
applied to the text of the element. Values are interpreted as for
‘box-shadow’ [CSS3BG]. (But note that spread values are not allowed.)
The shadow is applied to all of the element's text as well as any text
decorations it specifies.
Compass doesn't allow to set the spread value when using the mixin: text-shadow as they said in their documentation:
if any shadow has a spread parameter, this will cause the mixin to emit the shadow declaration twice, first without the spread, then with the spread included. This allows you to progressively enhance the browsers that do support the spread parameter.
Alternatively, you can use the mixin: single-text-shadow then pass all the values including the spread value separated with commas.
single-text-shadow(0, 3px, 0, 3px, red);
That will work as you expected.
I'm wondering, why this double border on table TDs won't show in Chrome but only in FF? Any ideas what could be the work around? Thanks!
http://jsfiddle.net/yQQLk/1/
Not sure why you're using box-shadow to produce a double border, when the border property itself already supports a double border on its own. Just use the following CSS instead of what you've got:
td {
border-bottom: 3px double red;
}
Note you'll need to increase the size of the border to 3px so that both of the lines show up (with 1px, it sometimes doesn't show up at all when you specify double).
The other advantage is that this will work in all browsers, including older ones which don't support box-shadow.
Increase your border thickness to to see a more obvious demonstration of the rendering differences between the two browsers. It seems that in FF, the box-shadow is overlaid on top of the border, in Chrome it hides underneath.
You could use another approach - perhaps use a border-bottom combined with a text-decoration: underline.
Try this, it works in both the browsers:
td {
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
border-bottom: 1px solid red;
box-shadow: 0 2px 0 #000;
}
I guess, this is the problem: box-shadow: 0 1px 0 #000;