Scss чем отличается от css
Перейти к содержимому

Scss чем отличается от css

  • автор:

Чем лучше scss от css?

Mike_Ro

Если проект маленький и стилей крайне мало, то действительно, смысла в SCSS нет. В остальных случаях SCSS качественно выигрывает перед ванильным CSS. У меня разработка на SCSS занимает до 50% меньше времени, про дальнейшую поддержку вообще молчу.

Основные преимущества SCSS: вложенные классы и свойства, миксины и вагон преимуществ поменьше.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать

AndrewHaze

Андрей @AndrewHaze
Умею гуглить яндексом
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Krasnodar_etc

Егор Живагин @Krasnodar_etc
fundraiseup
Импорты? Миксины? Удобная вложенность?
Ответ написан более трёх лет назад
Нравится 1 1 комментарий

andead

+ функции, циклы, условия, плагины
Ответы на вопрос 1

Scss для css — как es6 для ванильного js.
CSS сейчас начинает развиваться семимильными шагами и инклюдит, в первую очередь, функционал препроцессоров и фреймворков, зарекомендовавший себя как best practices(возрадуемся CSS GRID и похороним наконец Bootstrap). Те же переменные в CSS появились совсем недавно.
Ну а пока функционал хоть и хорош, но недостаточно обширен(те же импорты и миксины, как писали выше) — царем горы будет scss(в моем случае — postCSS).

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?

  • нет подписчиков
  • 4 часа назад
  • 36 просмотров

Уроки SASS / SCSS

Препроцессор SASS / Урок #1 - Что такое SASS, SCSS. Установка

Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка

SASS или же SCSS это препроцессор, который служит для быстрого написания CSS стилей. Благодаря SASS вы можете добавить переменные, функции, наследование и многое другое к обычному документу CSS.

Видеоурок

Полезные ссылки:

  1. Курс по языку CSS ;
  2. Официальный сайт SASS ;
  3. Редактор Atom .

Что такое SASS?

SASS — это препроцессор, позволяющий писать код для стилей CSS, используя всевозможные: переменные, циклы, миксины, функции и многое другое.

Прежде чем изучать SASS стоит изучить CSS, так как без знаний второго вы не сможете ощутить полезность данной технологии. Курс по изучению CSS вы можете посмотреть здесь .

Препроцессор построен на языке Ruby , поэтому для его работы необходимо скачать Ruby и далее использовать терминал или командную строку для превращения SASS в CSS. Сам язык Ruby при этом знать не обязательно, но если вы хотите его изучить, то это можно сделать здесь .

Браузеры не воспринимают файлы, написанные на SASS, они не могут прочитать код внутри них и не могут понять что необходимо сделать. Из-за этого, весь SASS необходимо конвертировать в привычные CSS файлы.

В чём отличия между SASS и SCSS?

Многие слышали про SASS и SCSS и думают что это разные технологии. На самом деле, обе технологии являются один и тем же и отличаются лишь синтаксисом написания.

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS:

$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color

Ниже пример кода на SСSS:

$font-stack: Helvetica, sans-serif; $primary-color: #333; body

Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .

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

Онлайн редактор кода

Большое задание по курсу

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

Что такое SASS и чем отличается от CSS?

SASS (Syntactically Awesome Style Sheets) — это препроцессор CSS, что означает, что он расширяет возможности CSS, делая его более мощным и простым в использовании. SASS написан на языке программирования Ruby, но его можно использовать с любым проектом веб-разработки.

Функции и преимущества SASS

SASS добавляет в CSS несколько функций, которые делают стилизацию веб-страниц более эффективной и управляемой, например:

Переменные: SASS позволяет хранить значения в переменных, которые можно использовать во всех таблицах стилей. Это позволяет легко обновлять значения и поддерживать согласованность стилей.

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

Примеси: SASS позволяет создавать повторно используемые блоки кода CSS, называемые примесями, которые можно включать в ваши таблицы стилей.

Наследование: SASS позволяет создавать отношения родитель-потомок между селекторами, так что дочерние селекторы наследуют стили своих родительских селекторов.

Операторы: SASS позволяет использовать математические операторы в ваших стилях, упрощая вычисление значений.

Код SASS необходимо скомпилировать в CSS, прежде чем его можно будет использовать на веб-странице. Есть несколько способов сделать это, в том числе с помощью инструментов командной строки, плагинов для браузера и инструментов сборки, таких как Grunt или Webpack.

SASS стал популярным выбором среди веб-разработчиков, поскольку он упрощает процесс стилизации веб-страниц, делая его более эффективным и удобным в сопровождении. SASS считается более мощным и гибким, чем CSS, и широко поддерживается инструментами и средами веб-разработки, такими как Bootstrap.

What is sass

Особенности SASS

Еще одна особенность SASS — использование функций и управляющих директив. Функции в SASS аналогичны функциям в других языках программирования, они позволяют выполнять вычисления и возвращать значения. Это может быть полезно для создания сложных цветовых схем или генерации значений для использования в различных других частях таблицы стилей.

Управляющие директивы, такие как @if, @for и @while, позволяют вам принимать решения в ваших таблицах стилей на основе переменных и вычислений. Это может быть полезно для создания вариантов дизайна, создания адаптивных стилей или для условного создания стилей.

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

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

SCSS — аналог SASS

В дополнение к SASS существует также аналогичный язык под названием SCSS (Sassy CSS), который представляет собой вариант SASS, использующий тот же синтаксис, что и CSS. Файлы SCSS используют расширение .scss и могут быть скомпилированы в стандартный CSS. Это позволяет разработчикам использовать всю мощь SASS, продолжая писать код, знакомый и совместимый со стандартным CSS.

В целом, SASS — это мощный инструмент для улучшения удобства обслуживания и функциональности CSS. Он предоставляет широкий спектр функций, упрощающих написание стилей и управление ими для больших и сложных веб-проектов. Использование SASS может сэкономить время, улучшить организацию и сделать процесс разработки более эффективным.

Чем отличаются css/scss/sass

Слышал, что sass или scss(запутался чем они отличаются) облегчают работу с css инструментом. Где его можно писать, есть отдельные приложения?

Лучший ответ

sass/scss — препроцессоры для css
синтаксис разный
в sass не пишутся скобки
в scss тоже самое что и в css только можно делать циклы миксины и так же это справедливо и для sass

css это просто стили с ограниченным количеством функций

Остальные ответы
а что общего? буквы?

Чем задавать такие вопросы, лучше бы почитал документацию и посмотрел обзор препроцессоров на ютубе, а то расписывать долго.

4dmonkeyИскусственный Интеллект (144696) 3 года назад

css — это то, во что компилируется и два остальных, потому что css это стандарт, язык стилей понимаемый браузером, а SASS и SCSS это препроцессоры, код, который так или иначе по итогу скомпилируется в CSS, разницы в них нет, кроме синтаксической, в SASS всё делается посредством отступов, а в SCSS — фигурных скобок. Я бы рекомендовал брать последнее, потому что оно ближе к CSS и будет меньше запары в переносе старого CSS кода, скопировав который в SCSS, вы получите 99% совместимость, 1% остаётся на понимание Вашего кода сборщиком node-sass

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *