Lesshat

Lesshat

November 19, 2013

Продолжение темы препроцессоров для CSS, которая для меня намного интереснее всех остальных.

На этот раз остановимся на препроцессоре LESS, ибо было бы странно рассказать о SASS (SCSS) и не упомянуть о не менее популярном его аналоге. Преимуществ у LESS столько же, сколько и недостатков.

Эта статья является моей попыткой на личном опыте познакомиться с LESS Hat и сравнить ее с Compass. Про сам LESS и его синтаксис я рассказывать не буду — это глупо, ибо документация для этого препроцессора прекрасно оформлена и переведена на русский язык на оф. сайте проекта.

Плюсы — этот препроцессор развивается более динамично, это более молодой проект. Синтаксис LESS интуитивно понятный и максимально приближен к CSS, поэтому новички могут освоить его совсем без труда. Документация для LESS гораздо более подробная, с примерами и переведена на множество языков, что облегчает его изучение (для SASS это серьезный недостаток, я сам с этим сталкиваюсь постоянно, когда изучаю Compass).

Ну и последний немаловажный момент, который оказывает существенное влияние на распространенность LESS, это тот факт, что он включен в состав модного и известного фреймворка Bootstrap. То есть, все компоненты этого фреймворка созданы с использованием данного препроцессора. А если учесть, что один из трех китов CMS — Joomla 3 — создана на Bootstrap, то можно только гадать, куда заведет этот процесс.

К недостаткам LESS лично я могу отнести такой факт, как большое время для компиляции (хотя на оф. сайте один из создателей Bootstrap отвечал на вопрос, что им выбран препроцессор LESS как раз из-за высокой скорости компиляции, ибо он написан на языке Javascript). Еще один момент в минус LESS — файл с расширением .less компилируется каждый раз при обращении к нему браузера.

В SASS производится создание файла из “раз и навсегда”, там не нужно что-то собирать на лету, а он уже готовый подключается в HTML-документ. И последнее — LESS не имеет на сегодня такой продвинутой библиотеки миксинов, как Compass для SASS (SCSS). Точнее — подобная библиотека уже есть и ее название LESS Hat (глупо было бы, если бы такая библиотека не появилась). Однако она уступает по своим возможностям Compass.

Итак, мы уже выяснили, что LESS Hat — аналог Compass под SASS (SCSS). Библиотека LESS Hat была создана командой, которая разработала плагин под Adobe Photoshop с названием CSS Hat. Этот плагин выполняет автоматизированные операции по переводу свойств любого элемента на psd-макете в свойства CSS.

То есть, он старается упростить и ускорить задачу верстальщика, которую тот обычно выполняет вручную. Плагин CSS Hat не бесплатный, цену его я не знаю (это нетрудно узнать) и сам им не пользовался ни разу, поэтому ничего не могу сказать по этому поводу.

Проект LESS Hat на сегодняшний момент является самой большой и популярной библиотекой готовых миксинов под препроцессор LESS. В отличие от плагина CSS Hat, библиотека LESS Hat бесплатная для использования. На момент написания статьи самая свежая версия этой библиотеки — v2.0.7, которую я и забираю со страницы проекта для своих собственных экспериментов. Архивчик .zip весит около 200Kb, что прилично для подобной библиотеки. Но пугаться не стоит — из всего архива нам потребуется только один файлик, а все остальное — это сопутствующая информация. Если распаковать архив, то увидим следующий список файлов и папок:

Первая папка — самая нужная, там находятся два файла и (не успел разобраться, для чего нужен этот файл), которые являются готовыми к использованию коллекциями LESS-миксинов.

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

Теперь создаю шаблон для будущей площадки экспериментов под LESS и LESS Hat. Все как обычно — подключаю файл стилей в формате и файл для автоматической компиляции в CSS на лету — .

Затем вытаскиваю из папки файлик lesshat.less и кидаю его в папочку , где также расположен файл (все до кучи). Кстати, сразу оговорюсь, что все файлы и пример в целом (для этой статьи) у меня крутился под управлением локального сервера XAMPP. С ним у меня отношения сложились с первого раза, в отличие от других популярных серверов, таких как OpenServer, Endels(Denwer), WAMP.

Файл подключаю к через директиву . Как говориться в оф. документации к LESS, расширение можно и не указывать, но оставлю “как есть”:

Все готово для того, чтобы опробовать библиотеку LESS Hat. Применю оттуда готовый миксин для создания скругленных углов у блока с помощью CSS-свойства . В документации к этому миксину говориться, что он может принимать значения без указания единиц измерения, так как допишет их сам ( по умолчанию).

Читайте также:  Волки канады

Также вспомним функции для работы с цветами в LESS. И воспользуемся еще двумя миксинами из LESS Hat: для создания градиентов у блока и для придания внешней тени.

Рабочий файлик получиться следующим:

Результат работы препроцессора LESS и его библиотеки миксинов LESS Hat показан ниже. Вот это да — работает!

Список всех миксинов, доступных в этой библиотеке, представлен в начале файла , в разделе “TABLE OF MIXINS”. Количество mixin’ов немаленькое (86 штук), но мне кажется, что у Compass оно будет намного больше.

Подробное описание и примеры использования каждого из миксинов библиотеки LESS Hat доступно на GitHub в файле . Добро пожаловать ознакомиться — там все хорошо описано.

В принципе — больше и сказать нечего. Подключайте и используйте LESS Hat — только так можно освоить и оценить эту библиотеку. Для себя я сделал вывод, что мне пока удобнее работать с SASS/Compass и возможностей у последнего больше, чем у LESS/LESS Hat.

  • Like
  • Tweet
  • +1

jpeg и jpg — разница

Изображения иногда встречаются с разными расширениями — _.jpg_ или _.jpeg_. В чем же разница между ними? Это разные форматы изображения?Н. … Continue reading

UI/Theme Frameworks and Components

Ant Design An enterprise-class UI design language and React-based implementation.
Balloon.css Simple tooltips made of pure CSS
Bootflat Open source Flat UI KIT based on Bootstrap
BootPress A PHP Framework with a built in Blog and Flat File CMS
Bootstrap Front-end framework for developing responsive, mobile first projects on the web
Bootswatch Collection of free themes for Bootstrap
Cardinal Small "mobile first" CSS framework for front-end developers who build responsive web applications
Flat UI Free Theme and framework for Bootstrap
Ink set of tools for quick development of web interfaces
Metro UI CSS Set of styles to create a site with an interface similar to Windows 8
Petal A modern, light CSS UI framework developed at Shakr
Pre CSS framework
prelude Lightweight, responsive and extensible front-end framework
Schema Light, responsive, and lean frontend UI framework
Semantic UI UI component framework based around useful principles from natural language
Strapless CSS boilerplate/framework for HTML elements, mixins library for patterns and color
UIkit Lightweight and modular front-end framework for developing web interfaces
ngBoilerplate An opinionated kickstarter for AngularJS projects
Wee Lightweight front-end framework for logically building complex, responsive web projects

Grid Systems

Mixin Libraries

3L Mixins library
animate Library of CSS3 keyframe animations
Clearless Collection of mixins
Css3LessPlease Conversion of css3please.com to Less mixins
CssEffects Collection of CSS style effects
Cssowl Mixin library
cube.less Animated 3D cube using only CSS
est Mixin library
Hexagon Generate CSS hexagons with custom size and color
homeless Mixin library
LESS Elements Set of mixins
LESS Hat Mixins library
lessley A jasmine like testing suite written in pure Less
Lessmore Mixins library. Cross-browser support for the CSS3 features and more
LESS-bidi Set of mixins for creating bi-directional styling
LESS-Mix Mixins library
media-query-to-type Media Queries to Media Types with Less
More-Colors.less Variables for easier color manipulation while you design in the browser
more-less Mixin lib supporting Less 1.7
More.less Mixins, animations, shapes and more
more-or-less for-loops and other functions + css3 mixins
normalize.less Modularized famous normalize.css using Less
Oban Collection of mixins
Preboot Collection of variables and mixins. The precursor to Bootstrap
prelude-mixins Collection of mixins
Shape.LESS Collection of mixins for various shapes
tRRtoolbelt.less Mixins and functions for common actions
Tuesday.less CSS Animation mixins library

Editors and IDEs

  • Crunch 2! (built-in compiling, debugging, and searching across @imports)
  • Mindscape Web Workbench (built-in support)
  • NetBeans (built-in syntax highlighting)
  • TextMate
  • Vim
  • Emacs
  • jetBrains WebStorm and PhpStorm (built-in support)
  • Brackets (built-in syntax highlighting, several extensions for compilation)
  • CodeLobster (built-in syntax highlighting)
  • KineticWing IDE (built-in support)
  • nodeMirror (built-in support, built-in HTML/CSS/Less preview)
  • HTML-Kit Tools (built-in support)
  • Dreamweaver CC (built-in support)

Sublime Text 2 & 3

Eclipse

  • Eclipse Less Plugin by Vincent Simonet
  • Transpiler Plugin by Thomas Gossmann

Komodo Edit/IDE

  • Komodo Less Compiler by Bob de Haas

Visual Studio

  • CSS Is Less (Visual Studio)
  • Web Essentials 2012 (Visual Studio 2012)
  • Web Essentials 2013 (Visual Studio 2013)
  • Web Tools 2013 (Visual Studio)

Dreamweaver

Notepad++ 6.x

  • Less.js Syntax Highlighting User Defined Language by Raúl Salitrero
  • Less.js Syntax Highlighting User Defined Language by azrafe7
  • How to Install

Browser extensions

Postprocessor/Feature Plugins

Autoprefixer Add vendor prefixes
CSScomb Beautify/format
clean-css Compress/minify
CSSWring Compress/minify
css-flip Generate left-to-right (LTR) or right-to-left (RTL) CSS
functions Write custom Less functions in Less itself
group-css-media-queries Group CSS media queries
inline-urls Convert url() to a call to data-uri()
lesshint Lint your Less
lists Lists/arrays manipulation (incl. loops)
pleeease Postprocess using pleeease
rtl Reverse from ltr to rtl
variables-output Export top-level variables to a JSON file
Читайте также:  Мини олень

Preprocessors

sass2less Import and convert Sass/SCSS files into your Less code (incl. variables, mixins and more)

Import Plugins

bower-resolve Import from a Bower package
glob Globbing support in Less imports
npm-import Import from npm packages
resolve-blocks Going up a tree to find specified component

Function Libraries

advanced-color-functions Functions to find more contrast colors
cubehelix A cubehelix function
lists Lists/arrays manipulation functions
urlencode URL Encode function
util A set of utility functions

Framework Importers

Bootstrap Bootstrap
Cardinal Cardinal
Flexbox Grid Flexbox Grid
Flexible Grid System Flexible Grid System
Ionic Ionic
Lesshat Lesshat
Skeleton Skeleton

Tip: try out the different Less tools available for your platform to see which one meets your needs.

This page focuses on GUI compilers. For command line usage and tools see Command Line Usage.

Cross platform

Crunch 2!

The editor and compiler for awesome people.

Crunch 2 is a cross-platform (Windows, Mac, and Linux) editor with integrated compiling. If you work with large Less projects, you should definitely try it out, as you only need the free version for Less files. Available at: https://getcrunch.co/.

SimpLESS

SimpLess is a minimalistic Less compiler. Just drag, drop and compile.

One of the unique features of SimpLess is that it supports ‘prefixing’ your CSS by using http://prefixr.com.. SimpLess is built on the Titanium platform. Get more info: http://wearekiss.com/simpless

Koala

Koala is a cross-platform GUI application for compiling less, sass and coffeescript.

Features: cross platform, compile error notification supports and compile options supports.

Prepros

Prepros is a tool to compile Less, Sass, Compass, Stylus, Jade and much more.

Specific platforms

Windows

WinLess

WinLess started out as a clone of Less.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.

CodeKit

CodeKit is the successor to LESS.app, and supports Less among many other preprocessing languages, such as SASS, Jade, Markdown, and many more.

LiveReload

CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work.

Linux

Plessc

Plessc is a gui fronted made with PyQT.

Auto compile, log viewer, open the less file with the editor chosen, settings for compile the file. Get more info: https://github.com/Mte90/Plessc

Edit the markdown source for "online-less-compilers"

less2css.org Online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile Less to CSS in real-time.
winless.org/online-less-compiler This Online Less Compiler can help you to learn Less. You can go through the examples below or try your own Less code.
lesstester.com Online compiler for Less CSS.
leafo.net/lessphp/editor lessphp live demo.
estFiddle Online Less compiler providing live demo for Less and est. Allowing users to switch among all versions of Less after 1.4.0 with optional est/Autoprefixer functionalities.
BeautifyTools Less Compiler Online Less compiler with optional formatting and minification at BeautifyTools

Online Web IDEs/Playgrounds with Less support

CSSDeck Labs CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code.
CodePen CodePen is a playground for the front end side of the web.
Fiddle Salad An online playground with an instantly ready coding environment.
JS Bin JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code.
jsFiddle Online Web Editor

Node.js Compilers

  • grunt-contrib-less
  • assemble-less: Full-featured Grunt.js plugin for compiling Less files to CSS, with additional options for maintaining libraries of Less components and themes. For advanced users, this plugin allows you to define and manage Less "packages" or "bundles" using JSON, Lo-dash(underscore) templates (e.g. ), and node-glob / minimatch (e.g. ‘../src/**/*.less" ). assemble-less also has a number of options including minifying CSS
  • gulp-less: Please note that this plugin discards source-map options, opting to instead using the gulp-sourcemaps library.
  • autoless: A Less files watcher, with dependency tracking (changes to imported files cause other files to be updated too) and growl notifications.
  • Connect Middleware for Less: Connect Middleware for Less compiling

Other Technologies

Wro4j Runner CLI Download the wro4j-runner.jar file and run the following command:

More details can be found here: Wro4j Runner CLI

CSS::LESSp

Windows Script Host

Note — the official Less node runs on windows, so we are not sure why you would use this.

dotless

Also see:

  • Lesscss (Runs less.js using Rhino, Nasshorn or node.js engine; 1.7.0 compliant)
  • Lesscss gradle plugin (Gradle plugin based on Lesscss)
  • Less Engine (Runs less.js in the Rhino JVM-based JavaScript interpreter)
  • Less CSS Compiler for Java (Runs less.js in the Rhino JVM-based JavaScript interpreter)
  • Less4j (Native Java implementation.)
  • JLessC (Less compiler written completely in Java)
  • lessphp
  • BW Less CSS (WordPress Plugin)
  • less.php
  • ILess
Читайте также:  Корм сухой royal canin urinary care

Python

  • Less.js In Go (Runs less.js inside embedded Javascript engine)

Know of another port that should be added to this list? Please let us know.

Less and these docs are maintained by the core Less team.

Documentation source code released under the MIT License, documentation under CC BY 3.0.

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS, а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?

Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS, придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS.

Компиляция LESS и VS Code

Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less. Как это работает?

  1. Создаем файл стилей c расширением .less
  2. После сохранения, автоматически сгенерируется .css файл в ту же папку.

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

Переменные LESS

Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"

Главная фишка — это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS. Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.

@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;

Теперь пишем обычный код, как мы это делали в CSS, но вместо значений подставляем переменные.

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

Миксины (mixin) в LESS

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

На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.

.button_font <
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
>

Примешиваем миксин в свойства селектора кнопки.

.portfolio__button <
padding: 15px 80px;
color: #344258;
.button_font;
>

На выходе получаем:

.portfolio__button <
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
>

Символ амперсанд

Вместо дублирования названия селектора, используем символ амперсанд.

Медиа-запросы в LESS

Можно записывать медиа-запросы прямо внутри селектора.

Заключение

Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS. Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Adblock detector