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
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.
I need to output this:
#footer-widgets .container .row {
background-image: url("RANDOMLY PICKED");
background-position: right bottom;
background-repeat: no-repeat;
}
... and there should be a list with 4 or 5 links to the actual background-images (http://domain.com/blablabla/image.png) to pick from. How can I do this with SASS?
The most recent version of Sass (v3.3.0) adds a new random function. If you mix that with a list of images (and a wee bit of variable interpolation), you will have CSS with a randomly selected background image every time Sass is compiled. Example:
$imgKey: random(5);
$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);
body {
background-image: "/images/#{$nth}.jpg";
}
Live example: http://sassmeister.com/gist/8966210
As above, the random value will only change when the Sass is compiled, which won't necessarily be every time your page is visited.
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 can't get a mixin to accept a block:
=my-mixin($some-var)
width: $some-var
#content // Is this correct?
+my-mixin(123px)
height: 100px
This results in a "mixin doesn't accept a content block" error. I'm using the current version of Sass. Thanks for help.
syntax is ok with version 3.2 of SASS, double check that
For me the problem was with SASS indentation.
You can't nest another block within a mixin like this:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
instead:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
hover state must not be nested
I was getting this error too. Turned out that somewhere else in my scss I was using #mixin mobile-only instead of #include mobile-only - aka, I was accidentally redefining the mixin later in the code.