SlideShare a Scribd company logo
1 of 8
Download to read offline
Препроцессор
(Syntactically Awesome Stylesheets) —
модуль, включенный в Haml. Sass — это
метаязык на основе CSS, предназначенный
для увеличения уровня абстракции CSS кода
и упрощения файлов каскадных таблиц
стилей
Язык Sass имеет два синтаксиса:
● sass — отличается отсутствием фигурных скобок,
в нём вложенные элементы реализованы с
помощью отступов;
● SCSS (Sassy CSS) — использует фигурные скобки,
как и сам CSS.
Препроцессинг
Написание CSS само по себе весело, но когда таблица стилей
становится огромной, то становится и сложно её обслуживать. И
вот в таком случае нам поможет препроцессор. Sass позволяет
использовать функции недоступные в самом CSS, например,
переменные, вложенности, миксины, наследование и другие
приятные вещи, возвращающие удобство написания CSS.
СИНТАКСИС SASS
$font-stack: Helvetica,
sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
онлайн компиляторы
SASS
https://www.sassmeister.com/
http://beautifytools.com/scss-compiler.ph
p
https://www.cssportal.com/scss-to-css/
Миксины (примеси)
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)
«Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти
Европалык Союзу тарыбынан финансылоо болгон.​
Бул документин мазмуну толугу менен IT Академиянын
жоопкерчилиги жана эч кандай жолунда Европалык Комиссиянын
көз карашын көргөзбөйт.​
​
Проект «IT тренинг для людей с ограниченными возможностями»
финансирован Европейским Союзом.​
Содержание этого документа полностью является
ответственностью IT Academy и никак не отражает взгляды
Европейской Комиссии.​
​
#programmingwithoutbarriers
#cheksizprogramming

More Related Content

More from IT Academy Project EU

More from IT Academy Project EU (20)

Переменные PHP.pdf
Переменные PHP.pdfПеременные PHP.pdf
Переменные PHP.pdf
 
Js. alert, prompt, confirm
Js. alert, prompt, confirmJs. alert, prompt, confirm
Js. alert, prompt, confirm
 
Введение в DOM
Введение в DOMВведение в DOM
Введение в DOM
 
JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Что такое framework?
Что такое framework?Что такое framework?
Что такое framework?
 
1.1.1 Text Alternatives
1.1.1 Text Alternatives1.1.1 Text Alternatives
1.1.1 Text Alternatives
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google Fonts
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSS
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)
 
4.5 Веб-дизайн
4.5 Веб-дизайн4.5 Веб-дизайн
4.5 Веб-дизайн
 
3.5.5 Свойства Margin
3.5.5 Свойства Margin3.5.5 Свойства Margin
3.5.5 Свойства Margin
 
3.5.4 Свойства Padding
3.5.4 Свойства Padding3.5.4 Свойства Padding
3.5.4 Свойства Padding
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS
 
CSS - Цвета
CSS - ЦветаCSS - Цвета
CSS - Цвета
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторы
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта
 
2.4.7 HTML - Формы
2.4.7 HTML - Формы2.4.7 HTML - Формы
2.4.7 HTML - Формы
 
CSS - Basic properties and attributes
CSS - Basic properties and attributesCSS - Basic properties and attributes
CSS - Basic properties and attributes
 
Что такое CSS?
Что такое CSS?Что такое CSS?
Что такое CSS?
 

Препроцессор SASS