Синтаксис SASS и CSS в примерах. Разница между SASS и CSS. Что выбрать? Существует два разных синтаксиса SASS и SCSS. Различия в написании кода: SASS синтаксис базируется на отступах, а SCSS имеет подобный css синтаксис.
Существует два разных синтаксиса:
- SASS синтаксис базируется на отступах
- SCSS синтаксис подобный css
Пример SASS:
1
2
3
4
| $c: #f00
body
background-color: $c
color: #fff |
$c: #f00
body
background-color: $c
color: #fff
Пример SCSS:
1
2
3
4
5
| $c: #f00;
body{
background-color: $c;
color: #fff;
} |
$c: #f00;
body{
background-color: $c;
color: #fff;
}
Из-за отсутствия фигурных скобок и точек с запятой синтаксис SASS становится существенно короче, а SCSS максимально приближен к CSS, что делает переход на него максимально «безболезненным». Ещё одним преимуществом SCSS является то, что он совместим с CSS (возможна вставка кода css).
Комментарии
1
2
3
4
| // однострочный комментарий
/*
многострочный комментарий
*/ |
// однострочный комментарий
/*
многострочный комментарий
*/
Вложенные селекторы
1
2
3
4
| body
background: #fff
div
width: 100px |
body
background: #fff
div
width: 100px
Родительский селектор
1
2
3
4
| body
background: #fff
& > div
width: 100px |
body
background: #fff
& > div
width: 100px
Подключение файлов
Переменные
1
2
3
4
5
| $a: #f00 // объявление переменной в начале
body
background-color: $a
$c: #0f0
color: $c // объявление переменной внутри селектора |
$a: #f00 // объявление переменной в начале
body
background-color: $a
$c: #0f0
color: $c // объявление переменной внутри селектора
Переменные доступны только в пределах того уровня вложенности селекторов, на котором они определены!
Чтобы сделать переменную глобальной необходимо:
Миксины
1
2
3
4
5
6
7
8
9
| @mixin my_styles
background-color: #f00
div
width: 100px
height: 100px
background-color: #fff
body
@include my_styles |
@mixin my_styles
background-color: #f00
div
width: 100px
height: 100px
background-color: #fff
body
@include my_styles
Миксины с параметрами
1
2
3
4
5
6
7
8
9
10
11
| $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) |
$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)
Миксины с объёмными аргументами
1
2
3
4
5
| @mixin my_styles($s...)
background-color: $s
body
@include my_styles(rgba(255, 0, 0, 0.7)) |
@mixin my_styles($s...)
background-color: $s
body
@include my_styles(rgba(255, 0, 0, 0.7))
Блоки @content в миксинах
1
2
3
4
5
6
7
8
9
10
11
12
| @mixin colors
body
@content
@include colors
div
background-color: #f00
Исходный css код:
body div {
background-color: #f00;
} |
@mixin colors
body
@content
@include colors
div
background-color: #f00
Исходный css код:
body div {
background-color: #f00;
}
Область видимости в миксинах
1
2
3
4
5
6
| $color: #f00
@mixin colors($color: #0f0)
background-color: $color
body
@include colors($color: $color) |
$color: #f00
@mixin colors($color: #0f0)
background-color: $color
body
@include colors($color: $color)
Операции в SASS
+, -, *, /, % (остаток от деления по модулю), ()
1
2
| body
padding: 10px + 20px |
body
padding: 10px + 20px
Встроенные функции
darken(#f00, 20%) — делает цвет темнее
lighten(#f00, 20%) — делает цвет светлее
transpatentize(#f00, 1) — устанавливает значение opacity (1 не прозрачный)
opacify(#f00, 0.5) — аналог transpatentize
1
2
3
4
| div
color: darken(#f00, 20%)
&:hover
color: lighten(#f00, 20%) |
div
color: darken(#f00, 20%)
&:hover
color: lighten(#f00, 20%)
Собственные функции
1
2
3
4
| @function myfunction($a, $b)
@return $a + $b - 10;
div
width: myfunction(30px, 100px) |
@function myfunction($a, $b)
@return $a + $b - 10;
div
width: myfunction(30px, 100px)
Пример с собственной функцией, которая удаляет единицы измерения у передаваемых параметров
1
2
3
4
| @function remove-module($n)
@return $n / ($n * 0 + 1)
div
width: remove-module(100px) * 1em // добавляем желаемую единицу измерения результата |
@function remove-module($n)
@return $n / ($n * 0 + 1)
div
width: remove-module(100px) * 1em // добавляем желаемую единицу измерения результата
Наследование
1
2
3
4
5
| .class1
color: #f00
.class2
background-color:#ccc
@extend .class1 // наследует класс <strong>class1</strong> |
.class1
color: #f00
.class2
background-color:#ccc
@extend .class1 // наследует класс <strong>class1</strong>
Наследование с некомпилируемым классом
1
2
3
4
5
| %class1
color: #f00
.class2
background-color:#ccc
@extend %class1 // наследует класс <strong>class1</strong> причём данного класса в css не будет! |
%class1
color: #f00
.class2
background-color:#ccc
@extend %class1 // наследует класс <strong>class1</strong> причём данного класса в css не будет!
Оператор if else
1
2
3
4
5
6
7
8
| $a: 2;
div
@if $a == 0
width: 100px
@else if $a > 2 {
width: 300px
@else
width: 200px |
$a: 2;
div
@if $a == 0
width: 100px
@else if $a > 2 {
width: 300px
@else
width: 200px
Циклы
Цикл for
@for $i from начальное значение through конечное значение
тело цикла
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| @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%;
} |
@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| @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') |
@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| $i: 0;
@while $i < 3{
.block-#{$i}
width: 25%
$i: $i + 1
}
Результат:
.block-1{
width: 25%;
}
.block-2{
width: 25%;
}
.block-3{
width: 25%;
} |
$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 /
5495 Views /
7 комментариев