Chaining selectors in SASS [duplicate] - css

This question already has answers here:
Changing an input's HTML5 placeholder color with CSS does not work on Chrome
(4 answers)
Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
(2 answers)
Placeholder Mixin SCSS/CSS
(6 answers)
Closed 8 years ago.
Is there a way in sass to chain up selectors like this:
input {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder {
color: red;
}
}

With these special vendor-specific pseudo selectors, I've found putting them all together on one line does not result in them working very well cross-browser. I think the best optimization you can hope for then is something like this:
#mixin placeholderstyle() {
color: red;
}
input::-webkit-input-placeholder {
#include placeholderstyle()
}
input:-moz-placeholder {
#include placeholderstyle()
}
input::-moz-placeholder {
#include placeholderstyle()
}
input:-ms-input-placeholder {
#include placeholderstyle()
}

Related

Can a CSS variable be used in the recalculation of its own value? [duplicate]

This question already has answers here:
Unable to overwrite CSS variable with its own value
(2 answers)
CSS Variables - Swapping values?
(1 answer)
Can a recursive variable be expressed in css?
(2 answers)
Closed 2 years ago.
In CSS, can we we multiply a variable by some integer like the code below ?
:root {
--x: 1em;
}
.class2 {
--x: calc(2em * var(--x));
}
A quick check on the MDN docs unfortunately did not shine light on this. So unless you're willing to dive into the spec, here's a quick test:
:root {
--x: 4em;
}
.class2 {
--x: calc(0.5 * var(--x));
font-size: var(--x);
}
<div class="class2">
Test - doesn't work as intended
</div>
By the looks of it not only does the calculcation not work - which is unfortunate by itself - but it even seems to invalidate the custom property for .class2.
Just to make sure the formula/approach of using other variables to create computed variables in general is valid:
:root {
--x: 4em;
}
.class2 {
--y: calc(0.5 * var(--x));
font-size: var(--y);
}
<div class="class2">
Test - <strike>doesn't</strike> works as intended
</div>

Bootstrap, scss, use some class name in scss code instead of writing it in html files [duplicate]

This question already has answers here:
How to extend css class with another style?
(7 answers)
Closed 4 years ago.
In Bootstrap 4 I can use text-truncate as a class in an element. Eg:
<span class="text-truncate">Any very long text</span>
What I need now is to use this class text-truncate in a scss file for many objects instead of writing it directly in .html files.
How to?
Can I use something like:
#import "text-truncate" from "bootstrap.scss";
.myBeautifulDiv {
use text-truncate;
}
This would be great! Is it possible?
U can create placeholder classes in scss,
Placeholder classe names start with %.They, themselves, will not be included in the the output css files.
But they can be imported into other classes. Check example below.
Just remember to load your bootstrap css first.
/*In bootstrap file*/
.text-truncate{
text-overflow:ellipsis;
...
...
}
/*In your scss file*/
%truncatedtext { /*This is placeholder class*/
#extend .text-truncate; /*This will include/pull the actual bootstrap code*/
}
.class-a {
#extend %truncatedtext;
color: #000000;
}
.class-b {
#extend %truncatedtext;
color: red;
}
Its output will be
.text-truncate, .class-a, .class-b {
/*trucate css code*/
}
.class-a {
color: #000000;
}
.class-b {
color: red;
}
Totally possible. Go here (https://getbootstrap.com/docs/4.1/getting-started/download/), click "Download Source", and what you're looking for is probably in the _scss folder.

This.color in css? [duplicate]

This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
Or maybe there's preprocessor solution.
Suppose you have 20 buttons. Each with a different color.
The colors are set like this:
button {
background: red;
}
So you can write something like this
button:hover {
this.background: darken(10%);
}
And this will darken each button's background color.
Instead of writing color codes for each button which is red, blue, green, etc... And this can be applied also to more CSS properties.
Without JS of course.
Do they plan to introduce it? Is there a solutin via SASS/LESS/Stylus ?
There is nothing like that in Sass, but you can use a mixin like this code:
#mixin addColor($color) {
background: $color;
&:hover {
background: darken($color, 10%);
}
}
.foo {
#include addColor(red);
}
.anotherFoo {
#include addColor(blue);
}

Remove space between element and class [duplicate]

This question already has an answer here:
Concatenating nested classes using SASS [duplicate]
(1 answer)
Closed 8 years ago.
I have the following:
div {
.demo {
color: #000;
}
}
Which Outputs:
div .demo { color: #000; }
However, I need it to output without the space between the element and the class:
div.demo { color: #000; }
Is there any way to do this using SASS Nesting?
Use & to combine a selector with its parent:
div {
&.demo {
color: #000;
}
}
You can use the ampersand in front of .demo to achieve this.
div {
&.demo {
color: #000;
}
}
The ampersand character is a placeholder for whatever the parent element is.

Get parent attribute value in sass [duplicate]

This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 9 years ago.
I am trying to create a top level <a> styling for the for my application using sass. Most of the links across the site are green so I have this as a style. (I'm using compass for the darken function)
a {
color: green;
&:hover {
color: darken(green, 10%);
}
}
However, in certain cases the links aren't green. In these cases I'll have to specify both the text color and the hover color, otherwise it will default to hovering to green. I am wondering if there is a way to do this DRYer. Ideally I would be able to get the parent classes color, like so.
a {
color: green;
&:hover {
color: darken(parent(color), 10%);
}
}
That way the hover will always default to whatever the color of the specific is. Does this make sense? Is something like this possible? If not, what's the best way to handle this? A Mixin?
Thanks!
What you ask is not possible with SASS. SASS does not build an object model with all elements and properties (it is impossible without HTML).
A mixin is an appropriate solution for a reusable case, but for an ad-hoc case it is an overkill.
Just use a variable:
a {
$link-color: green;
color: $link-color;
&:hover {
color: darken($link-color, 10%);
}
}
Note that you can move the variable into a separate partial where you store all your variables.
I'd use a mixin:
#mixin link($color) {
a { color: $color};
&:hover { color: darken($color, 10%) };
}
.foo {
#include link(green);
}
Rendered CSS:
.foo a { color: green; }
.foo a:hover { color: #004d00; }

Resources