Jump to content
  • 0

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


BehemothOz
 Share

Question

Добрый день!

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

 

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

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

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

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

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

 

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

 

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

 

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

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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 by abrahadabra
Link to comment
Share on other sites

  • 0

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), но если у Вас будет статья на эту тему, я с удовольствием почитаю!

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

 

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

 

… относительные внутренние отступы … с помощью em
мсье знает толк :)
Link to comment
Share on other sites

  • 0

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

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

 

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

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

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

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

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy