& 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.
Related
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;
}
}
}
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;
}
}
}
}
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;
}
}
}
I'm working on an SCSS stylesheet, and I have a rule that looks something like this:
.footer-link-row {
color: red;
ul& {
padding: 0;
}
}
I want the ul& line compile to the selector ul.footer-link-row. However, this selector returns a compiler error, and using a &ul compiles to .footer-link-row ul. What's the correct way to select something like this?
--Added--
To clarify, the eventual CSS I want out of this is:
.footer-link-row {
color: red;
}
ul.footer-link-row {
padding: 0;
}
You want something like the following:
ul {
padding: 0;
.footer-link-row {
color: red;
}
}
The ampersand is used to require that both selectors match
a { text-decoration: none;
&:hover { border-width: 1px }
}
// compiles to
a {
text-decoration: none;
}
a:hover {
border-width: 1px;
}
If you want the ul.footer-link-row try
ul {
&.footer-link-row {
padding: 0;
}
.footer-link-row {
color: red;
}
}
Your clarification indicates that you need two scopes.
ul {
&.footer-link-row {
padding: 0;
}
}
.footer-link-row {
color: red;
}