SCSS стилі особливості

Призначення та використання змінних

$bg-color: #999;

body{
  background-color: $bg-color;
}

Спадкування властивостей іншого класу

.block3 {
  @extend .block2;
}

Експортувати клас до іншого класу

.block3 {
  @extend .block2;
}

Експортувати клас до іншого класу. Але якщо клас не де не експортується то файл css він не потрапить

%for-block3 {
  position: relative;
}


.block3 {
  @extend %for-block3;
}

Використання міксинів

@mixin paragraphs {
  font-size: 18px;
}

p {
  @include paragraphs;
}

@mixin paragraphs2 {
  p {
    line-height: 20px; @content;
  }
}
@include paragraphs2 {
  b {
    color: yellow;
  }
  i {
    color: aqua;
  }
}

Передача в міксин змінних

@mixin paragraphs($fs: 18px, $lh: 20px, $color: #000) {
  p {
    font-size: $fs;
    line-height: $lh;
    color: $color;
   }
}

//@include paragraphs(18px, 20px, #000) {
//@include paragraphs($color: #fff) {
//$value: 25px, 30px, #fff;
$value: (color: #000, fs: 20px, lh:24px);
@include paragraphs($value...) {

Директива @if

@mixin button($border: false) {
  @if($border == true){
    border: 2px solid $bg-and-border-color;
  } @else if $border == false {
    background-color: $bg-and-border-color;
  }
}

Створення функцій

@function ls-to-css($interval, $fs: 16px, $type: em) {
  @if ($type == em) {
	@return $interval / 1000 + em;
  } @else if($type == px) {
	@return $interval * $fs / 1000;
  }
}

Вбудовані функції

background-color: darken($bg-and-border-color, 10);// затемняє на 10%
background-color: lighten($bg-and-border-color, 20);// робить світлішою на 20%

Директиви @for, @each та @while

@for $i from 1 through 5 {
  .image_#{$i} {
    background: url("img/image-#{$i}.png");
  }
}

$floats: (left, right, none);
@each $float in $floats {
  .float--#{$float} {
    float: #{$float};
  }
}

$colors: (white: #fff, black: #000, red: #f00, blue: #00f, green: #0f0);
@each $name, $value in $colors {
  .color--#{$name} {
    color: #{$value};
  }
}

$i: 1;
@while $i <= 5 {
  .block-#{$i} {
    width: $i * 100px;
  }
  $i: $i + 1;
}