ФорумПрограммированиеPHP для идиотов → Sass для PHP

Sass для PHP

  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 23:09, спустя 1 час 19 минут 36 секунд

    В первом приближении готов конвертер на PHP Sass => CSS
    Предлагаю всем поучаствовать в развитии.

    Я использую ограниченное подмножество Sass:
    - для атрибутов используется только такой синтаксис :attrname .
    - инструкция @import сейчас игнорируется
    - не реализован вычислитель выражений типа "800px - 200px". производится простая замена переменных
    - для mixins пока не работает подстановка параметров.

    Даже в таком состоянии он может быть полезен. Пример преобразования:

    // Constant Definitions

    !sidebar_width = 200px
    !page_width    = 800px
    !primary_color = #eeeeee

    // Reusable Mixin

    =big
     :font-size 2em
     :font-family arial

    // Global Attributes

    body
     :font
       :family fantasy
       :size 30em
       :weight bold

    // Scoped Styles

    #contents
     :width = !page_width
     #sidebar
       :float  right
       :width = !sidebar_width
     #main
       :width = !page_width - !sidebar_width
       :background = !primary_color
       h2
         +big
         :color blue
    #footer
     :height 200px

    произведет такой CSS:

    body {
     font-family: fantasy;
     font-size: 30em;
     font-weight: bold;}
    #contents {
     width: 800px;}
     #contents #sidebar {
       float: right;
       width: 200px;}
     #contents #main {
       width: 800px - 200px;
       background: #eeeeee;}
       #contents #main h2 {
         font-size: 2em;
         font-family: arial;
         color: blue;}
    #footer {
     height: 200px;}


    Как видите не хватает вычисления выражений :) Кто бы взялся за такой "калькулятор"?

    —————
    Ссылки по теме:
    Sass на пiхе: http://pyha.ru/forum/topic/3449.msg70872#msg70872
    оффсайт: http://sass-lang.com/
    тестируем on-line: http://lab.hamptoncatlin.com/play/with/sass
    compass framework: http://compass-style.org/
    хабр о sass: http://habrahabr.ru/blogs/css/59418/
    брошенный проект phphaml (Haml & Sass) http://phphaml.sourceforge.net/ - надо качать из SVN, а не архив
    ιιlllιlllι унц-унц
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 21:40, спустя 22 часа 30 минут 47 секунд

    еще пример селекторов при обработке вложенных правил:


    #contents
     #sidebar, #main
       :background #c1c1c1
     #main
       :font-size 1.2em
       h2
         :color blue
    #footer
     :height 200px

    a
     :color red
     :text-decoration none
     &:hover
       :text-decoration underline


    =>


    #contents { }
     #contents #sidebar, #contents #main {
       background: #c1c1c1;}
     #contents #main {
       font-size: 1.2em;}
       #contents #main h2 {
         color: blue;}
    #footer {
     height: 200px;}
    a {
     color: red;
     text-decoration: none;}
     a:hover {
       text-decoration: underline;}


    #contents { } выглядит странно, но, с другой стороны, это не ошибка и без него структура была бы видна хуже
    ιιlllιlllι унц-унц
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 21:49, спустя 9 минут 37 секунд

    Мой класс поддерживает несколько вариантов вывода (подсмотрено в compass): EXPANDED, NESTED, COMPACT. COMPRESSED
    Предыдущий пример был выведен как NESTED, а можно вывести так:

    echo SassFilter::pipe($sass, SassFilter::O_COMPACT);

    #contents #sidebar, #contents #main { background: #c1c1c1; }
    #contents #main { font-size: 1.2em; }
    #contents #main h2 { color: blue; }
    #footer { height: 200px; }
    a { color: red; text-decoration: none; }
    a:hover { text-decoration: underline; }



    echo SassFilter::pipe($sass, SassFilter::O_EXPANDED);

    #contents #sidebar, #contents #main {
    background: #c1c1c1;
    }

    #contents #main {
    font-size: 1.2em;
    }

    #contents #main h2 {
    color: blue;
    }

    #footer {
    height: 200px;
    }

    a {
    color: red;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }
    ιιlllιlllι унц-унц
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 23:22, спустя 1 час 32 минуты 21 секунду

    ненашел ссылки на сорцы
    Сапожник без сапог
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 5 октября 2009 г. 0:09, спустя 6 дней 47 минут

    см. вложение в заглавном посте

    а ещё я не поленился завести Subversion для подобных кусочков
    http://subversion.assembla.com/svn/qb7/cuts/smartcss/

    или так, если SVN не установлен - есть педаль Download:
    http://code.assembla.com/qb7/subversion/nodes/cuts/smartcss
    ιιlllιlllι унц-унц
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 23:30, спустя 23 часа 20 минут 58 секунд

    artoodetoo, расставь скобки)

    foreach ($parentArray as $parent)
    foreach ($childArray as &$child)
    if (($ampPos = strpos($child, '&')) !== FALSE)
    $child = substr_replace($child, $parent, $ampPos, 1);
    else
    $child = $parent . ' ' . $child;


    лестница - хорошо, но скобки лутше … имхо
    Сапожник без сапог
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 23:41, спустя 10 минут 47 секунд

    дуд, для тебя — что угодно :)
    сырцы непричёсаны пока. старался поскорее сговнякать работающее, а теперь начну наводить красоту.

    offtopic: скоро будет 999 постов. дедушкамарос, хочу чтобы карма к тому моменту стала 33!
    ιιlllιlllι унц-унц
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 28 сентября 2009 г. 23:41, спустя 23 часа 59 минут 30 секунд


    дуд, для тебя — что угодно :)
    сырцы непричёсаны пока. старался поскорее сговнякать работающее, а теперь начну наводить красоту.
    срать надо красиво! и так вегда! чем красивее жопа, тем красивей понос!
    Сапожник без сапог
  • NRG

    Сообщения: 4761 Репутация: N Группа: в ухо

    Spritz 29 сентября 2009 г. 1:01, спустя 1 час 20 минут 7 секунд

    artoodetoo, я лично не понял для чего это нужно.
    меня интересует вопрос, если я буду юзать эту шнягу, то где я выиграю ?
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 29 сентября 2009 г. 1:02, спустя 1 минуту 31 секунду

    я вот еще раз глянул на sass ксс шаблон, плюсы: очевидная наслуемость, лестница пути до объекта к которому прописываем классы + достаточно лаконично.

    минусы: мне он не понравился … чтото в нем не то … надо его както упростить, идея ахуенная, но надо ее развить с самого начала
    Сапожник без сапог
  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 29 сентября 2009 г. 1:06, спустя 4 минуты 10 секунд

    http://lesscss.org/
    это хуйню смотрели?
    все умрут, а я изумруд
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 29 сентября 2009 г. 1:08, спустя 1 минуту 54 секунды


    http://lesscss.org/
    это хуйню смотрели?
    это уже тоже неплохо :)

    чтото такое же надо
    Спустя 11 сек.
    сравнить плюсы и минусы и найти золотую середину
    Сапожник без сапог
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 29 сентября 2009 г. 1:29, спустя 21 минуту 3 секунды

    NRG, когда стили для проекта вырастают больше чем "пара экранов", как-то не очень удобно становится их править. Многие этим озадачиваются, поэтому появляются Sass|Less|ExtCss может ещё что-то… Из того, что мне попадалось по теме "CSS с переменными" у Sass самый простой и чистый синтаксис.

    md5, почти то же самое и тоже сделано на ruby. дело вкуса. мне захотелось Sass.

    Ст́оит покопать фреймворк compass — они разложили известные CSS-фреймворки в синтаксис Sass, добавили переменные и примеси. Управляемость и читаемость возрастает вдвойне.
    ιιlllιlllι унц-унц
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 1 октября 2009 г. 4:26, спустя 2 дня 2 часа 57 минут

    http://subversion.assembla.com/svn/qb7/cuts/smartcss/smartcss.php
    	// TODO: calculate expression
    private static function _expression($s)
    {
    return preg_replace_callback('/'.self::VAR_PATTERN.'/', array('self', '_getVar'), $s);
    }

    Приведите варианты значений $s
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 1 октября 2009 г. 4:38, спустя 11 минут 38 секунд


    http://subversion.assembla.com/svn/qb7/cuts/smartcss/smartcss.php
    	// TODO: calculate expression
    private static function _expression($s)
    {
    return preg_replace_callback('/'.self::VAR_PATTERN.'/', array('self', '_getVar'), $s);
    }

    Приведите варианты значений $s
    ыы мой прием, ага артедоо? :)

    куль
    Сапожник без сапог

Пожалуйста, авторизуйтесь, чтобы написать комментарий!