Php gzip сжатие файлов. Какой метод сжатия использовать в PHP? Является ли GZIP лучшим метод сжатия

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

Начать я предлагаю с небольшого напоминания о том, как делать не нужно, даже если очень хочется. Посмотрите на фреймворк Alesya , который разработал товарищ, обучающий Less других людей. Постарайтесь внимательно посмотреть на файл./core/functions.less . Хотя нет, не переходите по ссылке, просто посмотрите на скриншот небольшой части этого файла. Когда первый раз увидел - я просто выпал в осадок.

Оправдание - циклы очень медленные, как следствие, скорость трансляции Less в CSS снижается, а время трансляции увеличивается. Pentium 4? Без обид, но это расстраивает.

Приведу отрывок из книги «HTML5 для веб-дизайнеров» за авторством Джереми Кит, который не так давно стал героем пабликов в ВК:

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

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

Поэтому, если вы будете так же использовать Less, знайте, вас уже ищут и скоро найдут.

Расширение селекторов

Имеем типичный для наших дней прерыватель потока:

Clearfix { &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

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

Например, так:

Navbar { &:extend(.clearfix all); ... } .navbar-collapse { &:extend(.clearfix all); ... } .ad { &:extend(.clearfix all); ... }

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

Clearfix:before, .clearfix:after, .navbar:before, .navbar:after, .navbar-collapse:before, .navbar-collapse:after, .ad:before, .ad:after { content: " "; display: table; } .clearfix:after, .navbar:after, .navbar-collapse:after, .ad:after { clear: both; }

Конечно, злоупотреблять этим не стоит. Честно говоря, советую использовать расширение селекторов только для clearfix и в случаях, когда действует правило: «Ну очень надо, ничего поделать не могу, иначе будет хуже». Не стоит использовать расширение селекторов тогда, когда происходят махинации со стилями элементов. Наиболее частая и глупая ошибка:

Class { color: #fff; background: #fff; } .new-class { &:extend(.class); } // .class, // .new-class { // color: #fff; // background: #fff; // }

Так делать нельзя. Это глупо. Лучше использовать.class как примесь:

Class { color: #fff; background: #fff; } .new-class { .class; } // .class { // color: #fff; // background: #fff; // } // .new-class { // color: #fff; // background: #fff; // }

Запомните это!

Параметры импорта

Пожалуйста, обратите внимание на раздел документации «параметры директивы импорта» .

Я приведу лишь краткое описание самых важных из этих параметров:

reference

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

@import (reference) "bower_components/bootstrap/less/bootstrap"; .my-alert { .alert; }

Использование этого параметра даёт возможность подключать файлы не.less расширения. Параметр не обязательный, так как и без него всё будет работать, но, тем не менее, если вы любите порядок - пригодится. Этот параметр можно применять при подключении файлов с расширением, отличным от.less , к примеру, .variables , .mixins .

Применять нужно так:

@import (keyword) "filename";

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

Условные конструкции

В Less есть условные конструкции. Да, они не полноценные, если сравнивать их с другими препроцессорами, но всё таки их наличие не может не радовать. Мне они кажутся даже удобнее, чем @if в Sass, хотя практической разницы никакой нет.

Mixin(@variable) { & when (@variable = 1) { content: "TRUE" } & when not (@variable = 1) { content: "FALSE" } } .class-test { .mixin(1); .mixin(2); }

В итоге мы получим следующий CSS:

Class-test { content: "TRUE"; content: "FALSE"; }

Что же только что произошло? Магия?

На самом деле - нет. Ключевое слово when тут заменяет привычный во всех языках программирования if и имеет всего два логических элемента: not - отрицание, and - просто and и всё, больше ничего нет. Особо крутого с этим сделать не получится, но я использую условный оператор для того, чтобы не генерировался лишний код. Одной из таких ситуаций, например, является свойство border-radius в генераторе стилей кнопки. Зачем лишний раз будет прописываться какое-либо свойство при генерации, если его значение не играет роли (0)? - Правильно, не нужно.

Интерполяция переменных

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

// Variables @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-red-200: #ffcdd2; .mixin(@color, @temperature: 500) { color: ~"@{clr-@{color}-@{temperature}}"; background: e("@{clr-@{color}-@{temperature}}"); } .class-test { .mixin(grey, 100); &-test { .mixin(red, 200); } }

В этом примере вызывается примесь, в которой параметрами выступают цвет (@color ) и его температура (@temperature ). Далее мы собираем все переменные в одну, то есть, проще говоря, конструируем новую переменную и получаем её значение. Процесс, когда строка, условно говоря, превращается в вызов переменной и есть интерполяция переменных.

Заметьте, что в этом примере мы используем фигурные скобки после собачки - это очень важно.

На выходе:

Class-test { color: #fafafa; background: #fafafa; } .class-test-test { color: #ffcdd2; background: #ffcdd2; }

Кстати, такого я найти в Sass и Stylus не смог. Может подскажет внимательный читатель? :)

Циклы

Многие приверженцы препроцессоров Sass и Stylus давят на то, что в Less нет циклов, но они есть, хотя и не такие как у всех. Вот только пользоваться ими неудобно.

Допустим, что у нас есть список цветов:

@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;

Для примера, давайте создадим для каждого цвета свой класс:

Color-generator(@index: 1, @color) when (@index .submit; }

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

@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");
Это может быть полезно при создании централизованного фреймворка.

Экранирование Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:

Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.

Button { background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666, @color - #444444); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444")";}
Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.

Импорт Как и в обычном CSS вы можете импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис:

@import "reset.min.css"; @import "framework.less"; @import "widgets";
Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.
Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.
Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.

Комметарии Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша.

/* This is my main LESS file. It governs how most of the site looks. /* body { padding:0px; // This resets the body padding }

Чего не хватает? Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.

Filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#faa51a", endColorstr="#f47a20")";
Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.

Заключение Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.

CSS - это простой язык. Он позволяет нам задавать стили для HTML элементов с помощью селекторов. Это просто даже для начинающих.

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

В этом уроке мы объясним, что такое CSS-препроцессор и рассмотрим один из самых популярных: LESS.

Что такое препроцессор CSS?

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

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

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

Люди, использующие LESS, могут создать заранее определенный набор цветов для своего сайта. Они могут определить особый стиль один раз и затем многократно использовать его везде, где необходимо.

Использование LESS

Чтобы воспользоваться тем, что LESS может предложить, мы сначала должны сохранить наш CSS-код в файл с расширением .less . Использовать LESS очень просто. Он работает как на веб-сервере, так и на стороне клиента.

Этот метод работает только в современных браузерах и подходит только для использования на локальном сервере. Для рабочего сайта необходима предварительная компиляция с применением Node на веб-сервере или различные инструменты от сторонних производителей.

Некоторые из инструментов сторонних производителей:

• и многие другие...

LESS Синтаксис: Переменные

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

#header {
background-color : #CCCCCC
}
.aside {
background-color : #CCCCCC ;
color : #000000 ;
.sidebar a {
border-bottom : 1px solid #CCCCCC ;
}

В LESS, мы можем просто объявить переменную для сохранения цвета, вот так:

@grey: #CCCCCC;

И затем повторно использовать это так:

#header {
background-color : @grey;
}
.aside {
background-color : @grey;
color : #000000 ;
}
.sidebar a {
border-bottom : 1px solid @grey;
}

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

LESS Синтаксис: Mixins

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

Border_top_bottom {
border-top : dotted 1px #000 ;
border-bottom : solid 2px #000 ;
}

В приведенном выше коде мы определили верхнюю и нижнюю границу внутри класса border_top_bottom. Теперь, когда мы хотим добавить эти стили к другими элементами, мы можем использовать их так:

#header {
color : #000000 ;
.border_top_bottom;
}
.content a {
color : #000000 ;
.border_top_bottom;
}

Приведенный выше код выведет следующее:

#header {
color : #000000 ;

}
.content a {
color : #000000 ;
border-top : dotted 1px #000000 ;
border-bottom : solid 2px #000000 ;
}

Чтобы добавить больше гибкости, mixins также позволят нам передавать переменные (называемые здесь параметры). Например:

Border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

В приведенном выше примере, мы задали параметр для радиуса. Мы также дали ему значение по умолчанию равное 5px, которое не является обязательным. Теперь мы хотим добавить это для класса button:

Button {
.border-radius(6px ) ;
}

Если мы уберем 6px из приведенного выше примера, границы радиуса будут заданы по умолчанию, который указан в нашем классе border-radius и равен 5px.

Синтаксис LESS: Nesting

Одна из вещей, распространеных в CSS, это длинные селекторы, которые нам часто приходится писать для стилей дочерних элементов:

nav { }
nav li { }
nav li a { }
nav li a:hover { }
nav li a.active { }
nav li a.visited { }

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

nav {
li {
a {
& :hover { }
& :active { }
& :visited { }
}
}
}

Символ "&" используется перед псевдо-классами в нашей вложенной структуре. Описанную выше конструкцию гораздо легче понять и показать иерархию именно так, как она есть.

Синтаксис LESS: Операции

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

@padding: 5px;
h1 {
padding : @padding;
}
h1.page-title {
padding : (@padding * 2);
}

Значение по умолчанию будет умножено на 2, что задаст заголовку на главной странице padding равный 10px. Операции должны выполняться в круглых скобках, однако они могут также работать без скобок.

Синтаксис LESS: Scope

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

@var: red;

#page {
@var: white;

#header {
color : @var; // выведет white
}
}
#footer {
color : @var; // выведет red
}

Заключение

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

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