Вопрос о возможностях SASS

[BehemothOz]

Добрый день!

Очень хотелось бы разобраться с таким вопросом. А точнее двумя вопросами

 

1. Изучаю SASS. Успел поверхностно оценить преимущества этого языка. Вот вопрос. 

Можно ли с помощью SASS автоматически переводить px в em? 

Т.е. есть формула target ÷ context = result (которая описывается у Итана Маркотта в книге "Отзывчивый веб дизайн).

Если расшифровать ее (процитирую):

" ..берем целевое значение кегля и делим на кегль (font size) его контейнера, то есть контекста. В результате мы получаем желаемый кегль, выраженный в относительных и достаточно гибких единицах em."

 

Я понимаю это так. Можно font size body вывести в переменную, а затем с помощью мат.операций перевести в em font size его дочерних элементов. Но вложенность может быть большой, а body не для всех является контекстом. Это же тогда сколько переменных нужно ввести? 

 

Или я чего то не понимаю. Прошу помощи разобраться)

 

2. В каких случаях padding и margin стоит указывать в процентах? 

[abrahadabra]

1) px в em переводить конечно же элементарно.

@function em-calc($value, $context: $contextBase)  @return ($value / $context) * 1em

В базовых настройках проекта можно указать базовый размер:

$contextBase: 16px

А затем используете уже эту функцию где угодно в проекте:

.some_class  font:    weight: normal    size: em-calc(16px)

Можно явно указывать, относительно какого контекста считать.

 

Но с другой стороны, вам точно нужны em? Не лучше ли rem?

 

2) а padding и margin в процентах нужно задавать тогда, когда они должны быть в процентах

Edited December 21, 2015 by abrahadabra

[BehemothOz]

1) px в em переводить конечно же элементарно.

@function em-calc($value, $context: $contextBase)  @return ($value / $context) * 1em

В базовых настройках проекта можно указать базовый размер:

$contextBase: 16px

А затем используете уже эту функцию где угодно в проекте:

.some_class  font:    weight: normal    size: em-calc(16px)

Можно явно указывать, относительно какого контекста считать.

 

Но с другой стороны, вам точно нужны em? Не лучше ли rem?

 

2) а padding и margin в процентах нужно задавать тогда, когда они должны быть в процентах

 

Спасибо!

Буду разбираться в этой функции  

 

 

Вы советуете rem? 

Однако, в своем самообучении я пока не добрался до этого (разница rem и em), но если у Вас будет статья на эту тему, я с удовольствием почитаю!

[abrahadabra]

Советую rem, но следует всё же понимать, что это разные вещи, и в разных случаях лучше либо одно, либо другое.

Чем хорош rem: он всегда считается от одного и того же базового размера, когда em — от контекста.

Здесь ясно видны отличия: https://jsfiddle.net/qL4du4sn/

[BehemothOz]

Советую rem, но следует всё же понимать, что это разные вещи, и в разных случаях лучше либо одно, либо другое.

Чем хорош rem: он всегда считается от одного и того же базового размера, когда em — от контекста.

Здесь ясно видны отличия: https://jsfiddle.net/qL4du4sn/

 

Огромное спасибо, буду разбираться! 

[VeniVidiVici]

Раз уж вы заговорили о разных единицах, не могу не спросить: Всегда ли в адаптивной вёрстке нужно использовать относительный размер текста, допустим, если это не оговорено в тз, можно ли использовать px или нежелательно?

И второй вопрос - относительные внутренние отступы - видел как делались с помощью em - т.е. возникает вопрос что выбрать - проценты, em или др. Или это зависит от конкретной ситуации?

[abrahadabra]

Конечно же смотрите на конкретную ситуацию да выбирайте инструмент, наиболее подходящий.

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

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

 

… относительные внутренние отступы … с помощью em

мсье знает толк

[Sergik+]

Функции в css ? Знаете вы господа толк в извращениях. Не дай бог после вас кому то ваш код править.

[vladmih]

Функции в css ? Знаете вы господа толк в извращениях. Не дай бог после вас кому то ваш код править.

После них кто-то будет компиленный править)))))

[abrahadabra]

Функции в css ? Знаете вы господа толк в извращениях. Не дай бог после вас кому то ваш код править.

Я понимаю, о чём вы.

 

Буквально недавно был случай. Проект сдан, запущен, заказчик пропал на несколько месяцев, затем заявляется: «мне надо сделать это и то».

Как бы без проблем, давай доделаем. И тут выясняется очень интересный момент. За эти несколько месяцев после меня кто-то мой код правил. Вы правы. Не дай бог.

Проект был сдан в виде git-репозитория, в котором исходники, и в отдельном каталоге собранное минифицированное-оптимизированное приложение. В исходниках всё как положено: миксины, функции, всё по полочкам разложено. Gulpfile с задачами на все случаи жизни. Шаблоны на jade, ангуляр весь на coffescript (проект начинался задолго до es6). Ну и конечно же, всё это скомпилировано в очень компактную, но нечитаемую сборку.

После меня кто-то мой код правил. Ни одного коммита. Правилось всё на боевом сервере. Кто-то ниасилил js, подключил jquery. Кто-то ниасилил sass, правил прямо в минифицированном итоговом css. Кто-то ниасилил ангуляр…

Привести это в порядок стало невозможно. Единственный вариант был — откатить к версии из репозитория, и всё писать заново.

Естественно, у меня вопрос к заказчику: зачем? И удивительный ответ: у тебя слишком дорого, я нашёл, кто делает дешевле.

Естественно, у меня следующий вопрос к заказчику: а почему эти доработки не тому дешёвому? И удивительный ответ: а он пропал и не отвечает. А другие некомпетентны, после их правок пропадало всё то, что сделал дешёвый пацанчик.

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

Славная была охота!

[Sergik+]

Я на postcss перешел, хотя бы нету моей фигни придуманной, там все есть в плагинах и в 99% случаев они устроят большинство, к примеру https://github.com/cuth/postcss-pxtorem, имеем документацию нормальную и рекомендовано плагины подключать прямо в том файле в котором используем, то есть в сотне css мы можем использовать плагины только в 1-2 файлах и это сразу будет видно.