Skip to content

Instantly share code, notes, and snippets.

@deap82

deap82/SassMeister-input-HTML.html

Last active October 16, 2017 15:28
Show Gist options
  • Save deap82/939aa30c0063aed1dc966208feb2e1aa to your computer and use it in GitHub Desktop.
Save deap82/939aa30c0063aed1dc966208feb2e1aa to your computer and use it in GitHub Desktop.
Download ZIP
Bem/Scss exeperiment
Raw
SassMeister-input-HTML.html
<div class="container">
<div class="block1">
<div class="block1__inner">
</div>
</div>
<div class="block1 block1--bordered">
<div class="block1__inner">
</div>
</div>
<div class="block1">
<div class="block1__inner block1__inner--vertical">
</div>
</div>
<div class="block1 block1--bordered">
<div class="block1__inner block1__inner--vertical">
</div>
</div>
</div>
<div class="container">
<div class="block2">
<div class="block2__inner">
</div>
</div>
<div class="block2 block2--bordered">
<div class="block2__inner">
</div>
</div>
<div class="block2">
<div class="block2__inner block2__inner--vertical">
</div>
</div>
<div class="block2 block2--bordered">
<div class="block2__inner block2__inner--vertical">
</div>
</div>
</div>
<div class="container">
<div class="block3">
<div class="block3__inner">
</div>
</div>
<div class="block3 block3--bordered">
<div class="block3__inner">
</div>
</div>
<div class="block3">
<div class="block3__inner block3__inner--vertical">
</div>
</div>
<div class="block3 block3--bordered">
<div class="block3__inner block3__inner--vertical">
</div>
</div>
</div>
<div class="container">
<div class="block4">
<div class="block4__inner">
</div>
</div>
<div class="block4 block4--bordered">
<div class="block4__inner">
</div>
</div>
<div class="block4">
<div class="block4__inner block4__inner--vertical">
</div>
</div>
<div class="block4 block4--bordered">
<div class="block4__inner block4__inner--vertical">
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
.container {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 500px;
float:left;
margin-right:50px;
}
.block1 {
width: 100px;
height: 100px;
background-color: #999;
display:flex;
align-items:center;
justify-content: center;
.block1__inner {
height: 20px;
width: 70%;
background-color: #ccc;
&.block1__inner--vertical {
transform: rotate(90deg);
}
}
&.block1--bordered {
box-sizing: border-box;
border: 2px solid #666;
.block1__inner {
border: 2px solid #666;
}
}
}
.block2 {
@mixin bem-element($name) {
@at-root #{&}__#{$name} {
@content;
}
}
@mixin bem-modifier($name) {
@at-root #{&}--#{$name} {
@content;
}
}
width: 100px;
height: 100px;
background-color: #999;
display:flex;
align-items:center;
justify-content: center;
@include bem-element(inner) {
height: 20px;
width: 70%;
background-color: #ccc;
@include bem-modifier(vertical) {
transform: rotate(90deg);
}
}
@include bem-modifier(bordered) {
box-sizing: border-box;
border: 2px solid #666;
.block2__inner {
border: 2px solid #666;
}
}
}
.block3 {
width: 100px;
height: 100px;
background-color: #999;
display:flex;
align-items:center;
justify-content: center;
&__inner {
height: 20px;
width: 70%;
background-color: #ccc;
&--vertical {
transform: rotate(90deg);
}
}
&--bordered {
box-sizing: border-box;
border: 2px solid #666;
.block3__inner {
border: 2px solid #666;
}
}
}
$block: block4;
.#{$block} {
width: 100px;
height: 100px;
background-color: #999;
display:flex;
align-items:center;
justify-content: center;
&__inner {
height: 20px;
width: 70%;
background-color: #ccc;
&--vertical {
transform: rotate(90deg);
}
}
&--bordered {
box-sizing: border-box;
border: 2px solid #666;
.#{$block}__inner {
border: 2px solid #666;
}
}
}
Raw
SassMeister-output.css
.container { margin-top: 20px; display: flex; flex-direction: column; justify-content: space-around; height: 500px; float: left; margin-right: 50px; }
.block1 { width: 100px; height: 100px; background-color: #999; display: flex; align-items: center; justify-content: center; }
.block1 .block1__inner { height: 20px; width: 70%; background-color: #ccc; }
.block1 .block1__inner.block1__inner--vertical { transform: rotate(90deg); }
.block1.block1--bordered { box-sizing: border-box; border: 2px solid #666; }
.block1.block1--bordered .block1__inner { border: 2px solid #666; }
.block2 { width: 100px; height: 100px; background-color: #999; display: flex; align-items: center; justify-content: center; }
.block2__inner { height: 20px; width: 70%; background-color: #ccc; }
.block2__inner--vertical { transform: rotate(90deg); }
.block2--bordered { box-sizing: border-box; border: 2px solid #666; }
.block2--bordered .block2__inner { border: 2px solid #666; }
.block3 { width: 100px; height: 100px; background-color: #999; display: flex; align-items: center; justify-content: center; }
.block3__inner { height: 20px; width: 70%; background-color: #ccc; }
.block3__inner--vertical { transform: rotate(90deg); }
.block3--bordered { box-sizing: border-box; border: 2px solid #666; }
.block3--bordered .block3__inner { border: 2px solid #666; }
.block4 { width: 100px; height: 100px; background-color: #999; display: flex; align-items: center; justify-content: center; }
.block4__inner { height: 20px; width: 70%; background-color: #ccc; }
.block4__inner--vertical { transform: rotate(90deg); }
.block4--bordered { box-sizing: border-box; border: 2px solid #666; }
.block4--bordered .block4__inner { border: 2px solid #666; }
Raw
SassMeister-rendered.html
<div class="container">
<div class="block1">
<div class="block1__inner">
</div>
</div>
<div class="block1 block1--bordered">
<div class="block1__inner">
</div>
</div>
<div class="block1">
<div class="block1__inner block1__inner--vertical">
</div>
</div>
<div class="block1 block1--bordered">
<div class="block1__inner block1__inner--vertical">
</div>
</div>
</div>
<div class="container">
<div class="block2">
<div class="block2__inner">
</div>
</div>
<div class="block2 block2--bordered">
<div class="block2__inner">
</div>
</div>
<div class="block2">
<div class="block2__inner block2__inner--vertical">
</div>
</div>
<div class="block2 block2--bordered">
<div class="block2__inner block2__inner--vertical">
</div>
</div>
</div>
<div class="container">
<div class="block3">
<div class="block3__inner">
</div>
</div>
<div class="block3 block3--bordered">
<div class="block3__inner">
</div>
</div>
<div class="block3">
<div class="block3__inner block3__inner--vertical">
</div>
</div>
<div class="block3 block3--bordered">
<div class="block3__inner block3__inner--vertical">
</div>
</div>
</div>
<div class="container">
<div class="block4">
<div class="block4__inner">
</div>
</div>
<div class="block4 block4--bordered">
<div class="block4__inner">
</div>
</div>
<div class="block4">
<div class="block4__inner block4__inner--vertical">
</div>
</div>
<div class="block4 block4--bordered">
<div class="block4__inner block4__inner--vertical">
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment