Что такое Sass? Это вопрос, на который мы здесь, чтобы ответить. Если вы новичок в веб-дизайне, вы, вероятно, слышали, как этот термин появляется, но вы не знаете, что такое Sass, что он делает, и следует ли вам его использовать. Короче говоря, Sass — это препроцессор CSS, который добавляет специальные функции, такие как переменные, вложенные правила и миксины (иногда называемые синтаксическим сахаром) в обычный CSS. Цель состоит в том, чтобы сделать процесс кодирования более простым и эффективным. Давайте рассмотрим более подробно.
Дополнительные инструменты можно найти в нашем руководстве по лучшим CSS-фреймворкам и топовым инструментам веб-дизайна ] попробовать.
Прежде чем мы пойдем дальше, нужно сделать краткое объявление о государственной службе: большинство веб-дизайнеров скажем, если вы новичок в CSS, вам лучше избегать Sass (или любых препроцессоров, расширений или фреймворков), пока вы еще учитесь. Хотя они и предлагают много преимуществ в скорости и эффективности, важно, чтобы вы действительно овладели основами CSS. Убедитесь, что вы изучили основные понятия, прежде чем начать изучать ярлыки и сбивать с толку.
Что такое Sass?
Sass совместим со всеми версиями CSS. Единственное требование для его использования — наличие Ruby. Пользователям также предлагается следовать принципам сообщества Sass.
Как использовать Sass
В следующем разделе мы расскажем о некоторых основных советах по использованию Sass, используя примеры с официального сайта Sass. , Взгляните на документацию Sass для дополнительных ссылок и примеров.
Синтаксис
Sass включает в себя две опции синтаксиса:
SCSS (Sassy CSS): Использует расширение файла .scss и полностью соответствует синтаксису CSS
Indented (просто называется 'Sass'): Использует .sass расширение файла и отступ, а не скобки; он не полностью совместим с синтаксисом CSS, но его быстрее написать
Обратите внимание, что файлы могут быть преобразованы из одного синтаксиса в другой с помощью команды sass-convert .
Переменные
Как и другие языки программирования, Sass позволяет использовать переменные, которые могут хранить информацию, которую вы можете использовать в вашей таблице стилей. Например, вы можете сохранить значение цвета в переменной в верхней части файла, а затем использовать эту переменную при настройке цвета ваших элементов. Это позволяет быстро изменять цвета без необходимости изменять каждую строку отдельно.
Например:
$ font-stack: Helvetica, sans-serif; $ основной цвет: # 333; body {font: 100% $ font-stack; цвет: $ основной цвет; }
Будет создан следующий CSS:
body {font: 100% Helvetica, sans-serif; цвет: # 333; }
Вложение
Вложение — обоюдоострый меч. Несмотря на то, что он предоставляет отличный метод для уменьшения количества кода, который вам нужно написать, он также может привести к чрезмерной квалификации CSS, если не выполняется аккуратно. Идея состоит в том, чтобы вложить ваши CSS-селекторы таким образом, чтобы имитировать вашу HTML-иерархию.
Ниже показан базовый стиль навигации, который использует вложение:
nav {ul {margin : 0; отступы: 0; стиль списка: нет; } li {display: inline-block; } {display: block; обивка: 6px 12px; текстовое оформление: нет; }}
Вывод CSS выглядит следующим образом:
nav ul {margin: 0; отступы: 0; стиль списка: нет; } nav li {display: inline-block; } перейти к {display: block; обивка: 6px 12px; текстовое оформление: нет; }
Partials
Частицы — это файлы Sass меньшего размера, которые можно импортировать (см. Следующий раздел) в другие файлы Sass. Думайте о частичках как фрагментах кода. С этими фрагментами кода ваш CSS теперь может быть модульным и более простым в обслуживании. Частичное обозначается как таковое, называя его начальным подчеркиванием: _partial.scss .
Импорт
Используется с частями (см. Предыдущий раздел), Директива @import позволяет вам импортировать ваши частичные файлы в текущий файл, чтобы создать один единственный файл CSS. Помните, сколько импортов вы используете в качестве HTTP-запроса для каждого из них.
Обратите внимание на директиву @mixin вверху. Ему было присвоено имя border-radius и в качестве параметра используется переменная $ radius . Эта переменная используется для установки значения радиуса для каждого элемента.
Позже вызывается директива @include вместе с именем миксина ( border-radius ) и параметром ( 10px ). Таким образом .box {@include border-radius (10px); } .
Директива @extend была названа одной из самых мощных функций Sass. Посмотрев его в действии, вы поймете почему.
Идея состоит в том, что с помощью этой директивы вам не нужно будет включать несколько имен классов в ваши элементы HTML, и ваш код будет СУХИМ (не повторяйте себя) , Ваши селекторы могут наследовать стили других селекторов, а затем легко расширяться при необходимости. Теперь это мощно.
Операторы
Возможность выполнения вычислений в вашем CSS позволяет вам делать больше, например, преобразовывать значения пикселей в проценты. У вас будет доступ к стандартным математическим функциям, таким как сложение, вычитание, умножение и деление. Конечно, эти функции можно комбинировать для создания сложных вычислений.
Кроме того, в Sass есть несколько встроенных функций, помогающих манипулировать числами. Функции, такие как процент () floor () и round () и многие другие.
Загрузка...
