Где и как можно разместить одностраничник. Одностраничник! Что такое одностраничник? Как создать одностраничник? Терминология, цены и назначение
Использование истинной мощности препроцессора CSS - это приключение. Есть бесчисленные языки, синтаксисы и функции, все готовые к использованию прямо сейчас.
В этой статье мы рассмотрим различные возможности и преимущества использования трех разных препроцессоров: Sass, LESS и Stylus.
Введение
Препроцессоры создают CSS, который работает во всех браузерах.
Препроцессоры CSS3 - это языки, написанные с единственной целью добавления классных, изобретательных функций в CSS без нарушения совместимости с браузером. Они делают это, компилируя код, который мы пишем, в обычный CSS, который можно использовать в любом браузере, вплоть до каменного века. Есть тысячи функций, которые препроцессоры приносят в таблицу, и в этой статье мы рассмотрим некоторые из опубликованных и некоторые из не-оглавленных. Давайте начнем.
Синтаксис
Самой важной частью написания кода в препроцессоре CSS является понимание синтаксиса. К счастью для нас, синтаксис (или может быть) идентичен регулярному CSS для всех трех препроцессоров.
Sass &LESS
Sass и LESS используют стандартный синтаксис CSS. Это упрощает преобразование существующего файла CSS в препроцессор. Sass использует расширение.scss, а LESS использует расширение.less. Базовый файл Sass или LESS можно настроить следующим образом:
/* style.scss or style.less */
h1 {
color: #0982C1;
}
Как вы могли заметить, это просто обычный CSS, который отлично компилируется как в Sass, так и в LESS.
Важно отметить, что Sass также имеет более старый синтаксис, который пропускает точки с запятой и фигурные скобки. Хотя это все еще вокруг, оно устарело, и мы не будем использовать его в этом примере. Синтаксис использует расширение.sass и выглядит так:
/* style.sass */
h1
color: #0982c1
Stylus
Синтаксис для Stylus гораздо более подробный. Используя расширение файла.styl, Stylus принимает стандартный синтаксис CSS, но также принимает некоторые другие варианты, в которых скобки, двоеточия и полуколоны являются необязательными. Например:
/* style.styl */
h1 {
color: #0982C1;
}
/* omit brackets */
h1
color: #0982C1;
/* omit colons and semi-colons */
h1
color #0982C1
Использование разных вариаций в одной таблице стилей также является допустимым, поэтому следующее будет компилироваться без ошибок.
H1 {
color #0982c1
}
h2
font-size: 1.2em
Переменные
Переменные могут быть объявлены и использованы во всей таблице стилей. Они могут иметь любое значение, которое является значением CSS (например, цветами, числами [включенными единицами] или текстом.), И их можно ссылаться везде в нашей таблице стилей.
Sass
Переменные Sass добавляются с символом $, а значение и имя разделяются точкой с запятой, как и свойство CSS.
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
LESS
LESS-переменные точно такие же, как переменные Sass, за исключением того, что имена переменных добавляются с символом @.
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
Stylus
Переменные Stylus не требуют для них добавления, хотя он позволяет использовать символ $. Как всегда, конечная точка с запятой не требуется, но знак равенства между значением и переменной есть. Следует отметить, что Stylus (0.22.4) компилируется, если мы добавим символ @ к имени переменной, но не будем применять значение при ссылке. Другими словами, не делайте этого.
MainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth
Скомпилированный CSS
Каждый из вышеуказанных файлов будет скомпилирован с тем же CSS. Вы можете использовать свое воображение, чтобы узнать, насколько полезны переменные. Нам больше не нужно будет менять один цвет и повторить его двадцать раз, или мы хотим изменить ширину нашего сайта и вынуждены его искать, чтобы найти его. Вот CSS после компиляции:
Body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
Вложение
Если нам нужно ссылаться на несколько элементов с одним и тем же родителем в нашем CSS, может быть утомительно продолжать писать родителя снова и снова.
Section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Вместо этого, используя препроцессор, мы можем записать дочерние селекторы внутри скобок родителя. Кроме того, символ &обозначает родительский селектор.
Sass, LESS и Stylus
Все три препроцессора имеют одинаковый синтаксис для селекторов вложенности.
Section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
Скомпилированный CSS
Это скомпилированный CSS из приведенного выше кода. Это точно так же, как когда мы начали - как удобно!
Section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Mixins
Микшины - это функции, которые позволяют повторно использовать свойства в нашей таблице стилей. Вместо того, чтобы идти по всей нашей таблице стилей и менять свойство несколько раз, теперь мы можем просто изменить его внутри нашего mixin. Это может быть действительно полезно для конкретного стиля элементов и префиксов поставщиков. Когда mixins вызывается из селектора CSS, аргументы mixin распознаются, а стили внутри mixin применяются к селектору.
Sass
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@include error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}
МЕНЬШЕ
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}
стилус
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}
Скомпилированный CSS
Все препроцессоры составляют один и тот же код:
Generic-error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
Наследование
При написании CSS старомодным способом мы могли бы использовать следующий код для одновременного применения одних и тех же стилей к нескольким элементам:
P,
ul,
ol {
/* styles here */
}
Это отлично работает, но если нам нужно дополнительно стилизовать элементы по отдельности, для каждого из них должен быть создан другой селектор, и он может быстро стать более беспорядочным и сложным в обслуживании. Чтобы противостоять этому, можно использовать наследование. Наследование - это способность других селекторов CSS наследовать свойства другого селектора.
Sass &Stylus
.block {margin: 10px 5px;
padding: 2px;
}
p {
@extend
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
Скомпилированный CSS (Sass &Stylus)
.block, p, ul, ol {margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
МЕНЬШЕ
LESS действительно не поддерживает наследование стилей, таких как Sass и Stylus. Вместо добавления нескольких селекторов к одному набору свойств он рассматривает наследование как mixin без аргументов и импортирует стили в свои собственные селекторы. Недостатком этого является то, что свойства повторяются в вашей скомпилированной таблице стилей. Вот как вы его настроили:
Block {
margin: 10px 5px;
padding: 2px;
}
p {
.block; /* Inherit styles from ".block" */
border: 1px solid #EEE;
}
ul, ol {
.block; /* Inherit styles from ".block" */
color: #333;
text-transform: uppercase;
}
Скомпилированный CSS (МЕНЬШЕ)
.block {margin: 10px 5px;
padding: 2px;
}
p {
margin: 10px 5px;
padding: 2px;
border: 1px solid #EEE;
}
ul,
ol {
margin: 10px 5px;
padding: 2px;
color: #333;
text-transform: uppercase;
}
Как вы можете видеть, стили из.block были вставлены в селектора, которые мы хотели бы дать наследованию. Важно отметить, что приоритет может стать проблемой здесь, поэтому будьте осторожны.
Импорт
В сообществе CSS импорт CSS не одобряется, поскольку ему требуется несколько HTTP-запросов. Однако импорт с препроцессором работает по-разному. Если вы импортируете файл из любого из трех препроцессоров, он будет буквально включать импорт во время компиляции, создавая только один файл. Имейте в виду, что импортирование обычных файлов.css компилируется с помощью по умолчанию @import «file.css»; код. Кроме того, mixins и переменные могут быть импортированы и использованы в вашей основной таблице стилей. Импорт делает создание отдельных файлов для организации очень полезным.
Sass, LESS и Stylus
/* file.{type} */body {
background: #EEE;
}
@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}
Скомпилированный CSS
@import "reset.css";body {
background: #EEE;
}
p {
background: #0982C1;
}
Функции цвета
Функции цвета встроены в функции, которые преобразуют цвет при компиляции. Это может быть чрезвычайно полезно для создания градиентов, более темных цветов наведения и многое другое.
Sass
lighten($color, 10%); /* returns a color 10% lighter than $color */darken($color, 10%); /* returns a color 10% darker than $color */
saturate($color, 10%); /* returns a color 10% more saturated than $color */
desaturate($color, 10%); /* returns a color 10% less saturated than $color */
grayscale($color); /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color); /* returns inverted color of $color */
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */
Это всего лишь короткий список доступных цветовых функций в Sass, полный список доступных цветовых функций Sass можно найти, прочитав документацию Sass.
Функции цвета можно использовать в любом месте, где используется цвет. Вот пример:
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
МЕНЬШЕ
lighten(@color, 10%); /* returns a color 10% lighter than @color */darken(@color, 10%); /* returns a color 10% darker than @color */
saturate(@color, 10%); /* returns a color 10% more saturated than @color */
desaturate(@color, 10%); /* returns a color 10% less saturated than @color */
spin(@color, 10); /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */
mix(@color1, @color2); /* return a mix of @color1 and @color2 */
Список всех функций LESS можно найти, прочитав LESS Documentation.
Вот пример использования цветовой функции в LESS:
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
стилус
lighten(color, 10%); /* returns a color 10% lighter than "color" */darken(color, 10%); /* returns a color 10% darker than "color" */
saturate(color, 10%); /* returns a color 10% more saturated than "color" */
desaturate(color, 10%); /* returns a color 10% less saturated than "color" */
Полный список всех функций цвета Stylus можно найти, прочитав документацию Stylus.
Вот пример использования функций цвета Stylus:
Color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
Операции
Выполнение математики в CSS весьма полезно и теперь вполне возможно. Это просто, и вот как это делается:
Sass, LESS и Stylus
body {margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}
Практические приложения
Мы рассмотрели множество функций и новых возможностей, которые могут выполнять препроцессоры, но мы не накрыли ничего практического или практического. Вот краткий список приложений реального мира, где использование препроцессора - спасатель.
Префиксы поставщиков
Это одна из причин, по которой нужно использовать препроцессор и по очень веской причине - это экономит массу времени и слез. Создание mixin для обработки префиксов поставщиков легко и экономит много повторений и болезненного редактирования. Вот как это сделать:
Sass
@mixin border-radius($values) {-webkit-border-radius: $values;
-moz-border-radius: $values;
border-radius: $values;
}
div {
@include border-radius(10px);
}
МЕНЬШЕ
.border-radius(@values) {-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
.border-radius(10px);
}
стилус
border-radius(values) {-webkit-border-radius: values;
-moz-border-radius: values;
border-radius: values;
}
div {
border-radius(10px);
}
Скомпилированный CSS
div {-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
3D-текст
Подделка трехмерного текста с использованием нескольких текстовых теней - умная идея. Единственная проблема заключается в том, что изменение цвета после того, как факт трудный и громоздкий. Используя mixins и цветовые функции, мы можем создавать 3D-текст и менять цвет «на лету»!
Sass
@mixin text3d($color) {color: $color;
text-shadow: 1px 1px 0px darken($color, 5%),
2px 2px 0px darken($color, 10%),
3px 3px 0px darken($color, 15%),
4px 4px 0px darken($color, 20%),
4px 4px 2px #000;
}
h1 {
font-size: 32pt;
@include text3d(#0982c1);
}
МЕНЬШЕ
.text3d(@color) {color: @color;
text-shadow: 1px 1px 0px darken(@color, 5%),
2px 2px 0px darken(@color, 10%),
3px 3px 0px darken(@color, 15%),
4px 4px 0px darken(@color, 20%),
4px 4px 2px #000;
}
span {
font-size: 32pt;
.text3d(#0982c1);
}
стилус
text3d(color)color: color
text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
spa
font-size: 32pt
text3d(#0982c1)
Я решил написать текстовые тени Stylus на одной строке, потому что я опустил фигурные скобки.
Скомпилированный CSS
span {font-size: 32pt;
color: #0982c1;
text-shadow: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
}
Конечный результат
Столбцы
Использование числовых операций и переменных для столбцов - это идея, с которой я столкнулся, когда я впервые играл с препроцессорами CSS. Объявив желаемую ширину в переменной, мы можем легко изменить ее по дороге без какой-либо ментальной математики. Вот как это делается:
Sass
$siteWidth: 1024px;$gutterWidth: 20px;
$sidebarWidth: 300px;
body {
margin: 0 auto;
width: $siteWidth;
}
.content {
float: left;
width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
float: left;
margin-left: $gutterWidth;
width: $sidebarWidth;
}
МЕНЬШЕ
@siteWidth: 1024px;@gutterWidth: 20px;
@sidebarWidth: 300px;
body {
margin: 0 auto;
width: @siteWidth;
}
.content {
float: left;
width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
float: left;
margin-left: @gutterWidth;
width: @sidebarWidth;
}
стилус
siteWidth = 1024px;gutterWidth = 20px;
sidebarWidth = 300px;
body {
margin: 0 auto;
width: siteWidth;
}
.content {
float: left;
width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
float: left;
margin-left: gutterWidth;
width: sidebarWidth;
}
Скомпилированный CSS
body {margin: 0 auto;
width: 1024px;
}
.content {
float: left;
width: 704px;
}
.sidebar {
float: left;
margin-left: 20px;
width: 300px;
}
Замечательные приличия
Существует немало причуд для использования препроцессора CSS. Я собираюсь перечислить некоторые из забавных, но если вам действительно интересно найти их все, я рекомендую вам расчесывать документацию или, еще лучше, просто начните использовать препроцессор в ежедневной кодировке.
Отчеты об ошибках
Если вы написали CSS за любое приличное количество времени, я уверен, что вы достигли точки, где вы где-то ошиблись, и просто не могли ее найти. Если вы похожи на меня, вы, вероятно, провели день, вытаскивая свои волосы и комментируя различные вещи, чтобы выследить ошибку.
препроцессоры CSS сообщают об ошибках. Все просто. Если что-то не так с вашим кодом, он сообщает вам, где, и если вам повезло: почему. Вы можете проверить этот пост в блоге, если вам интересно узнать, как сообщаются ошибки в разных препроцессорах.
CSS - умышленно простой язык. С распространением сложных веб-приложений, появлением должности фронтенд разработчика, и растущим количеством новомодных требований, эта простота быстро испаряется. Для непосвященных, CSS препроцессоры (в частности Sass , LESS , и Stylus) расширяют Ваши возможности при написании стилей с помощью такой дополнительной функциональности как переменные, вложенность и миксины - что дает гораздо больше контроля над большим количеством стилей.
Дефицита в статьях, пропагандирующих использование препроцессоров и предоставляющих краткое руководство по ним, в последние годы нет, и многие моменты уже были достаточно хорошо расписаны. Так что давайте сфокусируемся на том, что часто упускают из виду, и посмотрим, что можно противопоставить решениям для терминала.
Вступление (опциональное)
Как было отмечено во вступлении, такие вещи, как Sass, LESS и Stylus предоставляют нам дополнительную функциональность поверх CSS, но файлы, написанные на этих языках, должны быть скомпилированы в CSS до того, как браузер попытается разобрать в них что-нибудь. В общем случае, процесс компиляции автоматизирован таким образом, чтобы свести на нет какое-либо влияние на рабочий процесс.
Используя любой из перечисленных препроцессоров, Вы сможете извлечь следующую выгоду:
Выразительность: Каждый из препроцессоров содержит набор экономящих время соглашений, суть которых кроется в опциональности, либо отказе от разнообразных правил пунктуации. В зависимости от Ваших предпочтений, стили можно освободить от скобок, точек запятых, и/или обычных запятых. Плюс к этому, все они поддерживают вложенность селекторов.
Расширенная функциональность: Эти языки, в той или иной степени, предлагают дополнительные возможности для формирования наших стилей; под этим подразумеваются миксины (куски многократно используемого кода, которые могут принимать опциональные аргументы), расширения (наследование классов) и поддержка переменных.
Адд-оны: для расширения стандартного арсенала, очень широко применяются различные адд-оны. У Sass есть Compass , у Stylus есть Nib , и, хотя это и из другой оперы, не нуждающийся в представлении Bootstrap построен с помощью LESS.
Реальная польза
На деле, основная польза препроцессоров кроется в меньшей затрате усилий - не физических (реже нажимать на клавиши), а умственных. Препроцессоры дают Вам эффективную возможность снять часть утомительных нагрузок на ум и поменьше переключаться между различными приложениями, что характерно при фронтенд разработке. У Вас есть часто используемое значение цвета? Сохраните его в переменную, вместо того, чтобы охотиться за ним по проекту или хранить его у себя в памяти. Нужно предсказуемо и просто поменять цвет? В SASS есть набор операций над цветом , которые занимаются исключительно тем, что отменяют необходимость тянуться за ближайшим колор-пикером.
Внедряя препроцессор, у Вас появляется возможность сконцентрироваться непосредственно на написании стилей. Арифметика отзывчивого дизайна работает прямо внутри файла со стилями, без переключения к калькулятору. Compass может позаботиться о спрайтах за Вас. Разделение стилей на модульные файлы, и их последующее совмещение без удара по производительности, проходит бесшовно.
Основная идея в том, что: эти языки позволяют Вам сосредоточиться на решении задач , вместо отвлечения на инструменты и переключения контекста.
Безболезненная компиляция
Основным барьером к началу использования CSS препроцессоров обычно является не непонимание того, добро это или зло - людей пугает предложение установить пакет с помощью командной строки или перспектива настройки watch expressions . К счастью, все эти проблемы можно обойти, если вдруг терминал не является Вашим коньком.
Прямо в браузере
Не совсем уверены? Посмотрите на эти браузерные реализации препроцессоров.
Абсолютно все опытные верстальщики используют препроцессоры. Исключений нет. Если вы хотите добиться успеха в этой деятельности, не забывайте об этих программах. С первого взгляда они могут вызвать у новичка тихий ужас - это уже слишком похоже на программирование! На самом деле можно разобраться со всеми возможностями препроцессоров CSS примерно за день, а если постараться, то и за пару часов. В дальнейшем они существенно упростят вам жизнь.
Как появились препроцессоры CSS
Чтобы лучше понять особенности этой технологии, ненадолго погрузимся в историю развития визуального представления веб-страниц.
Когда только-только началось массовое применение интернета, никаких таблиц стилей не существовало. Оформление документов зависело исключительно от браузеров. В каждом из них были свои стили, которые использовались для обработки определенных тегов. Соответственно, страницы выглядели по-разному в зависимости от того, в каком браузере вы их открывали. Результат - хаос, путаница, проблемы для разработчиков.
В 1994 году норвежский ученый Хокон Ли разработал таблицу стилей, которая могла использоваться для оформления внешнего вида страницы отдельно от HTML-документа. Идея приглянулась представителям консорциума W3C, которые тотчас же принялись за ее доработку. Спустя несколько лет вышла в свет первая версия спецификации CSS. Затем она постоянно совершенствовалась, дорабатывалась… Но концепция оставалась все той же: каждому стилю задаются определенные свойства.
Использование таблиц CSS всегда вызывало определенные проблемы. Например, у верстальщиков часто возникали трудности с сортировкой и группировкой свойств, да и с наследованием не все так однозначно.
И вот наступили двухтысячные. Разметкой все чаще начали заниматься профессиональные фронтенд-разработчики, для которых важна была гибкая и динамическая работа со стилями. Существовавший на тот момент CSS требовал расстановки префиксов и отслеживания поддержки новых возможностей браузеров. Тогда специалисты по JavaScript и Ruby взялись за дело, создав препроцессоры - надстройки для CSS, добавляющие в него новые возможности.
CSS для начинающих: особенности препроцессоров
Они выполняют несколько функций:
- унифицируют браузерные префиксы и хаки;
- упрощают синтаксис;
- дают возможность работать с вложенными селекторами без ошибок;
- улучшают логику стилизации.
Вкратце: препроцессор добавляет в возможности CSS логику программирования. Теперь стилизация выполняется не обычным перечислением стилей, а с помощью нескольких простых приемов и подходов: переменных, функций, миксинов, циклов, условий. Вдобавок появилась возможность использовать математику.
Видя популярность таких надстроек, в W3C начали постепенно добавлять возможности из них в код CSS. Например, так в спецификации появилась функция calc(), которая поддерживается многими браузерами. Ожидается, что в скором времени можно будет задавать переменные и создавать миксины. Однако это произойдет в далеком будущем, а препроцессоры уже здесь и уже отлично работают.
Популярные препроцессоры CSS. Sass
Разработан в 2007 году. Изначально являлся компонентом Haml - шаблонизатора HTML. Новые возможности по управлению элементами CSS пришлись по вкусу разработчикам на Ruby on Rails, которые начали распространять его повсеместно. В Sass появилось огромное количество возможностей, которые сейчас входят в любой препроцессор: переменные, вложение селекторов, миксины (тогда, однако, в них нельзя было добавлять аргументы).
Объявление переменных в Sass
Переменные объявляются с помощью знака $. В них можно сохранять свойства и их наборы, например: “$borderSolid: 1px solid red;”. В этом примере мы объявили переменную под названием borderSolid и сохранили в ней значение 1px solid red. Теперь, если в CSS нам потребуется создать красный border шириной в 1px, просто указывает эту переменную после названия свойства. После объявления переменные менять нельзя. Доступно несколько встроенных функций. Например, объявим переменную $redColor со значением #FF5050. Теперь в коде CSS, в свойствах какого-нибудь элемента, используем ее для задания цвета шрифта: p { color: $redColor; }. Хотите поэкспериментировать с цветом? Используйте функции darken или lighten. Это делается так: p { color: darken($redColor, 20%); }. В результате цвет redColor станет на 20 % светлее.
Вложенность
Раньше для обозначения вложенности приходилось использовать длинные и неудобные конструкции. Представим, что у нас есть div, в котором лежит p, а в нём, в свою очередь, расположен span. Для div нам нужно задать цвет шрифта red, для p - yellow, для span - pink. В обычном CSS это делалось бы следующим образом:
С помощью препроцессора CSS все делается проще и компактнее:
Элементы буквально «вкладываются» один в другой.
Директивы препроцессора
С помощью директивы @import можно импортировать файлы. Например, у нас есть файл fonts.sass, в котором объявлены стили для шрифтов. Подключаем его в основной файл style.sass: @import ‘fonts’. Готово! Вместо одного большого файла со стилями у нас есть несколько, которые можно использовать для быстрого и легкого доступа к требуемым свойствам.
Миксины
Одна из самых интересных задумок. Дает возможность одной строкой задавать целый набор свойств. Работают следующим образом:
@mixin largeFont {
font-family: ‘Times New Roman’;
font-size: 64px;
line-height: 80px;
font-weight: bold;
Чтобы применить миксин к элементу на странице, используем директиву @include. Например, мы хотим применить его к заголовку h1. Получается следующая конструкция: h1 { @include: largeFont; }
Все свойства из миксина будут присвоены элементу h1.
Препроцессор Less
Синтаксис Sass напоминает о программировании. Если вы ищете вариант, который больше подходит изучающим CSS для начинающих, обратите внимание на Less. Он был создан в 2009 году. Главная особенность - поддержка нативного так что незнакомым с программированием верстальщикам его будет проще освоить.
Переменные объявляются с помощью символа @. Например: @fontSize: 14px;. Вложенность работает по тем же принципам, что и в Sass. Миксины объявляются следующим образом: .largeFont() { font-family: ‘Times New Roman’; font-size: 64px; line-height: 80px; font-weight: bold; }. Для подключения не нужно использовать директивы препроцессоров - просто добавьте свежесозданный миксин в свойства выбранного элемента. Например: h1 { .largeFont; }.
Stylus
Еще один препроцессор. Создан в 2011 году тем же автором, что подарил миру Jade, Express и другие полезные продукты.
Переменные можно объявлять двумя способами - явно или неявно. Например: font = ‘Times New Roman’; - это неявный вариант. А вот $font = ‘Times New Roman’ - явный. Миксины объявляются и подключаются неявно. Синтаксис таков: redColor() color red. Теперь можем добавить его элементу, например: h1 redColor();.
На первый взгляд Stylus может показаться непонятным. Где «родные» скобки и точки с запятой? Но стоит только в него погрузиться, как все становится намного более ясным. Однако помните, что длительная разработка с этим препроцессором может «отучить» вас использовать классический синтаксис CSS. Это иногда вызывает проблемы при необходимости работать с «чистыми» стилями.
Какой препроцессор выбрать?
На самом деле это… не имеет значения. Все варианты предоставляют примерно одинаковые возможности, просто синтаксис у каждого разный. Рекомендуем действовать следующим образом:
- если вы - программист и хотите работать со стилями как с кодом, используйте Sass;
- если вы - верстальщик и хотите работать со стилями как с обычной версткой, обратите внимание на Less;
- если вы любите минимализм, воспользуйтесь Stylus.
Для всех вариантов доступно огромное количество интересных библиотек, способных еще сильнее упростить разработку. Пользователям Sass рекомендуется обратить внимание на Compass - мощный инструмент с множеством встроенных возможностей. Например, после его установки вам уже никогда не придется беспокоиться о вендорных префиксах. Упрощается работа с сетками. Имеются утилиты для работы с цветами, спрайтами. Доступен ряд уже объявленных миксинов. Уделите этому средству пару дней - тем самым вы сэкономите немало сил и времени в будущем.
Одностраничник – это сайт, который состоит из одной короткой или длинной страницы и преследует коммерческую цель. По мнению интернет-маркетологов, такой формат сайта позволяет максимально привлечь внимание посетителей к его тематике. Одностраничники или Landing Page (посадочные страницы) создаются под один продукт, который нужно или быстро продать, если он уже известен целевой аудитории, или повысить его узнаваемость и популярность, если это новинка на рынке.
В современной бизнес-среде посадочные страницы очень востребованы. Они в сжатые сроки позволяют предпринимателям лучше узнать свою целевую аудиторию, представить ей продвигаемую услугу или товар и получить прибыль от продаж этого продукта. Большинство продавцов, желающих увеличить свои продажи с помощью интернет-пространства, используют для достижения этой цели одностраничные сайты. Давайте разберемся, какие именно задачи можно решить с помощью лендинг пейдж.
Чаще всего цель, с которой создается сайт-одностраничник, – это продажа товара или услуги. Но помимо этого с помощью лендинга можно решить и ряд других задач:
- Увеличить количество посетителей сайта и превратить их в клиентов.
- Определить процент потенциальных клиентов в общей массе посетителей.
- Провести анализ воздействия тех или иных маркетинговых приемов на целевую аудиторию.
- Собрать контактные данные посетителей для последующего предложения им продвигаемых продуктов.
В конечном итоге решение этих задач приводит к увеличению числа клиентов компании и росту ее прибыли.
Какие бывают одностраничные сайты
Выделяют четыре вида одностраничных сайтов:
- Длинная посадочная страница – встречается чаще всего.
- Короткая посадочная страница – обычно используется для сбора контактных данных и расширения базы подписчиков.
- Одношаговый лендинг – на одной странице находится и краткая информация о продукте, и кнопка, позволяющая совершить необходимое действие (купить продукт, подписаться на рассылку или вебинар).
- Двухшаговый лендинг – состоит из двух страниц: на первой располагается информация, подогревающая интерес посетителя, а на второй – призыв к действию и яркая кнопка для его совершения.
Любой их этих лендингов может быть как с вертикальной, как и с горизонтальной прокруткой. Вертикальный вариант наиболее удобный и популярный. Горизонтальная прокрутка напоминает формат электронной книги и выглядит оригинальнее вертикальной, но не очень удобна для посетителей и потому не пользуется особой популярностью.
Как создать сайт-одностраничник самостоятельно
Есть два пути создания сайтов-одностраничников, способствующих продвижению вашего бизнеса:
- Заказать у профессионалов – веб-студии или фрилансера.
- Сделать самостоятельно.
Если вы делаете только первые шаги в продажах или хотите протестировать реакцию покупателей на новый продукт, вы можете создать свой продающий сайт самостоятельно. Позже, когда дела пойдут в гору, и ваша предпринимательская деятельность начнет приносить прибыль, эффективнее будет обратиться к профессиональным разработчикам, которые сделают вам лендинг более высокого уровня, но для начала вы можете попробовать справиться своими силами.
Стоимость одностраничника, созданного своими руками, ниже стоимости сайта, созданного на заказ: во-первых, вы делаете все сами и тем самым экономите деньги за работу, во-вторых, как правило, вы идете самым простым путем из возможных, что обходится вам заметно дешевле. Ситуация, конечно, не без минусов, но на первых этапах они могут не играть существенной роли.
Создание Landing Page своими руками состоит из следующих этапов:
1. Создание плана.
На этом этапе нужно спланировать структуру вашего будущего одностраничника: из каких блоков он будет состоять, какую именно информацию будет содержать каждый блок, где вы будете брать эту информацию.
2. Выбор шаблона сайта.
Его можно получить одним из следующих способов:
- Скачать в Интернете – бесплатно, но неуникально, что плохо для продвижения.
- Купить – затратно, но быстро и без лишних усилий.
- Создать самостоятельно – уникально, но требует времени и специальных знаний.
3. Регистрация доменного имени и выбор хостинга.
4. Запуск сайта и его продвижение.
Если все указанное выше кажется вам слишком сложным, вы всегда можете заказать одностраничный сайт у профессионалов, тем самым сэкономив себе не только время, но и нервные клетки.
Отличие одностраничного сайта от обычного
От обычного многостраничного сайта лендинг пэйдж отличается своей сконцентрированностью на одном товаре или услуге и ярко выраженной коммерческой целью. Многостраничный сайт может служить информационным ресурсом (корпоративный сайт), визиткой (сайт-визитка) или же быть ориентированным на продажи и предлагать посетителям большой товарный ассортимент (интернет-магазин), тогда как лендинг всегда направлен на увеличение числа клиентов и рост продаж конкретного продукта.
Уникальное торговое предложение для одностраничника
При создании одностраничного сайта разрабатывается УТП – уникальное торговое предложение, которое должно максимально заинтересовать посетителей и подтолкнуть их к совершению ожидаемого от них действия. Основа УТП – цепляющий заголовок, расположенный вверху страницы. Далее следуют видео, графические изображения и текстовые блоки, дополняющие заголовок – они должны укрепить заинтересованность посетителя и подтолкнуть его к заказу.
Уникальное торговое предложение – это главная составляющая лендинга, то, что выделяет сайт и его тематику на фоне многочисленных конкурентов. Оно должно быть интересным для посетителей сайта и вызывать у них моментальное желание купить, заказать, подписаться. К разработке УТП нужно подходить со всей серьезностью, предварительно изучив интересы и потребности своей целевой аудитории.
Основа продвижения одностраничников – это ссылки с других ресурсов. К ним относятся:
- Страницы в социальных сетях.
- E-mail рассылки.
- Контекстная реклама в Яндексе и Гугле.
- SEO-тексты на различных сайтах.
Любой из этих пунктов требует финансовых затрат. С точной суммой можно определиться, только изучив все особенности и цели конкретного лендинга. Если вы занимаетесь раскруткой своего одностраничника самостоятельно, составьте для себя план работы и не останавливайтесь на одном виде продвижения. Ведь то, что работает для одного сайта, может быть бесполезным для другого.
Настроение целевой аудитории может меняться, как и тенденции в области продвижения Landing Page, поэтому нужно все время держать руку на пульсе, изучать своих существующих и потенциальных клиентов и не бояться новых решений. Также не лишним будет обратить внимание на действия успешных конкурентов – слепо копировать их не нужно, но интересные идеи можно позаимствовать, естественно, адаптировав их под особенности своего лендинга.
Действительно крутой лендинг пейдж — какой он? Этим вопросом задаются опытные маркетологи, начинающие разработчики одностраничников, онлайн-предприниматели, желающие таким образом продвигать свой проект.
Сегодня мы ответим на него, покажем, какие составляющие должны быть у действительно качественного веб-сайта. Читайте наш материал, смотрите подборку прямо сейчас.
Что такое одностраничные сайты?
Одностраничный сайт, или лендинг — это интернет-ресурс, по которому пользователь перемещается не по ссылкам или через навигационное меню, а с помощью прокрутки. Лендинги также называются целевыми страницами, потому что у каждого из них есть одна конкретная цель — убедить пользователя совершить конверсионное действие, например оставить контактные данные, записаться на консультацию или мероприятие, приобрести товар или услугу, — и структура целевой страницы и все элементы, расположенные на ней, подталкивают пользователя к этому действию.
Оффер и Call-to-action
Когда посетитель приходит на целевую страницу, он должен сразу считать:
- предложение бренда;
- дальнейшие действия (купить, скачать, пройти регистрацию, заказать расчет).
Поэтому яркий оффер, желательно не банальный, понятная CTA-кнопка — обязательные составляющие продающих страниц. Примеры одностраничных магазинов с хорошим элементом призыва к действию прямо перед вами.
Описание продукта/услуги
Как говорится, краткость — сестра таланта. Посетителю нужно понимать, что он покупает, как это решит его проблему. Описание продукции должно быть лаконичным, доступным. Никаких длинных фраз, долгих перечислений, превосходной формы прилагательных. Будьте честными с клиентами, постарайтесь их действительно заинтересовать.
У вас должна получиться качественная продающая страница. Примеры — ниже. Первый представляет селфи-палку, модное сегодня устройство.
Второй — кулинарные курсы. Обратите внимание еще на тематический дизайн: это действительно качественная, запоминающаяся работа.
Встречаются образцы одностраничных сайтов, которые сделаны с внутренними вкладками, где по клику посетителя «перебрасывает» на другую страницу, например. Это неправильно. Качественный landing page должен отличаться «мягкой» прокруткой, когда пользователю нет необходимости «скакать» по разделам. Достаточно просто листать вниз, плавно переходя от одной позиции меню к другой.
Все шаблоны LPStore сделаны по оговоренному принципу. Образцы масштабированы, чтобы было понятнее.
Под этим можно понимать как видео-презентации, так и красочные фото материалы. Текст — обязательное дополнение, но человек куда лучше воспринимает визуализированные аргументы, когда он может увидеть удобство, эстетичность товара.
У нас в Магазине найдутся такие одностраничные сайты. Примеры одностраничных магазинов:
Фото, ярко презентующие продукцию, отличают эти лендинги.
Конверсионная форма — это «передатчик» между брендом и посетителем, поэтому она должна быть, во-первых, понятной, во-вторых, привлекательной. Пожалуй, этот элемент считается одним из главных для лендинга. Его соответствие оговоренным критериям помогает пользователю сделать тот шаг, ради которого, собственно, создавался ресурс.
Маркетологи Gemm Learning (сервис-поставщик ПО) провели любопытный сплит-тест по этой теме. На своей странице они экспериментировали с двумя формами:
- стандартные 6 полей (имя, электронный адрес, телефон, штат (территория), поле для ввода комментария (не обязательное к заполнению);
- к стандартным добавили еще одно, выпадающее, с текстом «Можем ли мы вам позвонить?»
Вот как они выглядели.
Версия первая.
Версия вторая
Победила первая: она принесла на 70% больше заявок.
LPgenerator выбирает лид-формы упрощенного содержания, мы за минимализм. Вот, например, образец одностраничного сайта для клининга и примеры одностраничных магазинов светодиодных фонарей и шкафов-купе.
Лучшая мотивация для потенциальных заказчиков — наличие положительных отзывов о бренде от первого лица, подтверждающие сертификаты, мнения экспертов. Любой качественный веб-ресурс должен содержать , и желательно, чтобы проверить их достоверность было легко.
Такие блоки включают все наши одностраничники. Рассмотрим примеры одностраничных продающих сайтов. Первый — веб-ресурс продажи настольных игр.
Второй — реализация эко резиновой крошки.
Третий — магазин музыкальных инструментов:
Оформление соседних блоков лендинга разными цветами помогает визуально разделить контент и создать правильный пользовательский опыт.
Вот яркий одностраничник, пример бухгалтерских услуг.
Дополнительные примеры одностраничных магазинов:
Мы говорим не только о главном оффере, но о заголовках каждого раздела. Важно сделать их читаемыми, крупными, так как они предназначены для того, чтобы структурировать контент, сориентировать пользователя. Кстати, рекомендуется использовать «плакатные» шрифты, без «засечек».
Вот примеры одностраничных магазинов, где хорошо заметно то, о чем мы говорим.
Наличие «белого пространства»
Большая часть качественных веб-ресурсов делается с так называемыми «белыми пятнами» — наличием свободного пространства. Таким образом исключается впечатление скомканности контента, наползания блоков и элементов. Однако со свободным пространством тоже нужно обходиться правильно: некоторые разработчики относятся к нему небрежно, создавая противоположное ощущение — «чего-то не хватает».
Здесь все очень удачно.
