Pickra

@mixin pre-focus-styles {
  outline: none;
  transition: box-shadow 0.15s;
}

// Apply within :focus
@mixin focus-styles {
  box-shadow: 0 0 0 2px var(--color-focusOutline), 0 0 0 6px var(--color-focusOutline-light);
}

Pickra

@mixin pre-focus-styles {
  outline: none;
  transition: box-shadow 0.15s;
}

// Apply within :focus
@mixin focus-styles {
  box-shadow: 0 0 0 2px var(--color-focusOutline), 0 0 0 6px var(--color-focusOutline-light);
}

Pickra

$breakpoints: (xs: 350px, sm: 450px, med: 800px, lg: 1200px, xl: 1800px);
$displayValues: none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex;

@each $size, $val in $breakpoints {
    @each $d in $displayValues {
        @media (max-width: $val) {
            .display-#{$size}-#{$d} {
                display: #{$d};
            }
        }

Pickra

$breakpoints: (
  xs: 0em,
  sm: 37em,
  md: 64em,
  lg: 90em
);

.cool {
    .stuff {
        @media only screen and (min-width: map-get($breakpoints, sm)) {

Pickra

@mixin background-image-retina($type, $file, $color, $ext) {
    background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}.#{$ext}');
    background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '.' + $ext);
     
     @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (-moz-min-device-pixel-ratio: 2),
        only screen and (-o-min-device-pixel-ratio: 2/1),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 192dpi),
        only screen and (min-resolution: 2dppx){

Pickra

$my-colours: (
   'cyan': (#B2EBF2 #80DEEA #4DD0E1 #26C6DA #00BCD4 #00ACC1),
   'blue': (#B2EBF2 #80DEEA #4DD0E1 #26C6DA #00BCD4 #00ACC1)
);

@each $map in $my-colours {
    $name: nth($map, 1);
    $list: map-get($my-colours, $name);

    @for $i from 1 through length($list) {

Pickra

$cool: blue;
$mad: red;

$colors: (
  cool: $cool,
  mad: $mad
);

.prfx-color {
  @each $color in map-keys($colors) {

Pickra

%placeholder {
  display: inline-block;
  &:hover{ color: darken(#FFFFFF, 10%); }  
}

.class-a {
  @extend %placeholder;
  color: #000000;
}

Pickra

@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;
  
  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;

Pickra

// best solution, goes w/OLD NO JS w/:checked
@for $i from 1 through 20 {
  p.content { display: none; }
  
  .radio-btn:checked[tab="#{$i}"] ~ .content[tab="#{$i}"] {
    display: block;
  }
// end best