Comments (17)
Haha thanks!
I have another request, instead of using @include parse('b:blockName')
to mimic the & { }
can we use @include parse('&')
?
This would make it so we can do this for blocks, elements, and modifiers.
Right now in the code there is a little shortcut where you can type @include parse(' ')
and it has the same effect, but I'd prefer to not use an empty space and use an &
so it's more explicit and familiar. What do you think?
from sass-bem.
Now you can upgrade to 2.3.3
and use &
symbol in parse mixin. I'll close this issue for now ;)
from sass-bem.
Hi @DTwigs, to do this your code should look like this:
// .block
@include b(block) {
display: blockish;
// .block:hover
@include hover {
display: hover-state;
}
// .block--hover
@include m(hover) {
display: hover-state;
}
}
There is no way to write this two selectors separated by comma yet, but I'm going to add this support.
from sass-bem.
Thanks for the help!
from sass-bem.
You are welcome!
from sass-bem.
Hi @zgabievi, I'm on the cusp of deciding to migrate our whole site to sass-bem. I am curious if you have a time line as to when you could implement the multi selector mixins?
from sass-bem.
Hi @DTwigs, I've created parse() mixin, which is in 61fc0db. I'll write some documentation and than will be change version to 2.3.0
from sass-bem.
Oh sweet, I'll check it out. Thanks!
from sass-bem.
This is looking pretty good but I think there is a bug. The parse method is outputting the modifier classes without the base block class. It is also adding the styles from the modifier to the block style.
@include b('button') {
background-color: red;
@include parse('m:hover', ':hover') {
color: blue;
}
}
outputs:
.button {
background-color: red;
color: blue;
}
--hover, .button:hover {
color: blue;
}
So it looks like the m:hover
isn't appending the block name. Am I using this correctly?
from sass-bem.
I've made some changes, but I couldn't reproduce your issue. Can you try this one more time with 2.3.1 release? Changes are in 9f0bc61
from sass-bem.
Looking good. The most recent changes have fixed the issue that I was seeing. I'm going to start working on translating our project over to sass-bem. Thank you very much!
from sass-bem.
As I'm going through I have a couple questions.
How can I write this in sass-bem?
.button {
&,
&--small {
color: blue;
}
}
Is there a way to write that without repeating color: blue
?
One more scenario:
.button {
&--disabled, &[disabled] {
background-color: grey;
}
}
Since [disabled]
is an attribute selector and not a pseudo selector, is there a way to write that with sass-bem?
from sass-bem.
First please update to 2.3.2, or follow this commit 73234b2;
For the first question, use:
@include b('button') {
@include parse('b:button', 'm:small') {
color: blue;
}
}
Outputs:
.button, .button--small {
color: blue;
}
Second scenario:
@include b('button') {
@include parse('m:disabled', '[disabled]') {
background-color: grey;
}
}
Outputs:
.button--disabled, .button[disabled] {
background-color: grey;
}
from sass-bem.
Wow, you are on top of this. Thanks! This is great!
I am having trouble installing the 2.3.2 version. Did you publish it to npm?
npm ERR! No compatible version found: sass-bem@^2.3.2
npm ERR! Valid install targets:
npm ERR! 2.3.1, 2.3.0, 2.2.1, 2.2.0, 2.1.1, 2.1.0, 1.0.0, 0.2.1, 0.2.0
from sass-bem.
Sorry, I was pretty sure that I published it :D
from sass-bem.
There you go NPM
from sass-bem.
Great idea. I'll do that ;)
from sass-bem.
Related Issues (8)
- The output is not correct HOT 1
- Wrapping blocks with nested elements with a container class
- Disable debug by default HOT 1
- Issue with nested active states HOT 4
- Issues with nested elements HOT 3
- [Proposal] Add support for both: before and after at the same time. HOT 10
- mistake in docs v2.5.3 - mixin At - section Usage HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sass-bem.