https://github.com/zhipenglin/bemify
sass中的bem
https://github.com/zhipenglin/bemify
Last synced: about 1 year ago
JSON representation
sass中的bem
- Host: GitHub
- URL: https://github.com/zhipenglin/bemify
- Owner: zhipenglin
- License: mit
- Created: 2017-09-11T06:05:24.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-11T08:07:52.000Z (almost 9 years ago)
- Last Synced: 2025-03-16T01:43:35.050Z (over 1 year ago)
- Language: CSS
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bemify
sass中的bem
input
``` scss
@include block('a-menu'){
float: left;
@include modifier('bigger'){
transform: scale(1.2);
}
@include element('list'){
background: #000;
color:#fff;
@include modifier('blue'){
background:blue;
@include element('item'){
line-height: 1.5;
@include state('active'){
border: solid 1px red;
}
}
}
}
@include element('item'){
line-height: 2;
}
}
```
output
``` css
.a-menu, .a-menu--bigger {
float: left;
}
.a-menu--bigger {
transform: scale(1.2);
}
.a-menu__list, .a-menu__list--blue {
background: #000;
color: #fff;
}
.a-menu__list--blue {
background: blue;
}
.a-menu__list--blue .a-menu__list__item {
line-height: 1.5;
}
.a-menu__list--blue .a-menu__list__item.is-active {
border: solid 1px red;
}
.a-menu__item {
line-height: 2;
}
```