Синтаксис препроцессора SASS и SCSS

Синтаксис SASS и CSS в примерах. Разница между SASS и CSS. Что выбрать? Существует два разных синтаксиса SASS и SCSS. Различия в написании кода: SASS синтаксис базируется на отступах, а SCSS имеет подобный css синтаксис.

Существует два разных синтаксиса:

SASS синтаксис базируется на отступах
SCSS синтаксис подобный css

Пример SASS:

$c: #f00
body
    background-color: $c
    color: #fff

Пример SCSS:

$c: #f00;
body{
    background-color: $c;
    color: #fff;
}

Из-за отсутствия фигурных скобок и точек с запятой синтаксис SASS становится существенно короче, а SCSS максимально приближен к CSS, что делает переход на него максимально «безболезненным». Ещё одним преимуществом SCSS является то, что он совместим с CSS (возможна вставка кода css).

Вложенные селекторы

body
   background: #fff
   div
      width: 100px

Родительский селектор

body
   background: #fff
   & > div
      width: 100px

Подключение файлов

1	@import "sample.css"

Переменные

$a: #f00 // объявление переменной в начале
body
   background-color: $a
   $c: #0f0
   color: $c // объявление переменной внутри селектора

Переменные доступны только в пределах того уровня вложенности селекторов, на котором они определены!

Чтобы сделать переменную глобальной необходимо:

1 2	div $w: 10px !global

Миксины

@mixin my_styles
  background-color: #f00
  div
    width: 100px
    height: 100px
    background-color: #fff
 
body
  @include my_styles

Миксины с параметрами

$c_w: #00f
 
@mixin my_styles($a, $b, $d: 200px)
  background-color: $a
  div
    width: $d
    height: 100px
    background-color: #fff
 
body
  @include my_styles($c_w, #fff)

Миксины с объёмными аргументами

@mixin my_styles($s...)
  background-color: $s
 
body
  @include my_styles(rgba(255, 0, 0, 0.7))

Блоки @content в миксинах

@mixin colors
  body
    @content
 
@include colors
  div
    background-color: #f00
 
Исходный css код:
body div {
  background-color: #f00; 
}

Область видимости в миксинах

$color: #f00
@mixin colors($color: #0f0)
  background-color: $color
 
body
  @include colors($color: $color)

Операции в SASS
+, -, *, /, % (остаток от деления по модулю), ()

1 2	body padding: 10px + 20px

Встроенные функции

darken(#f00, 20%) — делает цвет темнее
lighten(#f00, 20%) — делает цвет светлее
transpatentize(#f00, 1) — устанавливает значение opacity (1 не прозрачный)
opacify(#f00, 0.5) — аналог transpatentize

div
   color: darken(#f00, 20%)
   &:hover
      color: lighten(#f00, 20%)

Собственные функции

@function myfunction($a, $b)
  @return $a + $b - 10;
div
  width: myfunction(30px, 100px)

Пример с собственной функцией, которая удаляет единицы измерения у передаваемых параметров

@function remove-module($n)
   @return $n / ($n * 0 + 1)
div
   width: remove-module(100px) * 1em // добавляем желаемую единицу измерения результата

Наследование

.class1
   color: #f00
.class2
   background-color:#ccc
   @extend .class1 // наследует класс <strong>class1</strong>

Наследование с некомпилируемым классом

%class1
   color: #f00
.class2
   background-color:#ccc
   @extend %class1 // наследует класс <strong>class1</strong> причём данного класса в css не будет!

Оператор if else

$a: 2;
div
   @if $a == 0
     width: 100px
   @else if $a > 2 {
     width: 300px
   @else
     width: 200px

Циклы

Цикл for

@for $i from начальное значение through конечное значение
тело цикла

@for $i from 1 through 4{
  .block-#{$i}
      width: 25%
}
 
Результат:
.block-1{
      width: 25%;
}
.block-2{
      width: 25%;
}
.block-3{
      width: 25%;
}
.block-4{
      width: 25%;
}

through и to позволяют проходить по циклу включая / не включая конец цикла. through — включает конец цикла. to — не включает конец цикла

Цикл @each

@each $i in vk, facebook, twitter {
  .#{$i}-icon
    background-image: url('/img/#{$i}.jpg')
 
}
или
$sseti: vk, facebook, twitter // список или карта значений
@each $i in vk, facebook, twitter {
  .#{$i}-icon
    background-image: url('/img/#{$i}.jpg')
}
 
Результат:
.vk-icon
   background-image: url('/img/vk.jpg')
.facebook-icon
   background-image: url('/img/facebook.jpg')
.twitter -icon
   background-image: url('/img/twitter .jpg')

Цикл while

$i: 0;
@while $i < 3{
  .block-#{$i}
      width: 25%
   $i: $i + 1
}
 
Результат:
.block-1{
      width: 25%;
}
.block-2{
      width: 25%;
}
.block-3{
      width: 25%;
}

5 апреля 2018 /

5118 Views /

7 комментариев