I know you can specify if an element has a specific parent using &:
.btn {
.btn-group & {
color: blue;
}
}
But can you also say if the parent is btn-group and .btn-group is the first child?
Something like:
.btn {
.btn-group & &:first-child {
color: blue;
}
}
But that doesn't seem to work.
I worked out that I can do:
.btn {
.btn-group:first-child & {
color: blue;
}
}
But couldn't find a way to have multiple pseudo selectors (except using the above syntax with comma separated):
// This doesn't work :(
.btn {
.btn-group & {
&:first-child,
&:last-child {
color: blue;
}
}
}
Related
Let's say I have the following css:
.foo {
color: red;
}
.bar {
color: blue;
}
I want the final css to look like this:
.scope.foo {
color: red;
}
.scope.bar {
color: blue;
}
But I want to be able to just paste it somewhat unaltered, like some boilerplate that works like this:
.scope-class {
??? {
// put css here
}
}
Example:
.scope {
& {
.foo {
color: red;
}
.bar {
color: blue;
}
}
}
Obviously this doesn't work, but is there any way of archiving something like this, but keeping the css inside unaltered? I don't want to modify every selector like &.foo &.bar...
You could simply nest these classes in SCSS like this:
.scope {
&.foo {
color: red;
}
&.bar {
color: blue;
}
}
How to apply the same focus state to multiple different classes?
Problem:
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&:focus {
border-color: blue;
// this is not applied but i don't want to
// declare the same style to both classes
}
}
I understand this would be one option, but it is also not the prettiest option as i need to list them separately here
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&.primary:focus, &.error:focus {
border-color: blue;
}
}
Are there any better ways?
Using & again in the nested rule is a good way for your purpose.
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&.primary, &.error {
&:focus{
border-color: blue;
}
}
}
& is parent's name so I tried
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected&--unAllocated {
background: yellow;
}
}
but it is not work
I had to do this.
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected.assigItem--unAllocated {
background: yellow;
}
}
Let me know if there's a better way
You should use scss interpolation.
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected#{&}--unAllocated {
background: yellow;
}
}
Tested on sassmeister, libsass v3.5.4 — demo.
I'm trying to group all my vendor-specific stuff into a placeholder selector like this:
%search-bar-placeholder {
color: red;
}
.search-bar::-webkit-input-placeholder {
#extend %search-bar-placeholder;
}
.search-bar:-moz-placeholder {
#extend %search-bar-placeholder;
}
.search-bar::-moz-placeholder {
#extend %search-bar-placeholder;
}
.search-bar:-ms-input-placeholder {
#extend %search-bar-placeholder;
}
And then it compiles to this:
.search-bar::-webkit-input-placeholder, .search-bar:-moz-placeholder, .search-bar::-moz-placeholder, .search-bar:-ms-input-placeholder {
color: red; }
How can I make sure Sass doesn't put all the selectors together ? Like this:
.search-bar::-webkit-input-placeholder {
color: red;
}
.search-bar:-moz-placeholder {
color: red;
}
.search-bar::-moz-placeholder {
color: red;
}
.search-bar:-ms-input-placeholder {
color: red;
}
When looking at Extend/Inheritance at sass-lang.com it seems that the selectors will always be comma separated. Even if you add another property, it will keep the shared properties in the comma separated list, and add another selector just for that overridden value.
The way I achieved what you want is by using a mixin. Though it's not really the purpose of a mixin, it does get the job done. Your style is still centralized and you can print it out in each selector using a one liner too.
#mixin placeholder-properties() {
color: red;
font-weight: bold;
}
.search-bar::-webkit-input-placeholder {
#include placeholder-properties();
}
.search-bar:-moz-placeholder {
#include placeholder-properties();
}
.search-bar::-moz-placeholder {
#include placeholder-properties();
}
.search-bar:-ms-input-placeholder {
#include placeholder-properties();
}
The result will the following.
.search-bar::-webkit-input-placeholder {
color: red;
font-weight: bold;
}
.search-bar:-moz-placeholder {
color: red;
font-weight: bold;
}
.search-bar::-moz-placeholder {
color: red;
font-weight: bold;
}
.search-bar:-ms-input-placeholder {
color: red;
font-weight: bold;
}
Here's a fiddle.
I write CSS in BEM style and have this code:
.nav {
&__list {
&__item {
}
}
&__link {
&--active {
}
}
}
How do I get .nav .nav__link--active and .nav__link.nav__link--active from code above? How can I enhance the specificity by this method?
There is no magic method for this. Store the desired selector as a variable and nest like normal.
.nav {
$sel: &;
&__list {
&__item {
color: red;
#{$sel} & {
border: 1px solid;
}
}
}
&__link {
&--active {
color: blue;
#{$sel} & {
border: 1px dashed;
}
}
}
}