Sass для PHP « PHP для идиотов

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

29 сентября 2009 г. 10: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, а не архив

smartcss-r2.zip (58)

ιιlllιlllι унц-унц

artoodetoo

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

29 сентября 2009 г. 8: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

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

29 сентября 2009 г. 8: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

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

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

ненашел ссылки на сорцы

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

artoodetoo

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

5 октября 2009 г. 11: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

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

29 сентября 2009 г. 10: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

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

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

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

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

ιιlllιlllι унц-унц

phpdude

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

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

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

срать надо красиво! и так вегда! чем красивее жопа, тем красивей понос!

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

NRG

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

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

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

phpdude

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

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

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

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

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

md5

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

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

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

все умрут, а я изумруд

phpdude

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

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

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

это уже тоже неплохо :)

чтото такое же надо

Спустя 11 сек.

сравнить плюсы и минусы и найти золотую середину

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

artoodetoo

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

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

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

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

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

ιιlllιlllι унц-унц

AndryG

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

1 октября 2009 г. 15: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

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

1 октября 2009 г. 15: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

ыы мой прием, ага артедоо? :)

куль

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

Sass для PHP

Войти