Учебник по Sass Создание онлайн-визитки с помощью Sass & Compass

 
 
  
 
 
Торик Фирдаус
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse dolor neque, eleifend в pellentesque quis, convallis сидеть amet Tellus. Etiam et auctor arcu.
 
 
 
 
 
 
facebook
 
 щебет
 
Google+
 
Dribbble
 
 
 
 

Как вы можете видеть выше, социальные идентичности, включенные в «социальную»Секция структурирована внутри элементов списка, поэтому мы можем легко отображать их рядом. Каждому из них присваивается имя класса в соответствии с этим соглашением Социально-facebook, социально-твиттер, социально-Google и так далее.

Конфигурация компаса

Нам нужно немного настроить Compass, раскомментировав несколько строк в config.rb файл, следующим образом:

 # Здесь вы можете выбрать предпочитаемый стиль вывода (может быть изменен через командную строку): output_style =: extended # Включить относительные пути к ресурсам с помощью вспомогательных функций компаса. Uncomment :lative_assets = true # Чтобы отключить отладочные комментарии, которые отображают исходное местоположение ваших селекторов. Раскомментировать: line_comments = false 

Если вы не можете найти config.rb файл, вы, вероятно, не запускали эту команду компас иници в каталоге вашего проекта.

Импорт файлов

Поскольку мы будем использовать Compass, нам нужно импортировать его с помощью;

 @import "компас"; 

И я лично предпочитаю сбрасывать стили по умолчанию из браузеров, чтобы вывод отображался более согласованно. Компас, в этом случае, имеет модуль сброса. Этот модуль основан на сбросе CSS Эрика Мейера и может быть импортирован с использованием;

 @import "компас / сброс"; 

Тем не менее, я предпочитаю использовать Normalize, что к счастью также поставляется в формате Sass / Scss. Загрузите файл здесь, сохраните его в пререкаться рабочий каталог и импортировать его в нашу таблицу стилей.

 @import "normalize"; 

Рекомендуемое чтение: Просмотр уровня приоритета стиля CSS

переменные

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

 $ base: #fff; $ dark: darken ($ base, 10%); 

В то время как $ ширина переменная ниже будет шириной нашей страницы; это также будет основой для определения других размеров элементов.

 ширина: 500 пикселей; $ space: $ width / 25; // = 20 пикселей 

И $ пространство переменная, как вы можете видеть, будет интервалом по умолчанию или размером столбца в нашей vCard, который в этом примере будет 20px;

В Compass также есть помощники для определения размера изображения, и мы будем использовать эту функцию в нашем профиле изображения следующим образом;

 $ img: image-width ("me.jpg") + (($ space / 4) * 2); 

Экстра прибавление из (($ пробел / 4) * 2) в приведенном выше коде, чтобы вычислить общую ширину изображения, включая границу, которая будет обрамлять изображение. Рамка обычно имеет две стороны; сверху и снизу / слева и справа, вот почему мы умножаем результат деления от 2.

Наследование селектора

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

 .float-left float: left;  .box-sizing @include box-sizing (border-box);  

Стили

Когда все, что необходимо, было настроено, тогда пришло время стилизовать нашу vCard, начиная с цвета фона для нашего HTML-документа;

 html height: 100%; цвет фона: $ base;  

визитная карточка

Следующие стили определяют упаковщик vCard. Если вы ранее работали с LESS, этот код будет вам знаком и прост в усвоении..

 .vcard width: $ width; маржа: 50px авто; цвет фона: темнее ($ base, 5%); граница: 1px solid $ dark; @include border-radius (3px); ul padding: 0; поле: 0; li list-style: none;  

Ширина обертки наследует значение от $ ширина переменная. Цвет фона темнее на 5% от основного цвета, в то время как цвет границы будет темнее 10%. Эта окраска достигается с помощью цветовых функций Sass.

Визитная карточка также будет иметь 3px радиус закругленных углов, который достигается с помощью Compass CSS3 Mixins; граница радиуса (3px).

Био раздел

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

 .bio border-bottom: 1px solid $ dark; отступ: $ пробел; @extend .box-sizing; img @extend .float-left; дисплей: блок; border: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-sizing; цвет: темнее (базовый $, 50%); поле: слева: $ пробел; внизу: $ space / 2;  width: $ width - (($ space * 3) + $ img); li &: before width: $ space; высота: $ пространство; margin-right: $ пробел; семейство шрифтов: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: before content: "m";  & .phone: before content: "N";  

В приведенном выше коде есть одна вещь, которую мы считаем необходимым обратить на это внимание. Ширина в .подробно Селектор указан с этим уравнением $ width - (($ space * 3) + $ img);.

Это уравнение используется для динамического расчета деталей ширина вычитая ширину профиля изображения и пробелы (отступы и поля) из общей ширины vCard.

Социальный раздел

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

 .социальный background-color: $ dark; ширина: 100%; отступ: $ пробел; @extend .box-sizing; ul text-align: center; li display: inline-block; ширина: 32 пикселя; высота: 32 пикс; a текстовое оформление: нет; дисплей: встроенный блок; ширина: 100%; высота: 100%; текстовый отступ: 100%; пустое пространство: nowrap; переполнение: скрытое;  

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

Прежде всего, нам нужно поместить наши иконки в специальную папку - давайте назовем папку /Социальное/, например. Вернувшись в таблицу стилей, объедините эти значки со следующими @Импортировать правило.

 @import "social / *. png"; 

Социальное/ выше обратитесь к папке, где мы храним значки. Эта папка должна быть вложена в папку с изображениями. Теперь, если мы посмотрим на нашу папку изображений, мы должны увидеть изображение спрайта, сгенерированное со случайными символами, например социально-sc805f18607.png. На данный момент ничего еще не происходит в front-end, пока мы не применим стили со следующей строкой.

 @ Включить все социальные спрайты; 

Конечный результат

Наконец, после всей тяжелой работы мы можем теперь видеть результат как это:

Если мы думаем, что 500px слишком широк позже, нам нужно только изменить значение в $ ширина переменная - например, 350 пикселей - остальное будет “волшебно” быть скорректированы. Вы также можете поэкспериментировать с переменной цвета.

• Посмотреть демо
• Скачать исходный код

Заключение

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

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