Комментарии в Sass

Содержание

Sass — Comments

In this chapter, we will study about Sass Comments. Comments are non-executable statements, which are placed in source code. Comments make source code easier to understand. SASS supports two types of comments.

Multiline comments − These are written using /* and */. Multiline comments are preserved in CSS output.

Single line comments − These are written using // followed by comments. Single line comments are not preserved in CSS output.

Example

The following example demonstrates the use of comments in the SCSS file −

Next, create file style.scss.

style.scss

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

Next, execute the above command; it will create the style.css file automatically with the following code −

style.css

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in sass_comments.html file.

Open this HTML file in a browser, an output is displayed as shown below.

To study about interpolation within multiline comments, click this link.

Sass – Interpolation in Multiline Comments

Description

Interpolation within the multiline comments are resolved in the resulting CSS. You can specify variables or property names within the curly braces.

Syntax

Example

The following example demonstrates the use of interpolation in multiline comments in the SCSS file −

Next, create file style.scss.

style.css

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

Next, execute the above command; it will create the style.css file automatically with the following code

style.css

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in sass_comments_interpolation.htm file.

Open this HTML file in a browser, an output is displayed as shown below.

Основы Sass/Scss

В этой записи пойдет речь о том, как начать пользоваться Sass/Scss. Прежде чем вы начнете читать эту статью, я подразумеваю, что у вас уже установлен Sass/Scss. Если у вас его нет, то вы можете прочитать эту запись «Подробная установка Sass/Scss». В ней описан весь процесс установки препроцессора.

Если вы читаете эту запись, значить вы должны быть знакомы с CSS. В противном случае, вам не будет понятно о чем идет речь.

В чем разница между Sass и Scss

Она очень маленькая. Чтобы вам сразу стало понятно, я приведу ниже два примера.

Sass

Scss

Как вы уже могли заметить, разница лишь в <> и ; . В Sass фигурные скобки и точка с запятой не ставятся. В случае с Scss это происходит наоборот.

Вы наверное хотите спросить: «А что лучше использовать»? Я предпочитаю Scss, так как фигурные скобки обозначают четкую границу стиля, то есть максимально точно показывается где стиль начинается и где заканчивается. А точка с запятой говорит о том, что строка закончена. Я лично привык больше к Scss, но вы можете выбрать все что захотите.

Комментарии

Чтобы добавить комментарий в Sass, вам нужно написать // или /* */ .

Обычный комментарий (однострочный) выглядит так:

Многострочный комментарий пишется так же как и в обычном CSS:

Переменные

Переменные являются огромным плюсом Sass. Например, если вы хотите использовать один цвет в нескольких классах или id, но вам не хочется второй раз возвращаться во все три места где вы его добавили, то в данной ситуации Sass поможет. С помощью него вы можете изменить цвет в одном месте и он автоматически измениться везде где эта переменная прописана.

Название переменной начинается со знака $ и заканчивается : и далее пишется значение (например: $font-color: #000 ) Чтобы было понятней, я предлагаю посмотреть на пример ниже.

Пример

Как видно из примера, я создал две переменные — $font-stack и $primary-color . Первая включает в себя название шрифта и тип (без засечек), а в вторая цвет.

$primary-color используется для body и div.simple-class . И если я надумаю изменить цвет с #eee на #000 , мне это нужно будет сделать только в одном месте.

Написание кода

Наверное вы знаете, чтоб в HTML, вы пишите код в отступами, чтобы код был более читабельным. В Sass все в точности одно и тоже.

Из примера выше, вы можете заметить, что ul , li и a внутри nav элемента. Чтобы обозначить принадлежность элементов друг к другу, вы можете выписывать элементы внутри друг друга. После компиляции примера выше, у вас получит такой код:

Import

В CSS есть замечательная функция import . Она позволяет подключать дополнительные стили из другого файла. Разделения двух стилей обычно делается для того, чтобы разделить разные компоненты.

Минут обычного import в CSS в том, что он создает отдельный HTTP запрос на каждый import. В случае с Sass, это происходит иначе. Он берет все файлы, которые были прописаны с import и совмещает их в один файл. Тем самым убирая дополнительные HTTP запросы, чтобы является более удобным и быстрым.

Sass пример

Кстати говоря, для @import не нужно прописывать .scss , так как по умолчанию будет искаться именно такой разрешение файла. И да, reset.scss включает в себя следующее:

Sass после компиляции

Как видим, оба файла совместились.

Mixin

Это наверное одна из моих самых любимых частей Sass. Mixin — это заранее подготовленный снипет или функция, которая сокращает длинну вашего CSS файла благодаря использования одних и тех же стилей для многих элементов.

Например, если вы часто используете border-radius (закгругление краев), то чтобы сделать корректное отображение во всех браузерах, вам нужно прописать следующее:

Чтобы не писать эти четыре строчки для каждого элемента в CSS стилях — мы будем использовать Mixing из примера ниже.

Чтобы создать mixing, вам нужно прописать @mixin и дальше имя, в этом примере я написал border-radius . Далее аргумент $radius . И в конце прописываем все кроссбраузерные свойства border-radius и используем значение из аргумента $radius .

А чтобы приписать mixin для стиля, вам нужно использовать @include и далее имя mixin и аргумент. Кстати аргумент не обязательно создавать, если у вы просто хотите добавить статические стили для элемента.

Из примера выше класс .box примет все стили mixin border-radius с аргументов 10px . Другими словами, у .box теперь будут закругленные края в 10px .

После компиляции пример выше будет выглядеть следующим образом:

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

Еще одно из самых важных плюсов Sass — это наследование/присвоение. Например вы хотите создать элемент оповещения и у вас есть основной .alert класс, который включает в себя размер текста, отступы, а так же многое другое. И далее вы хотите добавить разные цвета для оповещений. И чтобы вам не прописывать основные стили из .alert лишний раз, вы можете воспользоваться @extend функцией, которая свяжет все стили воедино, тем самым убрав лишнюю работу.

Вот один из примеров, который показывает использование функции @extend :

После компиляции Sass, CSS файл будет выглядеть следующим образом:

Как вы уже могли заметить, @extend был прописан для трех классов — .success , .error и .warning и после компиляции Sass он связал все три класса вместе с alert, который является основным и самым важным стилем для отображения оповещений.

Операторы

Использование математических действий в CSS — это круто. Sass предоставляет следующие математические операторы +, -, *, / и %. В примере ниже, я сделаю простой математический подсчет ширины aside и article .

Sass так же позволяет конвертировать пиксели в проценты. После компиляции SCSS будет выглядеть следующим образом:

Вопрос по ruby, comments, sass &#8211 Как игнорировать многострочные комментарии в sass?

Есть ли способ заставить sass игнорировать многострочные комментарии при создании файла css:

Это не так (игнорируется только в сжатом режиме):

я нашел этобилет на Github, где автор говорит:

Если вы действительно хотите, вы можете также отключить Sass, чтобы заставить замолчать / * * / комментарии.

Но я нене знаю, что он имеет в виду под skey monkeypatch, так как я могу это сделать?

мы узнали, как SASS исправляет ошибки, отвечая на этот вопрос:

И теперь я тоже могу вам помочь!

1) Установить компас

Чтобы это решение работало, выпонадобитсяКомпас, Установите его с помощью:

2) Настроить компас

Создать compass.rb файл в вашем проектеs корень и определение каталогов, в которых вы храните код SASS и CSS, e. г.:

Создайте файл с именем remove-all-comments-monkey-patch.rb в вашем проектекорень s:

4) Требуется патч обезьяны из config.rb

в config.rb , добавлять:

5) Скомпилируйте свой проект с помощью Compass

использование compass compile скомпилировать SASS в CSS. Вы также можете использовать compass watch заставить инструмент командной строки Compass постоянно отслеживать ваш код на предмет изменений и перекомпилировать части, которые вы модифицируете.

Это не удалит комментарии с номерами строк, сгенерированными SASS. Чтобы отключить их, закомментируйте line_comments = true линия в config.rb или установите его в false.

Чтобы снова включить многострочные комментарии, просто закомментируйте строку, которая требует патча обезьяны, и сделайте. compass clean

Дон»не используй это! Используйте однострочные комментарии с Ctrl + /.

Хотя это решение является переносимым и будет работать для всех без ручного взлома кода SASS, вам действительно следует подумать об использовании IDE, которая позволяет комментировать целые абзацы однострочными комментариями с помощью одного нажатия клавиши. Для меня это +. Ctrl /

Здесь я’Мы сняли небольшое видео, чтобы показать, что использование строчных комментариев на самом деле быстрее и эффективнее, чем использование многострочных комментариев:http://www.youtube.com/watch?feature=player_detailpage&v = DTyMAPZrwyc

Строковые комментарии также позволяют комментировать комментарии, не нарушая код.

Предположим, у вас есть следующий код:

И вам нужно все это закомментировать. Если вы заверните все это /* */ .

. тогда вы взломали код! Теперь у вас есть комментарий, который начинается с /*foo и заканчивается bla */ , а также синтаксическая ошибка при. baz*/

Вместо этого просто выберите весь код и нажмите + Ctrl / (при условии, что используется какая-то IDE или программист ‘с блокнотом), все сразу будет закомментировано:

И, конечно, позже это можно будет раскомментировать с помощью той же горячей клавиши.

SASS — основы

Файлы SASS (Sassy CSS) имеют расширение .scss.

Установка и управление

Можно обзавестись специальным приложением типа CodeKit, Compass, Koala или Prepros, которое будет обрабатывать файлы sass, или установить ruby и работать через командную строку.

Установщик ruby для windows.
Установка SASS: gem install sass
Запуск компиляции: sass input.scss output.css

Переменные

Переменные объявляются с помощью символа $ и могут хранить любую информацию для многократного использования.

Илон Маск рекомендует:  Что такое код swfbutton_keypress

$font:normal 24px/1.5 ‘Open Sans’, sans-serif;
$color-red:#F44336;

Использовать их очень просто:

Переменные можно также вставлять в названия селекторов и имена свойств, используя синтаксис интерполяции.

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.

Содержание статьи

Зачем использовать Sass/SCSS вместо CSS?

  1. Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
  2. Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
  3. Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
  4. Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
  5. Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
  6. Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
  7. Функции можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.

Синтаксис

SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS — (.sass) Syntactically Awesome Style Sheets.

ZIP Service, Москва, можно удалённо, от 100 000 ₽

SCSS — (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .

Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

Те же вложенные элементы с помощью SCSS:

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

Это особенно полезно при управлении перегруженными макетами. Таким образом, выравнивание, в котором вложенные свойства записаны в коде, полностью соответствует действительной структуре макета приложения.

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива & .

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).

Миксины (они же примеси)

Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).

Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).

Сложение и вычитание

Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

Есть три помощника, которые намекнут на возможность деления:

  1. Значение (или любая его часть) хранится в переменной или возвращается функцией.
  2. Значения заключены в круглые скобки.
  3. Значение используется как часть другого арифметического выражения.

Результат компиляции в CSS:

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Логические операторы

Описание логических операторов

Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.

Пример ниже демонстрирует, как делать не надо.

Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

Пример сложения нескольких строк:

Сложение строк и чисел:

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

@if — это директива, использующаяся для разветвления на основе условия.

Ниже показано комбо-разветвление с добавлением директивы @else .

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

Результат компиляции в CSS:

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

Результат компиляции в CSS:

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

После применения класса .name ширина элемента будет равна 300 пикселям.

Результат в браузере:

Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.

Ниже рассмотрим пару примеров для создания интересных анимационных эффектов с помощью функции sin() , в которых количество кода сведено к минимуму. Далее можете масштабировать эти знания на создание интерактивных элементов пользовательского интерфейса (движение по кругу, волнистая анимация).

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

Использование функции rad() :

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .

Заключение

Как видите, CSS уже достаточно эволюционировал, чтобы порой заменять JavaScript. Это упрощает работу и экономит время. Кстати, загляните в одну из наших статей, в которой описаны возможности современного CSS.

Полный гайд по SCSS/SASS

Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и тоже. Вы поймёте различия по мере изучения темы. Отмечу, что SCSS сейчас наиболее популярна, вероятно потому, что является наиболее поздней версией оригинального Sass синтаксиса (некоторые считают её лучшей).

Чтобы по-настоящему почувствовать преимущества Sass, вам нужно понять ключевые идеи этого метаязыка. Об этом мы и поговорим.

Весь Sass/SCSS код компилируется обратно в стандартный CSS, поэтому браузер понимает его и корректно выводит результат. Текущие версии браузеров не поддерживают Sass/SCSS непосредственно (как и другие препроцессоры), а стандартная спецификация CSS не предлагает нам альтернатив (пока).

Приступим!

Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.

Илон Маск рекомендует:  Книга - Веб-дизайн, или не заставляйте меня думать

Что такого есть в Sass/SCSS, чего нет в стандартном CSS?

  1. Вложенные правила: вы можете вкладывать CSS свойства, в несколько наборов скобок <>. Это сделает ваш CSS чище и понятней.
  2. Переменные: в стандартном CSS тоже есть переменные, но переменные Sass куда более мощный инструмент. Например, вы можете использовать переменные в циклах и генерировать значения свойств динамически. Также можно внедрять переменные в имена свойств, например так: property-name-N < … >.
  3. Лучшая реализация операторов: вы можете суммировать, вычитать, делить и умножать CSS значения. Sass реализация более интуитивна, чем стандартный функционал CSS calc().
  4. Функции: Sass позволяет многократно использовать CSS стили, как функции.
  5. Тригонометрия: помимо базовых операций (+, -, *, /), SCSS позволяет писать собственные функции. Например, функции sin и cos можно написать, используя только синтаксис Sass/SCSS. Конечно, вам понадобятся знания тригонометрии. Такие функция могут понадобится для создания анимации.
  6. Удобный рабочий процесс: вы можете писать CSS, используя конструкции, знакомые по другим языкам: for-циклы, while-циклы, if-else. Но имейте в виду, это только препроцессор, а не полноценный язык, Sass контролирует генерацию свойств и значений, а на выходе вы получаете стандартный CSS.
  7. Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.

Препроцессор Sass

Sass не динамичный язык. Он не позволяет генерировать или изменять CSS свойства и значения в реальном времени. Но вы можете генерировать их более эффективным способом и внедрять в стандартные свойства (например, для CSS анимации).

Новый синтаксис

SCSS на самом деле не добавляет ничего нового в сам язык CSS. Это просто новый синтаксис, который в большинстве случаев сокращает время написания стилей.

Несколько фактов для начала

CSS препроцессоры добавляют новый синтаксис в CSS.

Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Здесь я буду говорить в основном о SCSS, который схож с Sass. О Sass можно почитать здесь: https://www.sass-lang.com/ .

Обратите внимание на расширения, они схожи, но отличаются. Для любителей командной строки, есть возможность конвертировать .sass в .scss и наоборот:

Sass — это первая спецификация Sassy CSS, её разработка началась в 2006 году. Позже разработали альтернативный синтаксис, который некоторые считают лучшей версией языка, а также изменилось первоначальное расширение .sass на новое .scss.

На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.

Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.

Superset

Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.

Переменные

В Sass/SCSS есть переменные, и они отличаются от тех, которые вы вероятно видели в CSS — они начинаются с двух тире ( —color: #9c27b0 ). В SCSS переменная обозначается знаком доллара ( $color: #9c27b0 ).

Вы можете перезаписать имя переменной или задать для неё значение по умолчанию. Для этого добавьте метку !default к переменной, и если её значение не изменится в дальнейшем и не будет пустым, то будет использоваться заданное значение по умолчанию.

В примере выше окончательным значением переменной $text будет “Piece of string.”, а не “Another string.”, потому что переменная не пуста.

Вложенные правила

В стандартном CSS, вложенность достигается путём расстановки пробелов.

С помощью Sassy CSS этот код можно записать так:

Конечно, в итоге это всё скомпилируется в обычный CSS. Это просто синтаксис, но как видите, он выглядит чище и с меньшими повторениями.

В частности, это помогает работать со сложными макетами. Выравнивание, в котором вложенные свойства записаны в коде, точно соответствует структуре макета приложения.

Тем временем под капотом, препроцессор компилирует всё в стандартный код CSS (как в первом примере), чтобы браузер смог его отобразить. Мы лишь изменили способ написания CSS.

Оператор &

В Sassy CSS можно использовать оператор & (И), давайте посмотрим, как это работает.

В 5 строке мы видим &:hover, после компиляции, вместо символа &, подставляется имя родительского элемента, т.е. a:hover. В результате у нас получится такой код:

Миксины

Для объявления миксина используйте директиву @mixin (ещё это называют mixin rule).

Давайте создадим миксин, который определяет поведение элемента как Flex:

Теперь любой HTML элемент с классом .centered-elements будет иметь свойства Flexbox. Вы можете использовать миксины совместно с другими CSS свойствами.

Для класса .centered-elements я добавил миксин и правило border:1px solid gray;

Вы можете передавать аргументы в @mixin, как если бы это была функция, а затем присваивать их свойствам CSS. Рассмотрим это в следующей части.

Кросс-браузерность. Пример

Некоторые экспериментальные фичи работают только в определённых браузерах.

С помощью миксин удобно определять CSS свойства, индивидуальные для каждого браузера, в одном классе.

Например, если вам нужно вращать элемент в браузере на движке Webkit, так же, как и в других браузерах, вы можете создать миксин, который принимает переменную $degree в качестве аргумента:

Теперь нужно подключить ( @include) этот миксин в CSS класс:

sass Комментарии

пример

Комментарии в Sass vs. Scss во многом схожи, за исключением случаев, когда речь идет о нескольких линиях. SASS multi-lines чувствительны к SCSS , в то время как SCSS использует терминаторы комментариев.

Однострочный комментарий

style.scss

style.sass

Многострочный комментарий

style.scss

Это будет h1 элементы h1 с красным цветом.

style.sass

Теперь у SASS есть два инициатора, но нет соответствующих терминаторов. Многострочные комментарии в SASS чувствительны к уровням отступов .

Это будет h1 элементы h1 с красным цветом.

То же самое можно сделать с инициатором /* :

Итак, у вас есть это! Основные различия между комментариями в SCSS и SASS !

Изучаем SASS: руководство для новичка

Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.

Для начинающего в целях обучения это очень даже полезно, однако со временем, ваши навыки будут улучшаться и придет необходимость в повышении производительности труда.

Вы удивитесь, когда узнаете, что есть способы писать CSS-код без множественных повторений одних и тех же свойств. В этой статье будет рассказано об одном из них.

Благодаря CSS-препроцессорам, стало возможным писать лаконичный CSS-код без постоянного повторения одних и тех же свойств.

К тому же, получившийся код отформатирован гораздо приятнее. Вы можете выполнять вычисления и создавать динамические стили, используя один из таких методов препроцессинга.

Доступны два основных варианта: SASS и LESS . В данной статье, я расскажу о SASS .

Недостатки CSS

Можно использовать только CSS, но при разработке больших многостраничных сайтов, у вас, скорее всего, появится желание получить от этой технологии возможности, которых она не имеет.

Давайте рассмотрим слабые места использования « чистого » CSS:

  • Нет возможности наследования уже созданных стилевых правил;
  • Нельзя создавать переменные, которые можно повторно использовать в таблице стилей;
  • Вы не можете выполнять числовые вычисления.

Преимущества использования препроцессоров

Стандартный CSS не может дать вам ничего, кроме неудобств, в то время как использование методов препроцессинга может сохранить вам много времени и сил.

Взгляните теперь на список преимуществ использования препроцессоров:

  • Они позволяют вам использовать переменные, которые могут быть повторно использованы внутри таблицы стилей;
  • Более продуманный и функциональный синтаксис, который предоставляет дополнительные возможности, которых нет в « чистом » CSS;
  • Скомпилированные CSS-файлы загружаются на рабочий веб-сервер.

Что такое SASS?

SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: « Синтаксически потрясающие таблицы стилей ».

Эта технология была придумана и воплощена Хэмптоном Катлином ( Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины ( mixins ), наследование и вложенность.

Исходные и скомпилированные файлы имеют расширения .sass и .scss , соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.

SASS упрощает написание CSS-кода и позволяет динамически им манипулировать. Это отличный способ создания более функциональных CSS-кодов, который позволяет ускорить выполнение ежедневной работы веб-разработчиков и дизайнеров.

Формат .sass против .scss

Перед началом рассказа о том, как использовать SASS , сравним форматы расширений .sass и .scss , генерируемых SASS . Для начала я представлю вам простой CSS-код, а затем покажу, как его упростить с помощью обоих расширений SASS .

CSS-код

Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding , а затем прописал белый цвет для свойства color :

Формат .scss (новый синтаксис SASS)

Чтобы написать приведенный выше пример в формате .scss , мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff , которое соответствует белому цвету.

Далее, вместо того, чтобы по правилам CSS присвоить свойству color значение #fff , мы используем переменную $color , которую определим в начале кода:

Формат .sass (старый синтаксис SASS)

Для .sass мы имеем такую же переменную и значение, как и для .scss , но точки с запятой и фигурные скобки не используются.

Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :

Вот что вам понадобится для успешного завершения практики по данной статье:

  • Инсталлятор Ruby;
  • Текстовый редактор;
  • Время и терпение.

Установка Ruby

Чтобы опробовать SASS , вам нужно скачать Ruby . Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK :

Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите « Далее ».

После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка « Add Ruby executables to your PATH ». Нажмите кнопку « Install » и установка завершена:

Проверка правильности запуска Ruby

Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v .

Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:

Установка SASS

Чтобы установить SASS , откройте командную строку и введите gem install sass , после этого вы должны получить сообщение об успешном окончании установки:

Подготовка необходимых файлов

Перед тем, как вплотную заняться копанием в недрах SASS , нам нужно подготовить некоторые необходимые файлы.

Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS , создайте HTML-файл, дав ему имя index.html .

Поместите в него следующий код:

Теперь, для файла SASS , создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss .

Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:

Конвертация SASS-кода в CSS

Чтобы преобразовать код SASS в CSS, мы будем использовать команду – watch , которая выполнит компиляцию.

Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS -файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss , чтобы убедиться, что все работает.

Скопируйте и вставьте следующий SASS -код в файл stye.scss , созданный вами в папке SASS :

Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd « Desktop «:

Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass :

Используя команду – watch , сконвертируем все .scss -файлы в папке SASS . Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS , разделенные двоеточием.

Первое слово представляет текущее положение файла .scss , а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:

Использование переменных

Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS , вы можете определять переменные для таких стилей, как font size , margin , padding и так далее.

Использование переменных дает вам возможность повторного использования заданных ранее значений.

В SASS существует шесть разных типов переменных:

  • Строковые (например, $myString: “здесь ваш текст”;);
  • Числовые (например, $myNum: 10px;);
  • Цветовые (например, $myColor: white;);
  • Логические (например, $myBool: true;);
  • Списковые (например, $myItemList: 1px sol >Тип null – значение отсутствует (например, $myVar: null;).

Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:

Илон Маск рекомендует:  Проблемы и распространенные ошибки

Запустив этот код в браузере, вы получите следующее:

Вложенность

SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.

В качестве примера, рассмотрим следующий код:

Для SASS , код будет выглядеть следующим образом:

Обратите внимание, что мы расположили все стили элементов под идентификатором container , вместо того, чтобы предварять этим id каждый из них.

Если вы запустите этот код в браузере, то увидите следующую картину:

Миксины (Mixins)

Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include .

Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :

Как вы можете видеть, мы использовали директиву @mixins , чтобы создать стиль для свойства border , а затем включили его в стиль идентификатора container с помощью директивы @include .

Если вы запустите данный код в браузере, то увидите следующее:

Операторы

Возможность выполнения математических операций, это одно из преимуществ препроцессоров наподобие SASS , которым не обладает « чистый » CSS. Благодаря этой возможности, вы можете создавать более сложный и динамичный код.

Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:

Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding , а также увеличили толщину border на 5px.

Если вы запустите этот пример в браузере, то увидите следующую картину:

Функции

SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.

Взгляните на их список ниже:

  • darken(color, amount);
  • lighten(color, amount);
  • saturate(color, amount);
  • desaturate(color, amount);
  • alpha(color).

Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS .

А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.

Откройте свой файл style.scss и вставьте туда следующий код:

Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.

После запуска данного примера в браузере вы увидите примерно следующую картину:

Настройка форматирования скомпилированных стилей в SASS

Одной из мощных функций SASS является наличие опций, позволяющих управлять форматированием кода .scss -файлов при конвертации их в обычный CSS.

Используя опцию -style , мы можем выполнить форматирование скомпилированного CSS-кода. Далее описывается имеющиеся в SASS стили форматирования.

Вложенный формат (Nested Format)

Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.

Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss , а затем откройте командную строку и убедившись, что вы внутри директории SASS , введите SASS –update style.scss .

Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:

После этого откройте файл style.css и обратите внимание на появившиеся отступы:

Расширенный формат (Expanded Format)

Это один из наиболее удобных для визуального восприятия форматов, так как все фигурные скобки проставлены так, чтобы выделять расположенные внутри них свойства, каждое из которых располагается на новой строке.

Давайте посмотрим это в действии.

Используя код, приведенный выше, откройте командную строку и введите sass –update style.scss –style expanded . Как можно заметить, мы добавили опцию –style , использующуюся для перекомпиляции CSS-файла в другое форматирование:

Если теперь вы взглянете на скомпилированный CSS-файл, то увидите форматирование, как на изображении ниже.

Каждому свойству выделена отдельная строка, а фигурные скобки раскрыты так, чтобы визуально выделять помещенные в них свойства:

Компактный формат (Compact Format)

Этот формат представляет собой очень сжатый стиль написания, который, тем не менее, достаточно хорошо визуально воспринимается.

Добавляются пробелы между фигурными скобками, но свойства располагаются на одной строке.

Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact :

После компиляции, вы увидите, что код стал очень компактным, а элементы плотно расположены друг относительно друга:

Компрессированный формат (Compressed Format)

Компрессированный формат является самым сжатым. Он подходит для конечного этапа, когда продукт запускается и требуется минимальный размер файла и производительность.

Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed :

Как видно, на изображении ниже, в выходном CSS-файле отсутствуют пробелы и вообще какое-либо форматирование, чем и достигается сжатие:

Заключение

SASS предоставляет множество путей упрощения работы с привычной всем технологией CSS. Это позволяет ощутимо уменьшить повторяемость кода с помощью переменных.

SASS это очень мощный инструмент, который поможет вам увеличить свою производительность, будь вы веб-дизайнер или веб-программист. Изучайте SASS прямо сейчас и открывайте для себя его потенциал.

Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!

Данная публикация представляет собой перевод статьи « Learning SASS: A Beginner’s Guide to SASS » , подготовленной дружной командой проекта Интернет-технологии.ру

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Ранее была опубликована статья «С чего начать изучение и использование SASS/SCSS?» и назрел вопрос вполне логичный вопрос: «В чем разница между SASS и SCSS?». Тема интересная, поэтому давайте разбираться.

Когда речь идет о Sass , как правило, мы подразумеваем препроцессор и язык в целом.

Тем не менее, используя Sass (препроцессор) мы можем использовать два различных синтаксиса:

  • Sass (отступы) ;
  • SCSS ( CSS-подобный синтаксис).

Немного истории

Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby.

Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:

По сравнению с синтаксисом CSS есть ощутимая разница.

Переменная задается через ! , а не $ , символ присвоения значения = , а не :.

Но так Sass выглядел до версии 3.0, выпущенной в мае 2010 года, в которой был представлен совершенно новый синтаксис под названием SCSS или Sassy CSS .

Его целью было приблизить синтаксис Sass к CSS , сделав его более совместимым с CSS :

SCSS определенно более близок к CSS , чем Sass . Разработчики Sass потрудились над тем, чтобы сделать оба синтаксиса ближе друг к другу, заменив ! (знак переменной) и = (знак присвоения) на $ и : из CSS .

Поэтому при запуске нового проекта вы можете задуматься, какой синтаксис использовать. Позвольте мне помочь принять Вам решение.

Плюсы синтаксиса Sass с отступами

Хотя этот синтаксис может казаться вам немного странным, но у него есть несколько интересных моментов. Прежде всего, он короче и его легче набирать. В нем нет скобок и точек с запятой, они не нужны.

В нем не нужны @mixin или @include , когда достаточно простого символа: = и + .

Также в Sass присутствуют чистые стандарты кодирования из-за использования отступов. Так как неправильный отступ может сломать всю таблицу стилей .sass , здесь в первую очередь обеспечивается, чтобы код был чистым и надлежащим образом отформатированным.

Существует только один метод составления кодов Sass : составлять их правильно.

Не забывайте, что отступы имеют логическое значение в Sass . Когда применяется отступ блока селектора, это означает, что это вложенный селектор.

Простой факт смещения .element-b на один уровень вправо означает, что он является дочерним элементом от .element-a , что приводит к изменению результативного CSS -кода. Так что, будьте осторожны с отступами!

Полагаю, что синтаксис на основе отступов больше понравится команде, работающей в основном с Ruby/Python , нежели команде PHP/Java программистов (но это не точно).

Плюсы SCSS синтаксиса

Во-первых, он полностью совместим с CSS . Это означает, что вы можете переименовать файл CSS в .scss , и он будет работать, как ни в чем не бывало.

Создание SCSS , полностью совместимого с CSS , всегда было приоритетом для поддержки Sass с самого момента релиза SCSS , и, на мой взгляд, это серьезный аргумент.

Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives ).

Так как SCSS совместим с CSS , он практически не требует дополнительного обучения. Синтаксис почти тот же: в конце концов, это просто CSS с некоторыми дополнениями.

Это важно для начинающих разработчиков: они смогут быстро начать составлять код, почти ничего не зная о Sass .

Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл. Когда вы видите @mixin , вы знаете, что это объявление примеси; когда вы видите @include , вы знаете, что это вызов примеси.

Нет никаких привязок, и все имеет смысл без интерпретации.

Также почти все существующие инструменты, плагины и демо-презентации для Sass разрабатываются с помощью синтаксиса SCSS . Этот синтаксис становится все более ориентированным на профессионалов и выбирается ими по умолчанию (если не является единственно возможным).

В основном в силу указанных выше причин. Например, становится все труднее найти подсветку чистого синтаксиса Sass с отступами; как правило, доступны только варианты подсветки SCSS .

Заключение

Выбор в любом случае остается за Вами, но если у вас нет действительно веских причин использовать синтаксис с отступами, я бы настоятельно рекомендовал использовать SCSS , а не Sass . Это не только более просто, но и более удобно. Если Вы совсем новичок, то SCSS — это то, что нужно. Сходство с CSS не отпугнет Вас от изучения верстки на препроцессорах. Но после уже можно рассмотреть вариант использования Sass в своих проектах. Главное не бояться использовать новое технологии в своей работе!

Что такое Sass и как его использовать

Что такое Sass, зачем он нужен, его возможности, установка и как его использовать в своих проектах

Что такое Sass

Sass (Syntactically Awesome Stylesheets) — это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass — это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS. SCSS — более похож на CSS, а SASS — отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности:

  1. Sass позволяет вкладывать правила CSS друг в друга
  2. Вложенность свойств
  3. Использование переменных
  4. Поддержка арифметических операций
  5. Операции с цветами
  6. Возможность импортировать в sass файл sass, scss и css файлы
  7. Использование миксинов
  8. И многое другое

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

Как использовать Sass

Существуют разные способы начать использовать Sass:

  1. C помощью приложений (Koala, CodeKit, Compass и другие)
  2. C помощью командной строки
  3. Используя таск-менеджеры
  4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов

Рассмотрим использование Sass для таск-менеджера Gulp. Перед тем как начать установку, желательно ознакомиться с основами Gulp.

Установка и подключение gulp-sass

Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:

Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json. После успешной установки нам нужно подключить наш пакет в файле gulpfile.js.

Теперь создадим таск sass.

gulp.src — Что берём для обработки

.pipe(sass()) — Конвертируем Sass в CSS

sass() — в скобках можно задать дополнительные настройки отображения CSS на выходе.
Например, sass(expanded‘>) — полностью развёрнутый CSS.
Другие значения: nested (по умолчанию), compact — каждый селектор на разной строке, compressed — всё в одну строку.

Если вдруг мы допустим ошибку, то можно вывести на экран сообщение в каком месте она находится. Для этого добавим .on(‘error’, sass.logError).

pipe(gulp.dest()) — Куда сохранить получившийся файл

Выполним наш созданный таск gulp-sass. В командной строке введём gulp sass.

Gulp автоматически преобразовал SASS в CSS и создал файл main.css.

Если нужно выбрать не один файл, а несколько, то можно выбрать все файлы сразу. Для этого изменим немного строку, где мы выбираем sass-файлы для конвертации:

sass/**/*.sass — означает выбор всех файлов (с расширением .sass) во всех папках папки sass.

Резюмируем: подключили плагин gulp-sass, создали таск sass и добавили вывод ошибки (если таковая возникнет). Теперь можно сделать дефолтный таск. Т.е. наш такск gulp-sass будется запускаться командой gulp.

Получаем следующий gulpfile.js

Возможности Sass на примерах

Их огромное количество, рассмотрим лишь самые популярные. С полным списком можно ознакомиться на официальном сайте.

Ссылка на родительский селектор &

Арифметические операции с числами

Арифметические операции с цветами

Использование функций в sass официальный сайт

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL