emmabostian

Seven different types of CSS attribute selectors

// This attribute exists on the element
[value]

// This attribute has a specific value of cool
[value='cool'] 

// This attribute value contains the word cool somewhere in it
[value*='cool'] 

frontendbeast

// Instead of doing this
@mixin svg-after($name) {
    &:after {
        @include svg($name);
    }
}

@mixin svg-before($name) {
    &:before {
        @include svg($name);

imjared

// breakpoint helpers based on bootstrap's breakpoints

@mixin xs {
    @media #{screen} and (max-width: #{$screen-xs-max}) {
        @content;
    }
}

@mixin sm {
    @media #{screen} and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {

soderalohastrom

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

YamilG

@mixin coverer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@mixin centerer {
  position: absolute;

pixelchar

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

razwan

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

dieppon

@mixin min-height($value){
	height: auto !important;
	height: $value;
	min-height: $value;
}

@mixin max-height($value){
	height: auto !important;
	height: $value;
	max-height: $value;

terkel

@mixin subclass ($superclass) {
    .#{ $superclass },
    [class^="#{ $superclass }-"],
    [class*=" #{ $superclass }-"] {
        @content;
    }
}

lisasy

@mixin equal-gutter($direction: top, $value: 1em) {
  padding-#{$direction}: $value;
  margin-#{$direction}: $value;
}