Что за Sass в Foundation CSS?

Question

[Влад]

Может кто-нибудь скинуть ссылку или объяснить на пальцах, что такое SASS и как применять через него стиль к нужным элементам дизайна?

Я понимаю обычные классы для html элементов.. а что за sass придумали.. вот фреймворк foundation не могу разобрать из-за них..

Comments

[Aetae]

Чё там разбираться. Даже если лень доки читать: убери скобочки да точки с запятой и пиши как обычно.

[Влад]

Aetae, ну вот например https://get.foundation/sites/docs/button.html#sass...
сам фреймворк подключается при помощи https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/fou...

переменная $button-font-family
куда мне вписать вписать её, чтобы изменить её значение? надо перезалить https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/fou... на своё сервер и в самое начало файла вписать $button-font-family: Arial??

как, например, в foundation добавить нужному элементу bordert-top: 1px ?? в bootstrap это было сделать крайне просто дописав класс bt-1.. а здесь как?? както через sass надо сделать?

[Aetae]

https://get.foundation/sites/docs/installation.html
Современный фронт собирается.("компилируется")
На лету что-то там править в файликах на сервере уже не получится.

[Влад]

не понимаю...
можно ли использовать foundation без sass? вот пример сайта, в исходном коде которого я вижу только обычный css и яваскрипт, без sass, но это foundation. Чем тогда отличается foundation С sass и БЕЗ него? https://chaga-chunks.com/

[Aetae]

Sass "компилируется" в css. Ни на каком сайте вы не увидите никакого sass, less и проч. stylus, потому что в итоге результат - css.
Вы можете редактировать итоговый css, но как только исходник sass будет "перекомпилирован" - всё легко может развалиться. Если исходники не трогать и подключать только конкретную версию - можно жить и так, но не нужно.

[Влад]

Aetae, зачем тогда нужен Sass, если можно напрямую редактировать css?
Можете привести пример явно описывающий какое-то преимущество?

[Aetae]

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

Answer 1

[Ярослав Сербин]

Sass

Answer 2

[Flying]

С языком Sass лучше всего знакомиться на его официальном сайте, там есть подробная документация.

Comments

[Влад]

не пойму что за компиляция? то есть недостаточно прописать в файле нужные переменные, а надо еще какойто программой этот файл прогнать?

[Flying]

Влад, да, конечно, sass - пост-процессор для css, он компилирутется в css. Для компиляции можно использовать либо sass либо node-sass

[Влад]

Flying,
правильно ли я понимаю, что для установки sass необходимо иметь SSH доступ к серверу?

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

[Flying]

Влад, Где именно компилировать - не столь важно, но на самом сайте используется уже откомпилированный CSS. Преимущество Sass в том что он предоставляет множество дополнительных механизмов, позволяющих автоматизировать генерацию CSS или абстрагировать какие-то аспекты кода. Это не вопрос скорости, а вопрос поддерживаемости.

[Влад]

Flying, можете привести пример доп механизма, позволяющего автоматизировать генерацию css и абстрагировать какой-либо аспект кода?

[Flying]

Влад, Конечно, например вот здесь я как-то выкладывал кусок своего исходника. Это кастомизирумый генератор grid'ов для новостных блоков с responsive, поддержкой альтернативного синтаксиса для MSIE и кастомизацией элементов новостей в блоках. На практике эти 275 строчек + конфиг генерят где-то 30-40кб css кода в который я даже смотреть не хочу, а уж руками поддерживать ни за что бы не взялся.

[Влад]

Flying, как сложно и непонятно =(((

[Flying]

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