Polkovn1k

.someInput::placeholder {
  color: red;
  font-size: 12px;
}

.someInput:focus::placeholder {
  color: green;
}

.someInput:hover::placeholder {

Polkovn1k

  .someClass {
      width: calc(100% + #{$variable});/* if $variable in another unit */
  }

Polkovn1k

//-------------Light -v
* {
  outline: 1px dashed lightgray;
}

//-------------Full -v
*:not(path):not(g) {
  color: hsla(210, 100%, 100%, 0.9) !important;
  background: hsla(210, 100%,  50%, 0.5) !important;
  outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

Polkovn1k

<picture>
  <source type="image/webp" media="(min-width: 1250px)" srcset="img/desktop@x1.webp 1x, img/desktop@x2.webp 2x">
  <source type="image/webp" media="(min-width: 768px)" srcset="img/tablet@x1.webp 1x, img/tablet@x2.webp 2x">
  <source type="image/webp" srcset="img/mobile@x1.webp 1x, img/mobile@x2.webp 2x">
  
  <source media="(min-width: 1250px)" srcset="img/desktop@x1.jpg 1x, img/desktop@x2.jpg 2x">
  <source media="(min-width: 768px)" srcset="img/tablet@x1.jpg 1x, img/tablet@x2.jpg 2x">
  <img src="img/mobile@x1.jpg" srcset="img/mobile@x1.jpg 1x, img/mobile@x2.jpg 2x" alt="" title="">
</picture>

Polkovn1k

<!-- SVG-IMG -->
<svg width="" height="" class="" role="img">
  <title>Title Text</title>
  <use xlink:href='#someId'/>
</svg>

<!-- SVG-BG -->
<svg width="" height="" class="" aria-hidden="true" role="presentation">
  <use xlink:href='#someId'/>
</svg>

Polkovn1k

<!-- inside input -->
<label class="label-1">
  <input type="radio" name="radio" checked>
  <span>Стилизуемый элемент</span>
</label>

<style>
.label-1 input:checked ~ span::before {
  background-image: radial-gradient(circle, #000000 50%, #ffffff 50%);
}

Polkovn1k

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

Polkovn1k

<div class="video__container">
    <iframe width="" height="" src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</div>

<style>
.video__container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;

Polkovn1k

//Многострочный текст. Нельзя задавать padding элементу, иначе работать будет криво
.someSelector {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

//Однострочный текст

Polkovn1k

* {
    //Сделать цвет темнее
    background-color: darken($variable, 20%);

    //Сделать цвет светлее
    background-color: lighten($variable, 20%);

    //Добавить цвету полупрозрачности
    background-color: transparentize($variable, 0.5);
}