I've previously used a mixin format for creating BEM-based selectors that would allow me to do something like this:
.block {
@include e(element) {
@include m(modifier) {...}
}
}| if [[ $# -eq 0 ]]; then | |
| project=${PWD##*/} | |
| elif [[ $# -eq 1 ]]; then | |
| project=$1 | |
| mkdir $project && cd $project | |
| else | |
| echo "Usage:" | |
| echo -e '\tType "craft [project]" to create a project with a specific name' | |
| echo -e '\tType "craft" within a blank project folder to take that folder as the project name' | |
| exit 1 |
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| $bem: ( | |
| namespace: "-", | |
| modifier: "--", | |
| descendent: "__" | |
| ); |
I've previously used a mixin format for creating BEM-based selectors that would allow me to do something like this:
.block {
@include e(element) {
@include m(modifier) {...}
}
}| $xs: ( max: 767px ); | |
| $sm: ( min: 768px ); | |
| $md: ( min: 992px ); | |
| $lg: ( min: 1200px ); | |
| $sm-only: ( min: map-get($sm, min), max: map-get($md, min) - 1 ); | |
| $md-only: ( min: map-get($md, min), max: map-get($lg, min) - 1 ); | |
| @mixin breakpoint($map) { | |
| $query: ""; | |
| @if map-has-key($map, min) { $query: append($query, "(min-width: #{map-get($map, min)})") } |
| // ---- | |
| // Sass (v3.4.1) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @function decimal($percentage) { | |
| $decimal: $percentage / 100; // Returns the number as a decimal | |
| $decimal: $decimal / ($decimal * 0 + 1); // Removes the % unit off the number | |
| @return $decimal; | |
| } |
| @mixin breakpoint($min: 0, $max: 0) { | |
| $type: type-of($min); | |
| @if $type == string { | |
| @if $min == xs { | |
| @media (max-width: 767px) { @content; } // Mobile Devices | |
| } | |
| @else if $min == sm { | |
| @media (min-width: 768px) { @content; } // Tablet Devices |
| window.onscroll = function() { | |
| var speed = 4.0; | |
| var ypos = -window.pageYOffset / speed + "px"; | |
| var xpos = "50%"; | |
| var elems = document.getElementsByClassName('parallax'); | |
| for (var i = elems.length - 1; i >= 0; i--) { | |
| elems[i].style.backgroundPosition = xpos +" "+ ypos; | |
| }; | |
| } |
| # SUPER DARING APP TEMPLATE 1.0 | |
| # By Peter Cooper | |
| # Link to local copy of edge rails | |
| inside('vendor') { run 'ln -s ~/dev/rails/rails rails' } | |
| # Delete unnecessary files | |
| run "rm README" | |
| run "rm public/index.html" | |
| run "rm public/favicon.ico" |