This question already has answers here:
Sass calculate percent minus px
(6 answers)
Closed 7 years ago.
I have a margin that's defined in em.
I want to do
width: 100% + 3em;
but the units won't play nice.
In my local development environment, I got it to work with interpolation like so
width: #{100%} + #{$code-padding-h};
But when I try to precompile, the precompiling fails with this error
Sass::UnitConversionError: Incompatible units: 'em' and '%'
You can do this trick with the calc method in your css:
width: calc(100% + 3em);
Related
This question already has an answer here:
Sass extend and parent selector
(1 answer)
Closed 1 year ago.
I'd like to generate the content of a %-class within a pseudo selector. #extend works rather unexpected here. Can someone tell me how I would get the expected CSS?
My SASS
%ext
&:aaa
color: red
button
&:bbb
#extend %ext // expected: .button:bbb:aaa
Actual Generated CSS
button:aaa:bbb {
color: red;
}
Expected CSS
button:bbb:aaa {
color: red;
}
The answer is: The order doesn't matter for the resulting CSS.
Therefore: Don't mind.
This question already has answers here:
how to center an inline div using css?
(5 answers)
Closed 7 years ago.
Hi i am currently working with rails 4.2 and using sass , and haml . I am trying to center align the h5 that i have but it seems that it doesnt want to cooperate with me and i already tried with the search with google but still a fail
this is my code
the static page is this
.row#mod
.container#space
.row
.col-md-2
.thumbnail
.caption
=image_tag "a.png", tag: "",class: "img-thumbnail"
%h5
%b#tag Lead
%br
The sass is this
#tag
text-align: center
but the center alignment of the h5 is still to no avail can anybody help me and thanks
The id tag is on the inline element <b>, so text-align: center won't center it within the block h5 element. You can either make #tag display: block, or you should move text-align: center to the h5.
Example 1:
#tag
display: block
text-align: center
Example 2:
.caption h5
text-align: center
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 an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 7 years ago.
you surely know reverse nesting in sass. So i got an advanced question for you.
.profile{
.avatar{
color: blue;
.friends &{
color: grey;
}
}
}
Compiles to:
.friends .profile .avatar {
How to get a result like:
.profile.friends .avatar {
Is there a solution with out changing the structure of the sass.
No, you must change the structure of the Sass. The upcoming #at-root feature can partially unwind selectors, but it will not work in this instance.
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