snippets_csssass.md

CSS & SASS Cheatsheet 🤘

На главную

Содержание

• CSS
  • Bootstrap Colors & Breakpoints
  • Custom Checkbox & Radio
  • Custom Scrollbar
  • Custom Placeholder
  • Visually Hidden
• SASS
  • Bootstrap Colors & Breakpoints
  • Strip Unit Function
  • Rem Function
  • Reset Mixin
  • Flex Center Mixin
  • Placeholder Mixin
  • Fluid Font Mixin
  • Arrow Mixin
  • Respond Above Mixin

CSS

Bootstrap Colors & Breakpoints

:root {
  --primary: #0275d8;
  --success: #5cb85c;
  --info: #5bc0de;
  --warning: #f0ad4e;
  --danger: #d9534f;
  --light: #f7f7f7;
  --dark: #292b2c;

  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --xxl: 1400;
}

Custom Checkbox & Radio

Checkbox

<input type="checkbox" class="custom-checkbox" id="happy" name="happy" value="yes">
<label for="happy">Happy</label>

.custom-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.custom-checkbox + label::before {
  margin-right: 0.5em;
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 75% 75%;
  transition: 0.1s ease-in-out;
}

.custom-checkbox:checked + label::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* hover */
.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
  border-color: #b3d7ff;
}
/* active */
.custom-checkbox:not(:disabled):active + label::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
/* focus */
.custom-checkbox:focus + label::before {
  box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
/* focus & !checked */
.custom-checkbox:focus:not(:checked) + label::before {
  border-color: #80bdff;
}
/* disabled */
.custom-checkbox:disabled + label::before {
  background-color: #e9ecef;
}

Radio

<div>
  <input
    class="custom-radio"
    name="color"
    type="radio"
    id="color-red"
    value="red"
  />
  <label for="color-red">Red</label>
</div>
<div>
  <input
    class="custom-radio"
    name="color"
    type="radio"
    id="color-green"
    value="green"
  />
  <label for="color-green">Green</label>
</div>
<div>
  <input
    class="custom-radio"
    name="color"
    type="radio"
    id="color-blue"
    value="blue"
  />
  <label for="color-blue">Blue</label>
</div>

.custom-radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-radio + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.custom-radio + label::before {
  margin-right: 0.5em;
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60% 60%;
  transition: 0.1s ease-in-out;
}
/* hover */
.custom-radio:not(:disabled):not(:checked) + label:hover::before {
  border-color: #b3d7ff;
}
/* active */
.custom-radio:not(:disabled):active + label::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
/* focus */
.custom-radio:focus + label::before {
  box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
/* focus & !checked */
.custom-radio:focus:not(:checked) + label::before {
  border-color: #80bdff;
}
/* checked */
.custom-radio:checked + label::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* disabled */
.custom-radio:disabled + label::before {
  background-color: #e9ecef;
}

Custom Scrollbar

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: #e0e0e0;
}

::-webkit-scrollbar-thumb {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  background-color: deepskyblue;
  border-radius: 2px;
}

Custom Placeholder

::-webkit-input-placeholder {
  font-size: 0.8rem;
  opacity: 0.8;
}
::-moz-placeholder {
  font-size: 0.8rem;
  opacity: 0.8;
}
:-moz-placeholder {
  font-size: 0.8rem;
  opacity: 0.8;
}
:-ms-input-placeholder {
  font-size: 0.8rem;
  opacity: 0.8;
}

Visually Hidden

.visually-hidden {
  position: absolute;
  top: -150%;
  z-index: -100;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  user-select: none;
  pointer-events: none;
  cursor: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  outline: none;
  white-space: nowrap;
}

SASS

Bootstrap Colors & Breakpoints

$primary: #0275d8;
$success: #5cb85c;
$info: #5bc0de;
$warning: #f0ad4e;
$danger: #d9534f;
$light: #f7f7f7;
$dark: #292b2c;

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400;

Strip Unit Function

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

Rem Function

$base-font-size: 16px;

@function rem($size) {
  @return #{strip-unit($size / $base-font-size)} + rem;
}

div.box {
  width: rem(320);
  height: rem(320);
  background-color: deepskyblue;
}

Reset Mixin

@mixin reset($font-family, $font-size, $color) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  @if $font-family {
    font-family: $font-family;
  }
  @if $font-size {
    font-size: $font-size;
  }
  @if $color {
    color: $color;
  }
}

* {
  @include reset('Montserrat', 1rem, $dark);
}

Flex Center Mixin

<ul className='row'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul className='col'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

@mixin flex-center($column: false) {
  display: flex;
  justify-content: center;
  align-items: center;

  @if $column {
    & {
      flex-direction: column;
    }
  }
}

ul {
  list-style: none;
  gap: 1rem;

  &.row {
    @include flex-center;
  }

  &.col {
    @include flex-center(true);
  }
}

Placeholder Mixin

@mixin placeholder {
  &.placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

input,
textarea {
  @include placeholder {
    font-size: 0.8rem;
    opacity: 0.8;
  }
}

Fluid Font Mixin

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;

      @media (min-width: $min-vw) {
        font-size: calc(
          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        );
      }

      @media (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

$min_width: 320px;
$max_width: 1280px;
$min_font: 16px;
$max_font: 24px;

html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

Arrow Mixin

<div className='arrow'>
  <div className='top'></div>
  <div className='inner'>
    <div className='left'></div>
    <div className='right'></div>
  </div>
  <div className='bottom'></div>
</div>

@mixin arrow($dir: left, $size: 10px, $color: #3c3c3c) {
  width: 0;
  height: 0;

  @if ($dir == left) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  } @else if ($dir == right) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  } @else if ($dir == bottom) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  } @else {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
}

.arrow {
  @include flex-center(true);
  .inner {
    @include flex-center;
    gap: 1rem;
  }
  .left {
    @include arrow;
  }
  .right {
    @include arrow(right);
  }
  .top {
    @include arrow(top);
  }
  .bottom {
    @include arrow(bottom);
  }
}

Respond Above Mixin

$breakpoints: (
  'sm': $sm,
  'md': $md,
  'lg': $lg,
  'xl': $xl,
  'xxl': $xxl
);

@mixin respond-above($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    @media (min-width: $breakpoint-value) {
      @content;
    }
  }
}

h1 {
  font-size: rem(18px);
  line-height: 150%;
  font-weight: normal;

  @include respond-above(md) {
    font-size: rem(24px);
    font-weight: bold;
  }

  @include respond-above(lg) {
    font-size: rem(30px);
  }
}