niktariy

<div class="box">
  Hi! I'm box
  <div class="box__child">Hi! I'm box child</div>
</div>

niktariy

// ----
// libsass (v3.5.4)
// ----

// Уже есть в препроцессорах

@mixin toolbar-theme($theme-color: late) {
  background-color: hsl(120, 70%, 95%);
  border-radius: 4px;
  border: 1px solid $theme-color;

niktariy

// ----
// libsass (v3.5.4)
// ----

.block {
  font: {
    size: 24px;
    family: "Proxima Nova", sans-serif;
    weight: 600;
  };

niktariy

.error {
  border: 1px #ff0;
  background-color: #fdd;
}

.fatal-error {
  @extend .error; // в CSS будет взят .fatal-error и дописан через запятую к .error
  border-width: 5px;
}

niktariy

/* CSS */

.msg-validation { display: block; }

.input-field:required ~ .msg-validation::before {
  content: '*Обязательное';
}

.input-field:invalid:not(:placeholder-shown) {

niktariy

/* CSS */

.input-field:valid {
  border-color: lightgreen;
  background-color: rgba(lightgreen, 0.1);
}

.input-field:valid ~ .msg-validation::before {
  display: none;
}

niktariy

<!-- HTML -->

<div class="form-group">
  <label for="dis" class="input-label">Имя</label>
  <input class="input-field" type="email" id="dis"
         value="Veronika" disabled>
</div>
<div class="form-group">
  <label for="read" class="input-label">Ваша почта</label>
  <input class="input-field" type="email" id="read"

niktariy

.round-borders(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  background-color: #adc;
  .round-borders(15px);
}

niktariy

$extra_small: 599px
$small: 600px
$medium: 900px
$large: 1200px
$extra_large: 1550px

=xs-only
  @media screen and (max-width: #{$extra_small})
    @content

niktariy

/* single-line comment */
.block {
  --block-box-shadow: rgba(160, 20, 88, 0.2);
  --block-inner-shadow: rgba(189, 20, 90, 1);

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  top: 0;