Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
А также:
Css конвертер в sass
Конвертируем CSS в SASS/SCSS/LESS
Недавно я писал, как установить SASS/SCSS препроцессор на Drupal: Устанавливаем SASS / SCSS препроцессор на Drupal 7
Должен заметить, что SCSS штука очень удобная, и сразу возникает вопрос, как конвертировать свои старые проекты на SCSS рельсы. Ответ нашелся сразу — парочка онлайн конверторов.
Первый — Least. Умеет конвертировать CSS в LESS/SASS и Stylus. Есть настройки для разделителей (два пробела, четыре пробела, табуляция).
Вот пример его работы:
Второй конвертор — css2sass. Умеет конвертировать CSS в SCSS или SASS. Настроек у него нет и как мы видем на скрине он не вырезает комментарии. Возможно это кому-то важно. В качестве разделителей использует двойной пробел. Вот так выглядит пример его работы:
Что важно, данный конвертор ищет ошибки в CSS и не конвертирует в SCSS/SASS, пока вы их не исправите.
Дальше рассмотрим css2less конвертор. Конвертор примечателен тем, что сортирует по алфавиту и по важности селекторы. А так же делает более сложную вложенную структуру. LESS, конечно, немного отличается от SCSS, но в общих чертах данный конвертор подходит и к нему.
Что касается сложности кода, то, например, такой код
- #block-multiblock > .block-inner > .content > ul > li {
- #block-multiblock > .block-inner > .content > ul > li > ul {
- #block-multiblock > .block-inner > .content > ul > li > a {
- #block-multiblock > .block-inner > .content > ul > li > a + ul.menu li {
- list-style:disc inside none;
Данным конвертором будет преобразован в
- list-style:disc inside none;
Least сконвертирует его точно так же, а вот css2sass сделает иначе и, если честно, мне так нравится больше. Код компактнее и легче читается. Хотя для модификации родительских элементов придется его немного модифицировать, но это уже мелочи, которые могут и не понадобиться!
- #block-multiblock > .block-inner > .content > ul > li {
- list-style: disc inside none;
Если кто-нибудь знает другие конверторы, напишите, пожалуйста их в комментарии :-)
Из CSS в SASS, LESS и SCSS
SASS LESS SCSS
Готовый код SASS, LESS или SCSS
- Копируем css код в верхнее поле.
- Выбираем какой код должен получится на выходе SASS, LESS или SCSS.
- Нажимаем кнопку В Less,sass,scss.
- Получившийся код из поля внизу копируем в буфер.
Sass это решение проблем css при разработки такие как.
- Упорядоченность.
- Четкая структура.
- Отсутствие связи между блоками.
sass добавляет элемент программирования в css, где появятся переменные, наследование, аргументы и миксины.
Преимущества sass.
- Чистый код.
- Нет повторений.
- Время разработку уменьшается.
Все о настройке препроцессора sass смотрим тут.
Чтобы начать работать с препроцессором sass потребуется
Писать код sass в файле main.sass, который будет автоматически компилироваться в css.
CSS2SCSS.COM
If you ever worked with something like SCSS, LESS or any other CSS preprocessor, you don't want to go back to plain old CSS. Working with SCSS is just a joy, especially when you start realizing that copying styled elements is much easier, that variables are making your life much more fun when the customer wants to change the colours once again and much more.
That's why we don't want to go back to CSS too, but like lots of people, we have to work with old code from the days before CSS preprocessors and they just aren't as much fun, especially if you know how good things can be. This is where CSS2SCSS.COM jumps in. It won't create perfect SCSS code, but it gives you a good start by created a properly nested SCSS file based on your existing CSS file!
Want to help? The library powering this site is open-source, checkout its github site if you want to contribute: https://github.com/ortic/css2scss
Преобразование CSS в SASS (или МЕНЬШЕ)
Это сообщение нуждается в следующих 2 онлайн-инструменты, перечисленные для будущих зрителей.
Во-первых, я бы всегда запускать CSS через этот интерактивный инструмент для преобразования его в уборщик сокращенная CSS http://shrthnd.volume7.io/ - не объяснение необходимости действительно, просто делает все чище и меньше, если вы не в привычку писать свой CSS так же уже.
Затем, используя этот онлайн-инструмент http://sebastianpontow.de/css2compass/ -Это действительно хороший инструмент для создания scss-файлов из вашего css. Он преобразует все цвета в ваш предпочтительный формат, задает цветовые переменные и переменные шрифта, и в целом даст вам представление об основах sass, просто посмотрев, что он сделал с вашим css.
Единственное, что я заметил как не столь желательный во втором инструменте, это то, что он называет семейства шрифтов следующим образом: $font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial; и так далее. Я всегда нахожу более понятным назвать их в краткой форме фактического шрифта или настраивать имена 3-5, которые относятся к контенту, например $font_main, $font_sub, $font_callout, $font_titles, или же вы предпочитаете. Но это 30-секундное исправление, когда вы вставляете все это обратно в свой новый scss-файл :)
