Приступаем к изучению Compass. А что такое?

Говоря официальным языком - это фреймворк для SASS. Если неофициальным - то библиотека (коллекция) готовых

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

Но вернемся к Compass - ведь это практически неотъемлемая часть SASS. И логично было бы продолжить изучение последнего, перейдя к Compass. Этот фреймворк, также как и сам SASS, является приложением, написанном на Ruby. Установка Compass производится точно также, как и SASS - с помощью менеджера пакетов gem.

Запускаем терминал Windows сочетанием клавиш Win+R и вводим в нем команду:

gem install compass

Если все прошло успешно, то вывод командной строки должен быть следующим:

Успешная установка Compass под Windows

Введем в терминале команду справки по этому фреймворку, чтобы получить полный список доступных команд (обратите внимание, что у ключей команды

1
compass
нет двойных дефисов, как у sass):

compass help

Самые нужные команды из этого списка:

  • 1
    
    watch
    - мониторинг scss-файлов (аналог этой команды в sass)
  • 1
    
    create
    - создать новый compass-проект
  • 1
    
    init
    - создать новый compass-проект из существующего css-проекта

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

compass create

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

Содержимое директории с Compass-проектом

Видим, что появились папки

1
stylesheets
,
1
sass
, файл
1
config.rb
. Все они созданы командой
1
compass
и являются заготовками для будущего проекта.

В папке

1
sass
находятся scss-файлы, в папке
1
stylesheets
- css-файлы, результат преобразования из scss. Файл
1
config.rb
- это конфигурация текущего проекта. Настройки минимальные и очень просты:

Файл настроек проекта Compass

Переменная

1
css_dir
со значением
1
stylesheets
- это “выходная” папка проекта, в которой хранятся css-файлы, сконвертированные из scss-файлов. Переменная
1
sass_dir
хранит имя директории, в которой находятся рабочие scss-файлы. Переменная
1
images_dir
- сюда складываются все изображения проекта. Ну и переменная
1
javascript_dir
- здесь лежат все js-скрипты.

Значения всех этих переменных можно изменить на свой вкус - кто как привык. Например,

1
images
на
1
img
,
1
javascript
на
1
js
,
1
stylesheets
на
1
styles
. Но при этом не забыть переименовать соответствующие папки в проекте.

Давайте откроем файл

1
screen.scss
и обратим внимание на одну строчку (она там действительно одна, не считая комментариев):

Compass с подключенным модулем Reset

Эта строка подключает в проект фреймворк Compass и один из его модулей - файл сброса CSS-стилей

1
reset
. Как известно, таких файлов существует несколько видов, но в данном случае используется самый популярный - от Эрика Мейера. Модуль
1
reset
подключается автоматически, при создании нового проекта. Но, помимо этого модуля, у Compass существуют еще несколько, которые нужно подключать аналогично, но вручную.

Теперь нам стоит отвлечься от терминала и перейти в браузер. Вводим в адресной строке http://compass-style.org/, чтобы попасть на домашнюю страницу проекта.

Все оставшееся время мы будем проводить там за увлекательным чтением документации. Переходим по ссылке reusable patterns, где размещены сами модули Compass. По своему функционалу они разбиты на три большие группы: “CSS3”, “Typography”, “Utilities”. К примеру, перейдем в раздел “CSS3”. Чтобы воспользоваться миксинами модуля “CSS3”, необходимо подключить этот модуль.

Делается это так:

Подключение модуля CSS3 фреймворка Compass

Ниже представлен список ссылок с миксинами, отсортированными по их функционалу. К примеру, “Border Radius” - это

1
mixin
для создания скругленных углов блоков. Аналогично, подключаем другой модуль (к примеру - “Typography”) и применяем на практике наработки других веб-дизайнеров.

Удобство использования фреймворка Compass и его миксинов я расписывать не буду - это и так ясно. И что касается применения каждого из миксинов в отдельности - также. На сайте они описаны подробно и с примерами. Пересказ всех их является пустой задачей. Просто учите английский, кто не знает.

На этом все.


Наконец-то у меня дошли руки и пришло время разобраться с палитрой “Символ” в Photoshop.

До сегодняшнего дня о ней знал не полностью. Конечно, с такими полями, как “Шрифт”, “Размер шрифта”, “Цвет шрифта”, “Межстрочное расстояние” я был знаком. Но вот столкнулся в одном из psd-макетов с неизвестным мне полем.

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

1
letter-spacing
.

Еще более загадочным для меня было значение этого поля:

1
-25
. То, что знак минуса означает “ужать” слова в строке, можно было догадаться. Но вот что за единицы измерения применяет Photoshop в данном случае? Как мне перевести это значение в CSS? В каких единицах - пикселях или em?

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

Итак, есть psd-макет, на котором для шрифтов применено загадочное значение

1
-25
в таком же, не менее загадочном, поле:

Letter-spacing в Photoshop

Смотрим внимательно на панельку “Символ”. Здесь собраны воедино все свойства, отвечающие за прорисовку шрифта на макете.

Верхние два поля - “Georgia” и “Regular”. Здесь все просто и понятно - семейство шрифта и его начертание. В CSS данные значения оформляются через правила

1
font-family
и
1
font-weight
.

Второй ряд из двух полей, со значениями

1
22px
и
1
24px
. Думаю, здесь также не должно возникнуть вопросов.
1
22px
- размер шрифта,
1
24px
- интерлиньяж, межстрочное расстояние. За первое свойство в CSS отвечает правило
1
font-size
, за второе -
1
line-height
.

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

В CSS имеется аналогичное правило, которое называется

1
letter-spacing
. Не стоит путать его с очень похожим правилом
1
word-spacing
. Разница между ними очевидна, хотя сфера применения одинакова - строка текста.
1
Word-spacing
задает расстояние между словами, а
1
letter-spacing
- расстояние между буквами.

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

1
-25
. О том, как перевести его в CSS, расскажу немного позже. А пока кратко пробежимся по остальным строкам палитры “Символ”.

В четвертом ряду располагаются два поля, назначение которых в оригинале пишется так: “Vertical scalar tool” и “Horizontal scalar tool”. Можно догадаться, что с помощью этих настроек можно масштабировать (растягивать или сжимать) буквы как по-вертикали, так и по-горизонтали.

В последнем (пятом) ряду находится поле изменения расстояния для индексов, и поле цвета шрифта (букв).

Вот, в принципе, и все описание. Краткое - но к чему растягивать его? Полное описание с картинками, полезное для себя, нашел в этой статье.

Перейду к вопросу, который остался открыт - как преобразовать значение

1
letter-spacing
в Photoshop в аналогичное правило CSS?

Что за единицы измерения использует Photoshop в данном случае, честно сказать, не знаю. Какие-то загадочные, свои собственные, наверное. Но это и не интересно, если что. Нужно лишь перевести их в одну из двух наиболее популярных единиц измерения CSS -

1
px
или
1
em
.

Перевод осуществляется с помощью формул. Эти формулы были выведены опытным путем автором статьи - Justin Marsan. На своей собственной практике я пару раз проверил их и пришел к выводу, что они верны.

Формула перевода значения

1
letter-spacing
Photoshop в
1
em
:

X / 1000

где

1
X
- это значение
1
letter-spacing
в Photoshop. В конкретном случае оно будет равно:

-25 / 1000 = -0.025em

Формула перевода значения

1
letter-spacing
Photoshop в пиксели
1
px
:

X * Y / 1000

где

1
X
- это значение
1
letter-spacing
в Photoshop,
1
Y
- размер шрифта там же. То есть, сначала значение межбуквенного расстояния умножается на размер шрифта, а затем полученное значение делиться на 1000.

В конкретном случае формула и результат будет следующим:

-25 * 22 / 1000 = -0.55px

На этом, думаю, что все сказано.


В предыдущей части данного обзора - “SASS в картинках - Часть 1” мы посвятили все время установке, настройке и примерам мониторинга “сладкой” парочки Ruby/SASS.

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

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

Переменные (Variables)

SASS “вводит” в состав CSS переменные, которых изначально в нем нет. Тем самым, язык стилевых правил постепенно превращается в более-менее полноценный язык программирования. Как и в обычном языке программирования, сначала объявляется переменная (с помощью спецсимвола

1
$
), задается ее имя и присваивается значение.

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

Например, на рисунке ниже переменной

1
$color
присвоено значение цвета в HEX-формате. Далее в одном месте кода эта переменная применяется “как есть”, а в другом месте из значения переменной вычитается еще одно число в этом же формате. В результате цвет получается темнее на заданное количество - очень удобно и быстро!

Переменные в SASS

Вложенность (Nesting)

Тут все просто - как вы обычно пишите правила CSS?

Наверное, так:

h1 {
  font-size: 12px;
  color: #ccc;
}

h1 a {
  text-decoration: none;
  color: #ddd;
}

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

Теперь напишем этот же код на SASS (SCSS):

h1 {
  font-size: 12px;
  color: #ccc;

  a {
    text-decoration: none;
    color: #ddd;
  }
}

Вот в чем “фокус” - на SASS (SCSS) мы пишем код так, как видим. Смотрим HTML-код - ссылка вложена в тег

1
h1
. Поэтому, в SASS-коде так и “рисуем” - внутри селектора
1
h1
помещаем селектор
1
a
, говоря тем самым SASS, что тег
1
a
вложен в тег
1
h1
. После конвертации в CSS-код у нас получиться точно такой код, как в первом примере (где представлен CSS-код):

Вложенность селекторов в SASS

В SASS вложенность (

1
nesting
) бывает двух типов: вложенность селекторов (рассмотренная выше) и вложенность свойств, которую мы рассмотрим сейчас.

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

1
font
.

Например, на CSS мы бы написали так:

h1{
  font-size: 30px;
  font-style: italic;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #ccc;
  padding-left: 10px;
}

На SASS (SCSS) этот же код мы напишем так:

h1{

  font: {
    size: 30px;
    style: italic;
    weight: bold;
    family: Arial, sans-serif;
  }

  color: #ccc;
  padding-left: 10px;
}

Вложенность свойств на SASS

Наследование

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

Наследование в SASS (SCSS) выполняется с помощью директивы

1
@extend
.

h1{
  font: {
    size: 30px;
    style: italic;
    weight: bold;
    family: Arial, sans-serif;
  }

  color: #ccc;
  padding-left: 10px;
}

h2{
  @extend h1;
  color: #aaa;
}

Наследование в SASS

Parent

Не знаю, как переводиться данная фича в SASS, но в примере кода она очень понятна - может, и нет смысла искать ее перевод? Если кто изучал Javascript & jQuery, то знает о таком символе -

1
&
. Его можно перевести как “этот”.

Давайте посмотрим код, и все сразу станет ясно:

SASS Parent

Видим, что в коде для ссылки прописаны свойства. И в этом же правиле прописано правило для

1
hover
. Так вот, чтобы не писать конструкции типа
1
a
,
1
a:hover
- запишем
1
a
,
1
&:hover
. Если описать это простым языком, то “этому же элементу присвоить правило при псевдоклассе
1
:hover
.

Функции SASS

Когда мы рассматривали переменные, то упомянули об арифметических операциях над значением переменных. Иногда это удобно, а иногда нет. В SASS имеется достаточно большой набор функций, предназначенных для самых разнообразных задач. Ознакомиться с их полным перечнем можно по адресу sass-lang.com/docs/yardoc/Sass/Script/Functions.html:

Функции SASS

К примеру, у нас в коде имеется правило задания цвета для ссылки. А также есть правило, по которому ссылка изменяет цвет по наведению на нее курсора мыши.

На SASS (SCSS) такой код можно написать так:

a{
  color: #ddd;
}

a:hover{
  color: darken(#ddd, 30%);
}

То есть, берем функцию

1
darken()
и передаем ей в качестве аргументов два значения - первоначальный цвет и величину в процентах, на которую необходимо затемнить цвет.

Ну просто очень удобно и быстро!

Функция затемнения цвета в SASS

Подмешивания (Mixin)

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

Если сказать простым языком, то

1
mixin
- это большой кусок CSS-кода, который можно применять бесконечное число раз. Так же как и переменные,
1
mixin
сначала объявляется с помощью директивы
1
@mixin
и задается имя для него. Затем в теле подмешивания прописываются CSS-правила, при этом одновременно можно использовать переменные в этих правилах.

После объявления

1
mixin
его подключают в нужном месте кода с помощью директивы
1
@include
. Удобство применения подмешиваний заключается в том, что не нужно каждый раз писать один и тот же код в разных местах.

Достаточно прописать всего одну строчку - “вставить такой кусок кода здесь”:

Подмешивания в SASS

Интерполяция (Interpolation)

Под таким непонятным первоначально словом подразумевается подстановка значения переменной в название CSS-свойства. Благодаря этому можно легко изменять само свойство в функции.

Например, таким образом:

Интерполяция в SASS

(На картинке закралась ошибка. Конечно же, переменной

1
$top
в названии свойства
1
border
не существует. На ее месте должна стоять переменная
1
$vert
).

Подмешивания (
1
mixin
) с аргументами

Ранее мы познакомились с функциями без аргументов (

1
mixin
). Но это был простой пример. На самом деле, функции (
1
mixin
) в SASS могут иметь аргументы, которые они принимают в качестве параметров.

Например, рассмотрим такой рисунок:

Функции с аргументами в SASS

Видим, что в начале кода объявлена функция (

1
mixin
) с именем
1
corners
. В качестве аргументов она принимает три переменные -
1
$vert
,
1
$hor
,
1
$radius
. Значения переменных
1
$vert
и
1
$hor
передаются в тело функции как интерполяция, а значение переменной
1
$radius
подставляется в качестве значения CSS-свойства
1
border
.

В результате можно очень легко и быстро изменять вид и значение CSS-свойства:

1
border-top-left: 8px
,
1
border-bottom-left: 8px
,
1
border-top-right: 8px
,
1
border-top-right: 8px
и так далее.

Далее в коде подключается (вызывается) функция

1
corners
с помощью директивы
1
@include
. При вызове этой функции ей передаются аргументы:

@include corners(top,left,15px);
@include corners(bottom,right,35px);

В результате обработки этих аргументов функцией corners получиться следующий CSS-код:

border-top-left: 15px;
border-bottom-right: 35px;

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

Вроде ничего не забыл ))


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

Вы спросите - а зачем он нужен и что это за “зверь” такой? Ведь в багаже знаний верстальщика и так полно вещей, которые он должен знать. Это и HTML&CSS, и Javascript с jQuery, и основы PHP с системами управления контентом (CMS) WordPress, Joomla, Drupal. Помимо этого - знание основ Photoshop (не сможете нарезать psd-макет). И еще куча всего по мелочи. Так зачем усложнять себе жизнь еще чем-то?

И будете неправы. В данном случае - это не усложнение, а облегчение “тяжелой” жизни верстальщика. Достаточно потратить пару дней на изучение SASS, чтобы потом верстать страницы быстрее и семантически более правильно. Ну хорошо, скажете вы - уговорил. Так что же это за такая прекрасная вещь, SASS?

SASS - это надстройка над CSS, написанная на языке программирования Ruby (есть такой). Правильно такая надстройка называется препроцессором. SASS добавляет в CSS такие вещи, как переменные, функции и многое другое. Тем самым, описательный язык CSS превращается в более-менее полноценный язык программирования. Часто ли вы при написании CSS-кода повторяете один и тот же код?

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

Существует аналог SASS по имени LESS. Отличие в том, что LESS моложе, проще и не имеет такой мощной библиотеки-фреймворка Compass, какую имеет SASS.

Стоит также сказать, что существую две версии SASS - собственно SASS и SCSS. Первый - это старая версия синтаксиса, которая только отдаленно напоминает CSS. В нем построение кода выполняется с помощью табуляции размером в два пробела.

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

Пример такого кода показан ниже:

table.hl
  margin: 2em 0
  td.ln
    text-align: right

Более новая версия - SCSS (SASS-подобный CSS) имеет синтаксис почти такой же, как и у CSS. Поэтому особо рассказывать тут нечего, лучше посмотреть на пример кода:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Прежде чем начинать изучение SASS, его необходимо установить. В этой статье все время будет посвящено установке и настройке последнего. А во второй части уже будет самое интересное - показ и рассказ того, что может и что умеет SASS.

Установка SASS разделена на два этапа. Первый - необходимо установить поддержку языка Ruby в операционной системе, так как SASS - это всего лишь одно из многих приложений, написанное на этом языке. Больше всего в этом плане повезло пользователям MacOS X - там поддержка Ruby предустановлена по-умолчанию. Для пользователей Linux OS нужно только немного напрячься - установить эту поддержку с помощью менеджера пакетов. Например, для систем Debian* эта команда будет выглядеть так:

apt-get install ruby

Пользователи же Windows как всегда “впереди планеты всей”. Придется находить и скачивать вручную пакет-инсталлятор Ruby. Для этого переходим по адресу rubyinstaller.org/downloads/, выбираем из списка самую свежую версию пакета (на момент написания это Ruby 2.0.0-p247) и скачиваем ее:

Пакет Ruby-инсталлятора для Windows

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

Установка Ruby под Windows

Необходимо поставить галочки так, как это показано на рисунке, иначе Ruby и его приложение SASS не запустятся в терминале. Стоит сразу оговориться, что ни сам Ruby, ни программа SASS не имеют графического интерфейса. Управление обоими программными продуктами осуществляется через командную строку.

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

1
.rb
и
1
.rdw
к Ruby.

После того, как установлен Ruby, настало время SASS. Здесь ситуация проще, так как Ruby имеет свой собственный менеджер пакетов a-la системы Linux OS. Менеджер пакетов имеет название

1
gem
. Чтобы установить приложение SASS, достаточно иметь подключение к Интернет и запустить в терминале Windows следующую команду:

Установка SASS под Windows

Если все прошло успешно, то вывод в терминале должен быть таким:

Успешная установка SASS под Windows

Для самоуспокоения и ознакомления с командами приложения SASS можно набрать в терминале:

sass --help

Должен появиться список всех команд программы SASS. Это подтверждает факт, что установка прошла успешно. Теперь немного отвлечемся от темы и углубимся в сторону HTML. Как хорошо известно, подключение таблиц со стилями в HTML-странице производится по следующему типу:

Подключение стилевых таблиц в HTML

Браузеры понимают только файлы с расширением .css и кодом, созданным в синтаксисе CSS. Однако, мы уже выяснили, что SASS имеет свой собственный синтаксис и файлы создает с расширением .scss. Как быть в такой ситуации? Все очень просто - программа SASS может конвертировать свои собственные файлы в файлы формата CSS, а также сохранять их с расширением .css. Поэтому то, что создается в SASS можно считать промежуточным результатом.

Приложение SASS умеет выполнять мониторинг редактируемого sass-файла в автоматическом режиме, для этого достаточно указать ей входной (input) и выходной (output) файлы. К примеру, такая команда может выглядеть следующим образом:

Запуск мониторинга sass-файла

Если sass-файлов несколько и расположены они в одной директории, то можно запустить мониторинг все этой директории следующим образом:

sass --watch input_directory:output_directory

Из рисунка видно, что программа в автоматическом режиме производит анализ всех изменений в sass-файле и записывает их в выходной css-файл. При этом фиксируются все изменения, в том числе и ошибки:

Фиксирование всех событий в sass-файле

При этом, если взглянуть на содержимое директории, к которой расположен проект, то увидим, что там, помимо sass-файла, располагается и css-файл (результат работы):

Содержимое директории с проектом

Кроме того, из подсказки командной строки видно, что процесс мониторинга можно прервать в любой момент, нажав сочетание клавиш Ctrl+C. Программа настроена с умом и случайно (по ошибке) остановить ее не получиться - она попросит подтверждения выбранного действия путем ввода буковки

1
Y
(Yes) и нажатия клавиши Enter.

Помимо конвертации sass-файлов с css-файлы, в SASS имеется встроенная возможность обратного процесса. Осуществляется она с помощью утилиты

1
sass-convert
. Синтаксис такой команды может быть таким:

sass-convert --from css --to sass -R .

Такая команда рекурсивно (ключ

1
-R
) сконвертирует все css-файлы в sass-файлы, расположенные в текущей (точка здесь не зря стоит!) директории.

В принципе, все что нужно сказать об установке Ruby/SASS, о том как прекрасен и хорошо SASS - уже сказано. В следующей статье будет рассмотрено на примерах, на что же действительно способен SASS.

На этом все.


Для веб-разработчика, и для верстальщика в частности, первые вещи, которые он обязан знать, это языки HTML, CSS, Javascript с библиотекой jQuery.

Желательно знание основ PHP, популярных CMS - WordPress, Joomla, Drupal. Обязательно знание основ работы в Photoshop, иначе просто не сможет верстальщик работать.

Но причем здесь командная строка Windows, скажете вы? Это системному администратору в его ремесле она необходима, чтобы создавать

1
bat
-файлы, через терминал управлять удаленными соединениями, создавать и настраивать локальные сети. Для чего же она нужна человеку, который работает с веб-приложениями?

Оказывается, нужна. Не вся ее мощь, не все ее DOS-команды - только самые распространенные и необходимые. А нужна при работе с препроцессорами CSS, такими как SASS или LESS.

Насчет LESS - это можно еще поспорить, а вот для SASS она понадобиться однозначно. Установка препроцессора SASS производиться через командную строку; процесс мониторинга также запускается через командную оболочку.

Так что давайте подтянем свои знания в этой области на тот уровень, который необходим. Ниже приведено краткое описание с примерами всех тех команд, которые могут потребоваться. Некоторые читатели могут сказать - а зачем плодить еще одну статью по командной строке Windows?

В Интернете и так таких статей пруд пруди! На это могу сказать одно - этот сайт является моей записной книжкой. И здесь я выкладываю записи по принципу: “чтобы не забыть”, “описать задачу и ее выполнение самому, чтобы лучше понять”. Ну, лирика закончена, приступаем к делу.

Горячие клавиши командной оболочки

  • Win+R - быстрый запуск командной оболочки;
  • Alt+Space - меню настройки командной строки;
  • F7 - показ списка введенных команд в оболочке;

1
cmd /f:on
- включение перебора директорий по сочетанию Ctrl+D и перебора файлов по сочетанию Ctrl+F; (очень полезное свойство - благодаря ему не нужно вручную писать имя каталога, куда необходимо попасть, достаточно найти его методом перебора).

Создание папок

  • 1
    
    mkdir sass
    - создание новой папки sass в корне текущего диска;
  • 1
    
    md sass
    - аналогично предыдущей (укороченный вариант);
  • 1
    
    md sass\verstka
    - создание вложенных директорий;
  • 1
    
    md F:verstka\revoltz
    - создание директорий в указанном диске;

Просмотр содержимого каталогов

  • 1
    
    tree
    - показ дерева каталогов;
  • 1
    
    tree /f
    - показ дерева каталогов с их содержимым;
  • 1
    
    tree F:sass
    - показ “куска” дерева каталогов, начиная с указанного места;
  • 1
    
    dir
    - просмотр содержимого текущего диска (каталога) в виде списка;
  • 1
    
    dir F:
    - просмотр содержимого диска
    1
    
    F:
  • 1
    
    dir /p F:
    - постраничный вывод содержимого диска
    1
    
    F:
  • 1
    
    type test.txt
    - просмотр содержимого файла (расширение файла указывать обязательно);

Перемещение по каталогам и дискам

  • 1
    
    cd /d F:
    - переход в корень диска
    1
    
    F:
    (для меня, как бывшего линуксоида, странное и неудобное нагромождение с ключом)
  • 1
    
    cd ..
    - перейти на уровень вверх;
  • 1
    
    cd Folder\Folder2\Folder3
    - перейти в папку
    1
    
    Folder3
    ;

Удаление файлов и каталогов

  • 1
    
    del test.txt
    - удалить файл (расширение файла указывать обязательно);
  • 1
    
    rmdir folder3
    - удалить папку (директорию);

Копирование и перемещение

  • 1
    
    copy text.txt Folder\Folder2\Folder3
    - скопировать файл в директорию
    1
    
    Folder3
    ;
  • 1
    
    move text.txt Folder\Folder2\Folder3
    - переместить файл в директорию
    1
    
    Folder3
    ;

Разное

  • 1
    
    cls
    - очистка экрана ввода;

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

Затем перейти в свойства - окно с четырьмя вкладками.

Первую - “Options” - можно пропустить, там ничего особо интересного нет.

Вторая вкладка - “Font” - для настройки шрифтов. Лучше всего поставить шрифт “Lucida Console” и кегль 12:

Шрифты терминала Windows

Третья вкладка - “Layout” - для настройки размеров окна. Наиболее удобные размеры приведены на рисунке:

Размеры окна терминала Windows

Четвертая вкладка - “Colors” - для настройки цветов фона, текста. Всплывающее окно (появляется по нажатию клавиши F7) также настраивается с помощью фонового цвета и цвета текста - но кто его использует? (можно оставить “как есть”):

Цвета терминала Windows

Конечно, все настройки индивидуальны. Как говориться, на вкус и цвет все фломастеры разные. Поэтому рисунок ниже - примерный вид того, каким может быть настроенный терминал Windows:

Вид терминала Windows

На этом все.