Поиск по сайту

Результаты поиска по тегам 'sass'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 23 результата

  1. 1. Как принято сдавать верстку, если пользуешься, например, pug и sass? До их появления я предоставляла html, css и т.п. Сейчас осваиваю инструменты, но из-за компиляции непонятно, какие файлы теперь отправляют клиенту? 2. В каком виде готовую верстку закачивают на сервер? Например, сайт без CMS: просто готовые html+css+js? Но тогда их менее удобно править при необходимости. Или на сервер как-то компилятор ставят? А если натягивать на CMS, то тогда как быть? Чувствую, для большинства участников форума это очевидные вещи. Подскажите, как хотя бы называется эта тема, чтобы погуглить. Всё, что находила сама — не по теме.
  2. Ошибка в sass - Autoprefixer: Missed semicolon

    Всем привет! Такая ошибка - при сохранение стилей в основном файле sass все отлично, а вот если подключать отдельные файлы, например, _header.sass при сохранение выскакивает ошибка - Autoprefixer: Missed semicolon! Точка с запятой все стоит нормально, компилит если несколько раз нажать сохранить, но всегда выскакивает эта ошибка! Вот моя сборка: https://paste.ofcode.org/sLuKmekW88cFusdQPeFaPV ! Помогите пжл)
  3. Препроцессоры SASS и LESS. Автоматизация Front-end разработки (курс от команды webformyself) Ищу, где скачать бесплатно, желательно с торрентов Весь инет гуглом и яндексом перерыл, не нашел. Дайте ссыль, очень нуно
  4. Привет форумчане! Раньше работал один и бед не знал в этом плане, но теперь попал в небольшую фирму, где каждый работает сам по себе, нет единого рабочего процесса. Я привык работать через Prepros, он многофункционален и требует минимальных знаний в "компиляторстве". Так вот, я хотел бы продолжить работать с препроцессором вместо чистого CSS, но проблема в том, что стили проекта могут также править и другие мои коллеги, и если они через какой нибудь фтп клиент внесут изменения в файл со стилями на сервере, то я потом не смогу с ним дальше работать, т.к. затру все их изменения. Можно ли как-то выйти из этой ситуации? Как вариант, можно мониторить изменения в файле стилей перед началом работы, но здесь есть риск ,что я однажды попросту забуду это сделать. Также, слыхал о возможности компиляции прямо на сервере. Прошу помочь в этом вопросе.
  5. Добрый день. Вас приветствует команда студии разработки и продвижения freedots.ru Если вы Front-end разработчик и делаете круто, то высылайте свое портфолио на [email protected] и вместе мы поработаем над интересными проектами Основные требования: Опыт работы в отрасли не менее 2 лет. Знание языков разметки: HTML, CSS. Знание JS Знание препроцессоров LESS/SASS Знание фреймворков: Bootstrap/Foundation Знание библиотек: jquery.js, желательно знание js фреймворков: angular.js/vue.js Знание сборщиков проектов, таких как: webpack Расположение: Россия > Москва Занятость/ЗП: Занятость:фикс ЗП:40 000 - 60 000 руб. График: обсуждаемо С уважением, команда Freedots.
  6. Буду дико благодарен тому, кто сможем помочь мне пошагово настроить среду разработки в редакторе Atom. Конкретно, нужно настройка gulp, sass и прочих смежных вещей, и следовательно, компиляцию в конце, чтобы всё это собиралось в файлы html/css/js и т.д. Готов подстроиться под удобные вам дни/часы. Можно по скайпу, в слаке, в общем, там, где вам удобно!
  7. Помогите пожалуйста доверстать письмо. Вопросов несколько - буду выкладывать по степени формирования. Заранее спасибо всем кто не бросил начинающего. Пишу в Zurb Foundation 2, с помощью Inky и sass 1. Как сделать полосу во весь экран? (номер строки html кода: 144-151) 2. Мой SblimeText подсвечивает вопросы в строчках кода у body и table. Такая же история в конце кода с этими же тэгами. Если навести ничего не показывает, или редко ненадолго говорит об ошибке со скобками. Как побороть? basic.html app.scss
  8. Имеется такая структура файлов: sass/ -- bootstrap/ (внутри каталог mixins и sass файлы- bootstrap/_mixins.scss, bootstrap/_variables.scss, bootstrap/_normilze.scss, и т.д.) -- _bootstrap.scss -- main.scss содержание файла main.scss: @import "bootstrap"; .element { with: 200px; @media (min-width: @screen-md-min) { width: 100px; } } Но компилятор ругается, что вместо @screen-md-min должно быть конкретное значение.Как добиться, чтобы можно было использовать брейкпоинты бутстрапа в Sass?
  9. webpack && compass

    Кто нибудь использует ? Тщетно пытаюсь настроить уже не первый день. Нашёл вроде как верное решение для запуска компаса, но на импорте картинок ловлю ошибку, никакие варианты путей не работают. Ссылка на файлы https://github.com/Andrey7287/new-webpack
  10. макет вёрстка (адаптивная до 320px) Использовал: jade+sass+gulp. Требуется критика вёрстки, любые пожелания, указание на ошибки/недочёты, также приветствуются. От себя несколько вопросов: 1) Google page speed даёт низкую оценку скорости: Как это исправить?? скрин 2) Валидатор постоянно ругается на подключённые через гугл шрифты, можно ли это как-то исправить? скрин ошибки
  11. В интернете очень много различных бесплатных шаблонов на любой вкус, но почти все они идут без SASS или LESS файлов, в связи с чем затрудняется их кастомизация. Знает ли кто ресурсы, где можно найти шаблоны с исходниками стилей?
  12. Адаптивная верстка IE10+ Для себя сделал вывод, меню лучше делать два: одно полноразмерное, другое для мобильных устройств. Правда, в ie8 не отображается ровным счетом ничего(пустая страница), что для меня пока загадка. Может кто знает ответ?
  13. Всем доброго дня. Копаюсь в sass (scss), возник вопрос, ответ на который либо я не понимаю, либо не могу найти) Собственно такая структура .navigation ul li { span.inner > a span.icon_cat { display: inline-block; width: 24px; height: 24px; position: absolute; left: 7px; top: ; &.cars { @include sprite(url(../img/sprite.png), -14, 4); } } &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } } сам вопрос такой: Допустим у меня 50 категорий, для каждой своя иконка, как видно из кода это спрайт. В таком варианте как сейчас мне нужно писать очень много (ну или копировать), то есть выглядит примерно так: .navigation ul li { span.inner > a span.icon_cat { display: inline-block; width: 24px; height: 24px; position: absolute; left: 7px; top: 0; &.cars { @include sprite(url(../img/sprite.png), -14, 4); } &.cars2 { @include sprite(url(../img/sprite.png), -14, 4); } &.cars3 { @include sprite(url(../img/sprite.png), -14, 4); } &.cars4 { @include sprite(url(../img/sprite.png), -14, 4); } } &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars2{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars3{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars4{ @include sprite(url(../img/sprite.png), -14, -22); } } если честно я даже не особо понимаю как правильно объяснить, но примерно так: есть ли возможно обратиться к названию родительского класса, чтобы вместо &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } писать &:hover тут что-то что заменит (span.inner > a span.icon_cat).cars{ @include sprite(url(../img/sprite.png), -14, -22); } Ну или может есть какой-то другой короткий способ записи? Подскажите пожалуйста
  14. До сих пор верстал только с чистым css. хочу начать изучение Sass + Bootstrap (который ранее тоже не использовал) Никак не могу найти описания как правильно настроить рабочую среду без использования Ruby/Gulp/Bower, а с понятным Koala GUI. Где какие файлы размещать и какие файлы можно править в исходниках Бутстрапа, или нельзя никакие и нужно создать свои файлы, которые будут переписывать переменные Бутстрапа?
  15. gulp sass, не работает @import

    Может кто сталкивался с подобным, не могу импортировать другие sass файлы в основной (main.sass) К примеру подключение стилей файла reset.sass: @import "test/reset"После запуска компилятора, появляется ошибка Гуглил, предлагают вставить строчку includePaths: ['./styles'],либо плагины. Но почему-то всё равно не получается(( gulpfile var gulp=require("gulp");var sass=require("gulp-sass");gulp.task('sass', function() { return gulp.src('work-build/sass/*.sass') .pipe(sass({ includePaths: ['public-build/css'] //это строка, которой предлагали лечить данную проблему, но всё равно не работает, может я неправильно путь указываю })) .pipe(gulp.dest('public-build/css'));});gulp.task('watch', function(){ gulp.watch('work-build/sass/*.sass', ['sass']);});
  16. Решил освоить SASS, очень мне нравится его идея, большое коммьюнити, все нравится, но столкнулся с проблемой, собственно ниже и опишу. Хочу сделать миксин медиазапросов есть 4 переменные, в них описаны размеры экрана, и создан несложный миксин. $screen_xs: 320px;$screen_s: 768px;$screen_m: 1024px;$screen_l: 1200px;$screen_xl: 1376px;@mixin mediaquery($media) { @if $media == screen_s { @media only screen and (max-width: $screen_s + 1) { @content; } } @else if $media == screen_m { @media only screen and (min-width: $screen_m + 1){ @content; } } @else if $media == screen_l { @media only screen and (min-width: $screen_l + 1) { @content; } } @else if $media == screen_xl { @media only screen and (min-width: $screen_xl + 1) { @content; } }}дальше я этот миксин подключаю, например, к боди, пример абстрактный. body{ background: $blue_grey; @include mediaquery(screen_s) { background: $lime;} @include mediaquery(screen_m) { background: $teal;} @include mediaquery(screen_l) { background: $orange;} @include mediaquery(screen_xl) { background: $pink;} color: $color_base; font-family: $font_base; @include flexbox; @include flex-direction(column); min-height: 100vh;}суть такая, что фон меняется в зависимости от разрешения. НА выходе мы имеем // outputbody { background: #607D8B; color: #cccccc; font-family: "Proxima Nova", Tahoma, helvetica, sans-serif; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: vertical; -moz-flex-direction: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; min-height: 100vh;}@media only screen and (max-width: 769px) { body {background: #CDDC39;}}@media only screen and (min-width: 1025px) { body {background: #009688;}}@media only screen and (min-width: 1201px) { body {background: #FF9800;}}@media only screen and (min-width: 1377px) { body {background: #E91E63;}}Казалось бы этого я и ждал, так и есть, результат достигнут, но теперь у меня есть другой элемент, который я хочу видоизменять в зависимости от экрана, и пишу следующее .size:after{ content: "Size XS"; @include mediaquery(screen_s) { content: "Size S";} @include mediaquery(screen_m) { content: "Size M";} @include mediaquery(screen_l) { content: "Size L";} @include mediaquery(screen_xl) { content: "Size XL";}}Код несложный, есть блок, я в псевдоэлементе :after меняю слова в зависимости от разрешения. Собственно тут я и сталкиваюсь с проблемой избыточности, у меня дублируется код. На выходе я получаю ОТДЕЛЬНЫЕ медиазапросы // output.size:after {content: "Size XS";}@media only screen and (max-width: 769px) { .size:after {content: "Size S";}}@media only screen and (min-width: 1025px) { .size:after {content: "Size M";}}@media only screen and (min-width: 1201px) { .size:after {content: "Size L";}}@media only screen and (min-width: 1377px) { .size:after {content: "Size XL";}}так как же мне избавиться от этой избыточности? делать как и раньше в отдельном месте прописывать разрешение и в него вставлять все элементы, стили которых необходимо менять? но тогда пропадает прелесть использования SASS
  17. Всем привет! Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706 Пишите на почту из текста вакансии или мне в личку.
  18. Цвета и переменные

    Здравствуйте. Прочитал Sass Guidelines. Есть вопросы касательно того как называть переменные которые хранят цвета. Например у меня 18 цветов. 8 из которых это оттенки серого, 4 оттенка желтого, черный, белый и т.д. Как называть переменные: $c-grey-1, $c-grey-2, ..., $c-grey-n? Или $c-dashboard-title, $c-main-menu__item__link? Если у меня $c-dashboard-title и $c-main-menu__item__link одного цвета(хотя они логически не связаны), то поступить так: 1)$c-dashboard-title: #933434; $c-main-menu__item__link: $c-dashboard-title; 2)Или каждому задавать свое значение? Минус первого варианта в том что если поменяется хоть одно из значений, то переделывать придется оба (а их же может быть и больше) Минус второго варианта в том что хоть эти элементы и не связаны логически, но они должны быть одного цвета, легче же будет поменять в одном месте. Как тут быть? Разделяете ли вы цвета которые используете для шрифта, границ, фона? Например с помощью соответствующих префиксов Я создавал тему про цвета и шрифты, но там мы ушли в сторону шрифтов и вопрос с цветами для меня остался открыт. Если есть статья на эту тему, прошу дать ссылку. Также буду благодарен если кто-нибудь покажет как у него(нее) организованы цвета.
  19. Здравствуйте. Верстал я значит по-старинке и вдруг решил попробовать css фреймворки, а чтоб не мелочиться, то и препроцессоры. Ранее пытался использовать grid960, не понравилось( фиксированная ширина, адаптивности нет ). Почитал доки по Bootstrap, решил попробовать вместе с препроцессором Sass и его фреймворком Compass, так что кроме работы поделюсь впечатлениями о них. Сайт: http://electrouslugi-nn.ru/ Шаблон: https://yadi.sk/d/mQJWGuFtfSt4J В него входят подпапки psd(собственно макет), sass(файлы scss) и config.rb(конфигурационный файл sass). Хотелось бы получить информацию по следующим вопросам: Для каких целей служит класс .container-fluid? Пытался его использовать, но он имеет стрёмные паддинги 15px с боков, которые естественно оставляют белые поля. По-моему его с успехом заменяет div с width: 100%, или я чего-то не догоняю? Шаблон уныло смотрится в ie, даже в 9-м. Объясните пожалуйста, почему сетка сломалась? Т.к. нет макета под мобильные разрешения, верстал как Бог на душу положит, как бы вы оформили на моём месте? Для теста использовал режим адаптивного дизайна в Мозилле. Посоветуйте действительно полезные миксины Compass, те что я видел в основном направлены на поддержку старых ie. Разбил файлы scss на группы: _base.scss( тут шрифты и цвета ), media.scss(медиа-запросы), style.scss(основной файл). Правильно ли я поступил? Посоветуйте полезные приёмы для работы с sass.Мои впечатления: В Bootstrap слишком много кода, из которого must have только сетка, всё остальное сомнительной полезности. В принципе можно кастомную сборку использовать. Порадовал миксин Compass для создания спрайтов, действительно полезная штука. Ну и nesting sass конечно. Препроцессор не слишком ускорил разработку, думаю он актуален только на больших проектах. Можно быстро менять цветовую схему, просто поменяв значения переменных, и не надо лазить по всем файлам css с поиском и заменой.Буду рад конструктивным комментариям и советам
  20. Доброго времени суток! Установил sass и compass на windows, ввел команду compass watch, начал изменять style.scss и возникает ошибка совместимости кодировки. [Listen warning]: Change block raise an execption: incompatible character encodings: Windows-1251 and UTF-8Backtrace: C:/Ruby21/lib/ruby/gems/2.1.0/gems/sass-3.4.10/lib/sass/importers/filesystem.rb:87:in `index' C:/Ruby21/lib/ruby/gems/2.1.0/gems/sass-3.4.10/lib/sass/importers/filesystem.rb:87:in `remove_root' C:/Ruby21/lib/ruby/gems/2.1.0/gems/sass-3.4.10/lib/sass/importers/filesy Очень долго ищу решение, может кто знает как решить проблему?
  21. Здравствуйте, оцените, пожалуйста верстку. Делал с помощью Susy 2. Верстка адаптивная, резиновая. Макет взял с интернета. Ссылка на гитхаб; Демо; Есть также пара моментов: 1. Возможно как-то сделать чтобы при добавлении контента див этот растягивался и не выезжал текст 2. Социальные иконки идут в мобильной версии после блока с текстом, а в десктопной до и справа, флоатом и относительным позиционированием я этого добился, но порядок у них изменился. Есть другие решения? Спасибо!
  22. Приветствую всех! У меня назрел вопрос по теме использования bootstrap. Я не понимаю, как с помощью этой библиотеки можно верстать уникальные дизайны. В теории все кажется достаточно простым и понятным, а на деле разработка превращается в кошмар и войну со стилями и полнейший хаос. В итоге, вместо быстроты и удобства, появляется ощущение какой-то искусственной усложненности и ненужности этого всего. Хочу обратиться к тем, кто успешно работает с bootstrap - как вы это делаете? Прошу дать мне советы, как нужно с этим работать и на что нужно обратить внимание. Чтение мануалов и гугл не помогают с проблемой. Еще подобная проблема у меня есть с препроцессорами Less, SASS. Я не могу их применять на практике, каждый раз запутываюсь, психую и в конце концов делаю стили по-старому. Препроцессоры мне кажутся просто ненужными и только все усложняющими штуками, но я понимаю, что без умения пользоваться этими технологиями жить дальше нельзя, и нужно как-то их осилить и понять. Если кто-то сталкивался с подобными трудностями - отпишите, пожалуйста, свой путь осваивания этих технологий.
  23. Проблемы с SASS

    Вчера начал читать небольшую книжку о SCSS, решил освоить препроцессоры. Уже половину книги прочитал, а все никак не могу настроить командную строку. ОС: Windows XP Что я сделал, шаг за шагом: 1) скачал ruby installer 1.9.3, установил его 2) прописал в командной строке gem install sass 3) sass установился. Но директория по умолчанию не та, которая мне нужна. 4) меняю директорию: cd /d D:\Dropbox\Верстка\Workshop 5) теперь я хочу, чтобы sass автоматически компилировал sass файл в css. Этот файл лежит по адресу: D:\Dropbox\Верстка\Workshop\Mold\style\scss\style.sass 6) Для этого пишу в командной строке: sass --watch Mold\style\scss\style.sass:Mold\style\style.css 7) Результат - ошибка: no such file or directory - style\scss\style.sass ERRNO::ENOENT: No such file or directory - D:\Dropbox\Верстка\Workshop\Mold\style\scss Но директория правильная, и файл лежит на месте! Файл style.css создается там, где нужно. Правда вместо результата компиляции -- сообщение об ошибке (такой же как и в командной строке). Почему появляется эта ошибка? Что сделано не так?