SCSS — немного практики, часть I

[exdeniz]

А почему не Stulys, как самый продвинутый на сегодня. Практически без ограничений.

[faiwer]

Я в первые наткнулся на него совсем недавно. Если не сложно, опишите вкратце в чём его преимущества перед SASS?

[Iskin]

Почему Stulys более продвинутый? Sass/SCSS очень расширяемые и мощны. У них даже есть свои библиотеки. Например, Compass, который может и спрайты автоматически генерировать и картинки inline-вставлять.

[developer]

думаю что не лучше как минимум потому что не наследует синтаксис css и вызывает тем самым раздражение

[exdeniz]

border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

body
font 12px Helvetica, Arial, sans-serif

a.button
border-radius 5px


Кода меньше. Более продвинутый список встроенных функций

[faiwer]

Насчёт кода — тут лучше сравнивать с SASS, в нём кода тоже минимум. Касательно функций, насколько я знаю sass + compass весьма продвинут. Сам правда пока компасом не пользовался.

[Iskin]

Это просто синтаксический сахар. Например, бета-сборки Sass/SCSS уже поддерживаю блоки в примесях. Например:

@unclude for-mobile {
  width: 100px;
}

[Iskin]

Зря не написали в качестве преимущества про Compass compass-style.org/.

[faiwer]

У меня опыта в нём нету ) Посему и не написал, очень смутно представляю его возможности. Но мне кажется хабре не хватает статьи про него… :)

[Anonym]

А мне наоборот SASS больше нравится, чем SCSS. Во-первых, не нужно ставить скобки и точки с запятой, как следствие пишем меньше кода. Во-вторых, нет кучи закрывающих скобок при большой вложенности.

[HhyperR]

Особенно если использовать вместе с HAML и CoffeeScript, получается красивая связка.

[or10n]

а как вы дебажите css? ведь после генерации css из scss нумерация строк изменяется.
P.S. сам не верстальщик, но верстальщик на работе негодует

[qwertysx]

source map

[megasua]

Поподробнее, пожалуйста.

[qwertysx]

www.html5rocks.com/en/tutorials/developertools/sourcemaps/

[qwertysx]

На самом деле это в недалеком будущем :) пока поддержки для sass нет. Но и дебажить css — это не так уж сложно.

[faiwer]

Для firebug есть аддон firesass. Но с ним у меня firebug страшно тормозит, ввиду чего я дебажу при помощи поиска по файлам\файлу в IDE. В принципе, как таковой, проблемы я не вижу, ибо редко сталкиваюсь с debug-ом CSS. Обычно я точно знаю в каком файле та или иная строчка уже по селектору. А сама строчка находится через ctrl + f. Возможно, есть способы поудобнее )

[Dumbris]

Если юзать compass, то он вставляет в выходной файл комментарии вида /* line 63, ../sass/_header.sass */, над каждым селектором. По моему опыту «дебажить css» с компасом очень редко бывает нужно. Правильная разбивка на модули, использование переменных и custom mixins, дает компактный код, который легко поддерживать.

[EvilShadow]

Если не юзать, тоже вставляет. Это опция команды sass
-l, --line-numbers Emit comments in the generated CSS indicating the corresponding source line.



[xeLL]

я использую это — github.com/nex3/firesass

[v1z]

Раньше пользовался SCSS как встроенным в Rails по дефолту, но потом перешел на Less. Одна из причин — использовать твиттеровский Bootstrap, а другая — более удобный синтаксис примесей, которые мне довольно часто пригождаются.

Вот как это сделано в SASS/SCSS:

@mixin rounded-corners($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#header {
  @include rounded-corners;
}
#footer {
  @include rounded-corners(10px);
}

и в LESS:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Лично мне второй вариант кажется намного приятнее.

[faiwer]

На мой взгляд разница косметическая. А вот отсутствие @if, @each и прочих вкусностей… Хотя вроде бы кто-то недавно утверждал что они вскоре должны появиться.

[v1z]

А еще очень рекомендую Slim вместо Haml =).

[faiwer]

За Slim спасибо, сам использую Jade (nodeJS), но мне его не хватает. Погляжу на «слим».