Синтаксически удивительные таблицы стилей: использование компаса в Sass

В нашем последнем посте мы уже упоминали Компас, Согласно официальному сайту, он описан как CSS Authoring Framework с открытым исходным кодом.

Короче говоря, Compass является расширением Sass и, как МЕНЬШЕ Элемент из МЕНЬШЕ, он имеет кучу готовых к использованию CSS3 Mixins, за исключением того, что он также добавил несколько других вещей, которые делают его более мощным сопутствующим инструментом для пререкаться, Давайте проверим это.

Установка Компаса

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Без них вам нужно сделать это «вручную» через терминал / командную строку. Для этого введите следующую командную строку;

На Mac / Linux Terminal

sudo gem установить компас

В командной строке Windows

драгоценный камень установить компас

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

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

компас иници

Дальнейшее чтение: Документация командной строки компаса

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

Если вы запустили эту команду compass init, теперь у вас должен быть файл с именем config.rb в вашем рабочем каталоге. Этот файл используется для настройки вывода проекта. Например, мы можем изменить наши предпочтительные имена каталогов.

http_path = “/”
css_dir = “css”
sass_dir = “scss”
images_dir = “img”
javascripts_dir = “JS”

Уберите строку комментария, сгенерированную Compass; мы устанавливаем значение true, если нам нужно, чтобы комментарии были напечатаны, или значение false, если это не нужно.

line_comments = false

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

output_style =: расширенный

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

Наконец, нам нужно наблюдать за каждым файлом в каталоге с помощью этой командной строки;

компас смотреть

Эта командная строка, как и в Sass, будет отслеживать каждое изменение файла и создавать или обновлять соответствующие CSS-файлы. Но помните, запустите эту строку после того, как вы закончили настройку проекта в config.rb, иначе он просто проигнорирует изменения в файле.

CSS3 Mixins

Прежде чем перейти к CSS3, в нашем основном файле .scss нам нужно импортировать Compass со следующей строкой @import “compass”; это импортирует все расширения в Compass. Но если нам нужен только CSS3, мы можем сделать это более конкретно с помощью этой строки @import “compass / css3”.

Дальнейшее чтение: Компас CSS3,

Теперь давайте начнем создавать что-то с Saas и Compass. В документе HTML, если вы его создали, мы добавим следующую простую разметку:

Идея также проста; мы создадим повернутый прямоугольник с закругленными углами, а ниже – наши вложенные стили Sass для начинающих;

тело {
цвет фона: # f3f3f3;
}
раздел {
ширина: 500 пикселей;
поле: 50px авто 0;
div {
ширина: 250 пикселей;
высота: 250 пикселей;
цвет фона: #ccc;
поле: 0 авто;
}
}

И чтобы получить наш прямоугольник с закругленными углами, мы можем включить Compass CSS3 Mixins следующим образом;

тело {
цвет фона: # f3f3f3;
}
раздел {
ширина: 500 пикселей;
поле: 50px авто 0;
div {
ширина: 250 пикселей;
высота: 250 пикселей;
цвет фона: #ccc;
поле: 0 авто;
@include border-radius;
}
}

Этот Mixins с радиусом границы будет генерировать все префиксы браузера, и по умолчанию радиус угла будет 5px. Но мы также можем указать нужный нам радиус следующим образом: @include border-radius (10px);
}.

раздел div {
ширина: 250 пикселей;
высота: 250 пикселей;
цвет фона: #ccc;
поле: 0 авто;
-webkit-border-radius: 10 пикселей;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
радиус границы: 10 пикселей;
}

Далее по плану мы тоже будем вращать коробку. Это действительно легко сделать с Compass, все, что нам нужно сделать, это просто вызвать метод преобразования, вот так;

тело {
цвет фона: # f3f3f3;
}
раздел {
ширина: 500 пикселей;
поле: 50px авто 0;
div {
ширина: 250 пикселей;
высота: 250 пикселей;
цвет фона: #ccc;
поле: 0 авто;
@include border-radius (10px);
@include rotate;
}
}

Этот Mixins также сгенерирует эти утомительные префиксы вендоров, и поворот по умолчанию займет 45 градусов. Смотрите сгенерированный CSS ниже.

раздел div {
ширина: 250 пикселей;
высота: 250 пикселей;
цвет фона: #ccc;
поле: 0 авто;
-webkit-border-radius: 10 пикселей;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
радиус границы: 10 пикселей;
-webkit-transform: повернуть (45 градусов);
-moz-transform: повернуть (45 градусов);
-ms-преобразование: поворот (45 градусов);
-опреобразование: поворот (45 градусов);
преобразование: вращение (45 градусов);
}

Компас Помощники

Одна из самых мощных функций Compass – это Помощники, Согласно официальному сайту, компас помощники являются функциями, которые увеличивают функции, предоставляемые Sass, Хорошо, давайте посмотрим на следующие примеры, чтобы получить ясную картину.

Добавление файлов @ Font-faceВ этом примере мы собираемся добавить пользовательское семейство шрифтов с правилом @ font-face. В простом CSS3 код может выглядеть примерно так, как показано ниже, состоящий из четырех различных типов шрифтов, и это также трудно запомнить для некоторых людей.

@ font-face {
семейство шрифтов: “MyFont”;
формат src: url (‘/ fonts / font.ttf’) (‘trueetype’),
формат url (‘/ fonts / font.otf’) (‘opentype’),
формат url (‘/ fonts / font.woff’) (‘woff’),
формат url (‘/ fonts / font.eot’) (’embedded-opentype’);
}

С Compass мы можем сделать то же самое легче с font-files () Помощники;

@include font-face (“MyFont”, font-files (“font.ttf”, “font.otf”, “font.woff”, “font.eot”));

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

Однако, если мы внимательно посмотрим на код, вы увидите, что мы не добавили путь к шрифту (/ fonts /). Итак, как Compass узнал, где расположены шрифты? Ну, не путайте, этот путь на самом деле происходит из config.rb со свойством fonts_path;

fonts_dir = “шрифты”

Итак, допустим, мы изменили его на fonts_dir = “myfonts”, тогда сгенерированный код будет url (‘/ myfonts / font.ttf’). По умолчанию, когда мы не указываем путь, Compass будет направлять его в таблицы стилей / шрифты.
Добавление изображения
Давайте создадим еще один пример, на этот раз мы будем добавлять изображение. Добавление изображений через CSS – обычное дело. Обычно мы делаем это, используя свойство background-image, вот так;

div {
background-image: url (‘/ img / the-image.png’);
}

В Compass вместо использования функции url () мы можем заменить ее на image-url () Помощники и подобно добавлению @ font-face выше, мы можем полностью игнорировать путь и позволить Compass обрабатывать все остальное.

Этот код также будет генерировать точно такое же объявление CSS, как и в первом фрагменте.

div {
background-image: image-url (the-image.png);
}

Кроме того, Компас также имеет Помощники по размерам изображения, он в первую очередь определяет ширину и высоту изображения, поэтому, если нам нужно, чтобы они оба были указаны в нашем CSS, мы можем добавить еще две строки, как показано ниже;

div {
background-image: image-url (“images.png”);
width: image-width (“images.png”);
height: image-height (“images.png”);
}

Вывод станет примерно таким;

div {
background-image: url (‘/ img / images.png? 1344774650’);
ширина: 80 пикселей;
высота: 80 пикселей;
}

Дальнейшее чтение: Компас вспомогательные функции

Последняя мысль

Хорошо, сегодня мы много говорили о Compass, и, как вы видите, это действительно мощный инструмент, который позволяет нам писать CSS более элегантным способом.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *