sass
Компас CSS3 Mixins
Поиск…
Вступление
Руководство по началу работы с использованием Compass Sass exention. Компас очень полезен при работе с CSS3, поскольку он предоставляет mixins для записи 1 строки, чтобы поддерживать каждый браузер с помощью функций CSS3. Также полезно включать спрайт-изображения.
Настройка среды
Откройте свою командную строку
Установка с использованием Ruby
gem update --system
gem install compass
Создать проект
compass create <myproject>
Это приведет к инициализации проекта компаса. Он добавит папку. Папка будет выглядеть следующим образом:
| Папка | описание |
|---|---|
| дерзость / | Поместите файлы sass / scss в эту папку |
| таблицы стилей / | В этой папке будут сохранены скомпилированные css |
| config.rb | Настройка компаса - например, путь к папке, компиляция sass |
Использовать компас
compass watch
Это будет скомпилировать ваши файлы sass каждый раз, когда вы их измените. Путь папки sass можно изменить внутри config.rb
Использование CSS3 с компасом
Вы можете найти полную ссылку, которая поддерживает CSS3-компоненты на этой странице
Чтобы использовать CSS3 в вашем проекте, Compass предоставляет mixins для поддержки функций CSS3 в каждом браузере. В верхней части вашего файла Sass / Scss вы должны указать, что хотите использовать компас
@import "compass/css3";
Граница радиуса
Включите радиус границы с компасом в ваш sass-файл:
div {
@include border-radius(4px);
}
Выход CSS
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Как вы можете видеть, вы можете использовать обычное имя CSS. Просто поставьте @include перед ним и используйте (), чтобы установить значение.
Пример Flexbox
.row {
@include display-flex;
@include flex-direction(row);
}
Выход CSS
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Заключение
Это всего лишь два примера. Компас обеспечивает гораздо больше CSS3-микшинов. Это очень удобно использовать Compass, и вам не нужно беспокоиться о том, что вы забыли определить компонент CSS3 для указанного браузера. Если браузер поддерживает функцию CSS3, компас определит ее для вас.