Стилизация приложений с помощью Less, Sass и Font Awesome

Steve Smith

В современных веб приложениях часто используется богатый инструментарий и фреймворки для их отображения. Такие фреймворки, как Bootstrap, могут определять общий набор стилей для веб сайтов. Однако многие веб сайты эффективно используют CSS файлы, а также иконки, которые делают интерфейс сайта более интуитивным. Здесь вступают в игру языки и инструменты, которые поддерживают Less и Sass, а также такие библиотеки как Font Awesome.

+.. contents:: Разделы: + :local: + :depth: 1

Препроцессорные языки CSS

Языки, которые компилируются в другие языки, чтобы улучшить работу с основополагающим языком, считаются препроцессорными. Для CSS есть два популярных препроцессорных языка: Less и Sass. Они добавляют в CSS функционал, например, для поддержки переменных и вложенных правил, которые улучшают работу с большими, сложными таблицами стилей. CSS является довольно простым языком, который даже не поддерживает переменные, и поэтому CSS файлы нужно постоянно заново использовать. С помощью препроцессорных языков мы можем уменьшить дублирование и лучше организовать правила стилизации. Visual Studio предоставляет встроенную поддержку для Less и Sass, а также расширений, которые улучшают разработку на этих языках.

Давайте рассмотрим этот CSS:

.header {
   color: black;
   font-weight: bold;
   font-size: 18px;
   font-family: Helvetica, Arial, sans-serif;
}

.small-header {
   color: black;
   font-weight: bold;
   font-size: 14px;
   font-family: Helvetica, Arial, sans-serif;
}

С помощью Less мы можем избежать дублирования:

.header {
   color: black;
   font-weight: bold;
   font-size: 18px;
   font-family: Helvetica, Arial, sans-serif;
}

.small-header {
   .header;
   font-size: 14px;
}

Visual Studio поддерживает Less и Sass. Для более ранних версий Visual Studio нам надо установить ` расширение Web Essentials <http://vswebessentials.com/>`_.

Less

Less запускается с помощью Node.js. Его легко можно установит с помощью Node Package Manager (NPM):

npm install -g less

Если вы используете Visual Studio, то вам нужно добавить в проект один или несколько Less файлов, а затем настроить Gulp (или Grunt) для их обработки во время компиляции. Добавьте в проект папку Styles, а затем добавьте в эту папку новый Less с именем main.less.

../_images/add-less-file.png

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

../_images/folder-structure.png

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

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

@base: #663333;
@background: spin(@base, 180);
@lighter: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

body {
        background-color:@background;
}
.baseColor  {color:@base}
.bgLight    {color:@lighter}
.bgLight2   {color:@lighter2}
.bgDark     {color:@darker}
.bgDark2    {color:@darker2}

@base и другие элементы с префиксом @ являются переменными. Каждый элемент представляет цвет. Кроме @base, все эти элементы используют функции: lighten, darken и spin. Lighten и darken делают цвет более светлым или более темным; spin придает цвету оттенок. Less игнорирует переменные, которые не используются, так что мы должны использовать эти переменые хоть где-нибудь, чтобы увидеть, как они работают. В классах .baseColor и тп. представлены значения созданных переменных в CSS файле.

Начинаем

Если такового еще нет, добавьте в проект новый конфигурационный файл Gulp. Убедитесь, что package.json включил gulp в devDependencies, и добавьте “gulp-less”:

"devDependencies": {
                "gulp": "3.8.11",
                "gulp-less": "3.0.2",
                "rimraf": "2.3.2"
        }

Сохраните изменения в файле package.json, и вы должны увидеть, что все нужные файлы можно найти в папке Dependencies под NPM. Если это не так, кликните правой клавишей мышки по папке NPM и выберите “Restore Packages.”

Теперь откройте gulpfile.js. Добавьте сверху переменную для представления less:

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    fs = require("fs"),
    less = require("gulp-less");

добавьте еще одну переменную для доступа к свойствам проекта:

var project = require('./project.json');

Далее, добавьте задачу для запуска less:

gulp.task("less", function () {
        return gulp.src('Styles/main.less')
                .pipe(less())
                .pipe(gulp.dest(project.webroot + '/css'));
});

Откройте Task Runner Explorer (view > Other Windows > Task Runner Explorer). Среди задач вы должны увидеть новую с именем less. Запустите ее:

../_images/less-task-runner.png

Теперь обновите Solution Explorer и посмотрите на контекст папки wwwroot/css. Вы увидите новый файл, main.css:

../_images/main-css-created.png

Откройте main.css:

body {
  background-color: #336666;
}
.baseColor {
  color: #663333;
}
.bgLight {
  color: #884a44;
}
.bgLight2 {
  color: #aa6355;
}
.bgDark {
  color: #442225;
}
.bgDark2 {
  color: #221114;
}

Добавьте в папку wwwroot простую HTML страницу и сделайте ссылку на main.css.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <link href="css/main.css" rel="stylesheet" />
        <title></title>
</head>
<body>
        <div>
                <div class="baseColor">BaseColor</div>
                <div class="bgLight">Light</div>
                <div class="bgLight2">Light2</div>
                <div class="bgDark">Dark</div>
                <div class="bgDark2">Dark2</div>
        </div>
</body>
</html>

Вы видите, что использовался 180-градусный spin для @base, чтобы создать @background от @base:

../_images/less-test-screenshot.png

Less также поддерживает вложенные правила, а также вложенные медиа запросы. Например, определение вложенной иерархии, как меню, выглядит в CSS вот так:

nav {
        height: 40px;
        width: 100%;
}
nav li {
        height: 38px;
        width: 100px;
}
nav li a:link {
        color: #000;
        text-decoration: none;
}
nav li a:visited {
        text-decoration: none;
        color: #CC3333;
}
nav li a:hover {
        text-decoration: underline;
        font-weight: bold;
}
nav li a:active {
        text-decoration: underline;
}

В идеале, все связанные правила должны размещаться внутри CSS файла, Но на практике это не так.

Определение этих же правил с помощью Less выглядит вот так:

nav {
        height: 40px;
        width: 100%;
        li {
                height: 38px;
                width: 100px;
                a {
                        color: #000;
                        &:link { text-decoration:none}
                        &:visited { color: #CC3333; text-decoration:none}
                        &:hover { text-decoration:underline; font-weight:bold}
                        &:active {text-decoration:underline}
                }
        }
}

Обратите внимание, что все второстепенные элементы nav содержатся внутри его сферы видимости. Больше родительские элементы (nav, li, a) не повторяются, и общее число строк также уменьшилось. Это очень хорошо, чтобы элементы для заданного UI находились в одной области видимости, то есть, отделялись от остальной части кода фигурными скобками.

Синтаксис & касается Less селектора, где & представляет текущий родительский элемент селектора. Внутри блока {...} & представляет тэг a, то есть, &:link - это эквивалент a:link.

Медиа запросы, весьма полезные при создании отзывчивого дизайна, могут усложнить CSS. Less делает так, что медиа запросы могут быть вложены в классы, так что нам не нужно повторять объявление класса внутри элементов @media. Вот пример CSS для отзывчивого меню:

.navigation {
        margin-top: 30%;
        width: 100%;
}
@media screen and (min-width: 40em) {
        .navigation {
                margin: 0;
        }
}
@media screen and (min-width: 62em) {
        .navigation {
                width: 960px;
                margin: 0;
        }
}

В Less это определяется вот так:

.navigation {
        margin-top: 30%;
        width: 100%;
        @media screen and (min-width: 40em) {
                margin: 0;
        }
        @media screen and (min-width: 62em) {
                width: 960px;
                margin: 0;
        }
}

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

CSS файлы, обычно для больших сайтов (и особенно если используются медиа запросы), становятся очень громоздкими. Less можно определять отдельно, а затем объединять с помощью директив @import. Less также можно использовать для импорта отдельных CSS файлов.

Примеси могут принимать параметры, и Less поддерживает условную логику в виде примесей. Обычно примеси используются для установки цветов, основываясь на том, каким является базовый цвет. Допустим, у нас есть примесь, которая принимает параметр для цвета, а затем мы меняем примесь, основываясь на этом цвете:

.box (@color) when (lightness(@color) >= 50%) {
        background-color: #000;
}
.box (@color) when (lightness(@color) < 50%) {
        background-color: #FFF;
}
.box (@color) {
        color: @color;
}

.feature {
        .box (@base);
}

Если текущее значение @base является #663333, этот Less скрипт создаст следующий CSS:

.feature {
  background-color: #FFF;
  color: #663333;
}

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

Sass

Sass похож на Less, но у него немного иной синтаксис. Он был создан с помощью Ruby, а не JavaScript. Оригинальный Sass не использует круглые скобки или точки с запятой, вместо этого он использует пробелы и отступы. В третьей версии Sass был представлен новый синтаксис, SCSS (“Sassy CSS”). SCSS похож на CSS в том, что игнорирует уровни отступов и пробелы, а вместо этого использует точки с запятой и фигурные скобки.

Чтобы установить Sass, вам сперва понадобится установить Ruby, а затем запустить:

gem install sass

Если вы работаете с Visual Studio, то начать работу с Sass можно фактически так же, как и с Less. Откройте package.json и добавьте в devDependencies пакет “gulp-sass”:

"devDependencies": {
        "gulp": "3.8.11",
        "gulp-less": "3.0.2",
        "gulp-sass": "1.3.3",
        "rimraf": "2.3.2"
}

Далее, добавьте в gulpfile.js переменную sass и задачу для компиляции Sass файлов, а результат разместите в папке wwwroot:

var gulp = require("gulp"),
        rimraf = require("rimraf"),
        fs = require("fs"),
        less = require("gulp-less"),
        sass = require("gulp-sass");

// other content removed

gulp.task("sass", function () {
        return gulp.src('Styles/main2.scss')
                .pipe(sass())
                .pipe(gulp.dest(project.webroot + '/css'));
});

Теперь вы можете добавить файл main2.scss в папку Styles:

../_images/add-scss-file.png

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

$base: #CC0000;
body {
        background-color: $base;
}

Сохраните все файлы. Теперь в Task Runner Explorer вы должны увидеть задачу sass. Запустите ее, обновите solution explorer и взгляните на папку /wwwroot/css. Здесь должен находиться файл main2.css с данным контекстом:

body {
  background-color: #CC0000; }

Sass поддерживает вложение. Файлы могут быть разделены по функциям и объединены с помощью директивы @import:

@import 'anotherfile';

Sass также поддерживает примеси, используя ключевое слово @mixin для их определения и @include для их включения, как в примере sass-lang.com:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
                  border-radius: $radius;
}

.box { @include border-radius(10px); }

Также Sass поддерживает принцип наследования. Это похоже на примеси, но в результате у вас будет меньше CSS кода. Делается это с помощью ключевого слова @extend. Во-первых, давайте посмотрим, как использовать примеси и итоговый CSS код. Добавьте следующее в файл main2.scss:

@mixin alert {
        border: 1px solid black;
        padding: 5px;
        color: #333333;
}

.success {
        @include alert;
        border-color: green;
}

.error {
        @include alert;
        color: red;
        border-color: red;
        font-weight:bold;
}

Вот результат в main2.css после запуска sass задачи в Task Runner Explorer:

.success {
  border: 1px solid black;
  padding: 5px;
  color: #333333;
  border-color: green;
 }

.error {
  border: 1px solid black;
  padding: 5px;
  color: #333333;
  color: red;
  border-color: red;
  font-weight: bold;
}

Обратите внимание, что все общие свойства примеси alert повторяются в каждом классе. При разработке мы избегаем дублирования, но в созданном CSS все же есть много дублирования. Было бы здорово, если бы мы могли следовать принципу Don’t Repeat Yourself (DRY) во время разработки и рантайма.

Далее, замените примесь классом .alert и поменяйте @include на @extend (нужно использовать .alert, а не alert):

.alert {
        border: 1px solid black;
        padding: 5px;
        color: #333333;
}

.success {
        @extend .alert;
        border-color: green;
}

.error {
        @extend .alert;
        color: red;
        border-color: red;
        font-weight:bold;
}

Запустите Sass еще раз, и вы увидите следующий CSS код:

.alert, .success, .error {
  border: 1px solid black;
  padding: 5px;
  color: #333333; }

.success {
  border-color: green; }

.error {
  color: red;
  border-color: red;
  font-weight: bold; }

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

Sass также включает в себя функции и условные операции. По факту, функционал обоих языков довольно схож.

Less или Sass?

На данный момент большинство ASP.NET разработчиков предпочитают Less. Конечно, лучше использовать один из этих инструментов, вместо того, чтобы создавать CSS вручную. А дя этого вам подойдут и Less, и Sass.

Font Awesome

Font Awesome предлагает больше 500 векторных иконок, которые можно использовать в веб приложении. Изначально он использовался с Bootstrap, но может работать с любой JavaScript библиотекой.

Чтобы начать работу с Font Awesome, надо добавить ссылку на него, используя CDN:

<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Его можно добавить в проект Visual Studio, включив в “dependencies” в bower.json:

{
        "name": "ASP.NET",
        "private": true,
        "dependencies": {
                "bootstrap": "3.0.0",
                "jquery": "1.10.2",
                "jquery-validation": "1.11.1",
                "jquery-validation-unobtrusive": "3.2.2",
                "hammer.js": "2.0.4",
                "bootstrap-touch-carousel": "0.8.0",
                "Font-Awesome": "4.3.0"
        }
}

Далее, чтобы таблица стилей была добавлена в папку wwwroot, измените gulpfile.js следующим образом:

gulp.task("copy", ["clean"], function () {
        var bower = {
                "angular": "angular/angular*.{js,map}",
                "bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
                "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
                "hammer.js": "hammer.js/hammer*.{js,map}",
                "jquery": "jquery/jquery*.{js,map}",
                "jquery-validation": "jquery-validation/jquery.validate.js",
                "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
                "font-awesome": "Font-Awesome/**/*.{css,otf,eot,svg,ttf,woff,wof2}"
        };

        for (var destinationDir in bower) {
                gulp.src(paths.bower + bower[destinationDir])
                        .pipe(gulp.dest(paths.lib + destinationDir));
        }
});

После этого запустите задачу ‘copy’ в Task Runner Explorer, и тогда шрифты font awesome и css файлы будут скопированы в /lib/font-awesome.

После появления ссылки вы можете добавлять в приложение иконки, применяя классы Font Awesome к HTML элементам (таким как <span> или <i>). Вы можете применять иконки к простым спискам или меню, используя вот такой код:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title></title>
        <link href="lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
        <ul class="fa-ul">
                <li><i class="fa fa-li fa-home"></i> Home</li>
                <li><i class="fa fa-li fa-cog"></i> Settings</li>
        </ul>
</body>
</html>

Вот результат:

../_images/list-icons-screenshot.png

Вот полный список доступных иконок:

http://fortawesome.github.io/Font-Awesome/icons/

Резюме

Большинству веб приложений требуется отзывчивый, чистый, интуитивный дизайн, доступный для множества устройств. Этих целей можно добиться с помощью Less или Sass, а Font Awesome предлагает нам разные иконки, что улучшает взаимодействие с пользователями.

Поделись хорошей новостью с друзьями!
Следи за новостями!