Основанный на CSS фреймворк, такой как SCSS (Адаптивный дизайн) - PullRequest
2 голосов
/ 02 октября 2011

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

Я искал возможность использовать такую ​​среду, как SCSS (http://sass -lang.com /), которая улучшила бы мои усилия по поддержке кода.У меня будет много CSS-файлов (и, возможно, также скинов). Так как я использую адаптивный макет, я собираюсь использовать CSS Media Queries для CSS на десктопах / планшетах / мобильных устройствах.Я не мог понять, насколько хорошо SCSS будет интегрироваться с медиа-запросами и в целом, какую гибкость он мне предоставит.

Пожалуйста, дайте мне знать ваши предложения, если вы использовали SASS / SCSS и вообще, любые другие предложения.

Ответы [ 3 ]

2 голосов
/ 03 октября 2011

SCSS по сути является расширением CSS и полезен (с миксинами), чтобы избежать повторения в вашем коде.Он также предоставляет способ группировать блоки CSS семантически значимыми способами и дает вам переменные, чтобы избежать повторения.

Если вы используете фреймворк, такой как Rails, это не сложно.

Существуют также фреймворки, ориентированные на макет, такие как 960 (и его варианты), и Blueprint, который также добавляет код для таких вещей, как кнопки.

Основная философия, лежащая в основе многих из них, - это СУХОЙ (не повторяйте себя)).Одним из преимуществ использования устоявшейся среды является то, что многие проблемы с браузером были устранены, поэтому вы можете быть уверены, что он будет работать в кросс-браузерном режиме.

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

Лично я возражал против использования платформ вПрошлое из-за небольшого количества дополнительного избыточного кода, но после 15 лет взлома проблем с браузером, теперь я думаю, что это хорошая вещь.

Ларри Уолл сказал в Программировании на Perl: «Мы будем поощрять вас развивать три великих достоинства программиста: лень, нетерпение и высокомерие».

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

Разработка сайта с медиа-запросами все еще немного лидирует.В каждом подходе есть компромиссы, и вы должны прочитать как можно больше, прежде чем выбрать один.Adapt.js - хорошая альтернатива, если вы не возражаете против javascript.

Возможно, вы захотите взглянуть на HTML5 Boilerplate.Здесь есть несколько полезных настроек по умолчанию и множество документации о выбранных по умолчанию настройках HTML и CSS.

Удачи!

0 голосов
/ 27 октября 2011

Посмотрите на 320 + Susy ( GitHub репо здесь ).Он использует Susy расширение сетки для Compass .Все эти инструменты основаны на Sass и используют медиазапросы.

0 голосов
/ 03 октября 2011

Я не использовал медиазапросы вместе с SCSS, но я не думаю, что они конфликтуют друг с другом. Я широко использовал SCSS в своих текущих приложениях rails, и это помогло мне сократить объем кода и лучше понять, когда использовать какие стили.

Сложная часть будет о том, что иметь жидкость (меняется в зависимости от размера области просмотра медиа) и как избежать повторения.

Взгляните на красивый сайт Адаптивный дизайн с помощью CSS3 Media Queries , чтобы понять, какие части вашего макета могут быть плавными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...