новое хранилище знанийПередняя часть от входа до входаПросите внимания, помечайте звездочками и предложениями и время от времени обновляйте~

Эпизоды, которые вы не видели:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)
Если вы считаете, что это хорошо, пожалуйста, поставьте палец вверх

«Какой язык препроцессора CSS выбрать?»

Что такое препроцессор CSS?

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

Зачем использовать препроцессор CSS?

CSS — это просто язык разметки, вы не можете настраивать переменные, вы не можете ссылаться на него.

CSS имеет следующие специфические недостатки:

• Синтаксис недостаточно мощный, например, он не может быть вложенным, что приводит к необходимости писать много повторяющихся селекторов в модульной разработке;
• Без переменных и разумного механизма повторного использования стилей логически связанные значения атрибутов должны многократно выводиться в виде литералов, что затрудняет их сопровождение.

Прекомпиляция может легко привести к злоупотреблению селекторами потомков.

Преимущества использования препроцессора

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

Sass&Less

• Less (сокращение от Leaner Style Sheets) — это обратно совместимый язык расширений CSS. Поскольку Less очень похож на CSS, Less добавляет к языку CSS лишь несколько удобных расширений, облегчающих его изучение. 

• sass, как «самый зрелый, стабильный и мощный в мире язык расширений CSS профессионального уровня». Совместим со всеми версиями CSS, и существует множество фреймворков, созданных с помощью sass, таких как Compass, Bourbon и Susy.

SASS до версии 3.0 имеет суффикс .sass, а после версии 3.0 суффикс .scss.

Такие языки, как Sass и Less, на самом деле можно понимать как надмножество CSS.На основе исходного синтаксического формата CSS в них добавлены функции языка программирования, такие как использование переменных, поддержка логических операторов и функций. Упростите поддержку и повторное использование кода CSS.

Но в конце концов браузер должен знать только файлы CSS, он не может обрабатывать эти переменные и логические операторы в CSS, поэтому должен быть процесс компиляции для преобразования кода, написанного Sass или Less, в стандартный код CSS, этот процесс называется Preprocessed. для CSS.

Дополнительные инструкции

ruby sass

Ruby Sass был первоначальной реализацией Sass, но 26 марта 2019 года его жизнь подошла к концу. Мы больше не поддерживаем его, пользователям Ruby Sass предлагается перейти на другие реализации (LibSass или Dart Sass).

Зачем?

Вначале написание Sass на Ruby могло легко привлечь к его использованию существующих пользователей и даже всю экосистему Ruby. Позже Node.js стал повсеместно использоваться во фронтенд-разработке, а Ruby постепенно отошел на второй план. При этом масштаб проекта Sass намного превзошел первоначальное видение автора, а требования к производительности Sass превзошли возможности Ruby.

Dart-sass

Поскольку я не очень часто использую sass, спасибо @WashingtonHua за напоминание.

sass официально анонсировала альфа-версию проекта Dart Sass 42 в ноябре 2016 года, то есть они использовали Dart для перезаписи Sass.

Согласно официальному сайту sass-lang:
Dart Sass является основной реализацией Sass, что означает, что он получает новые функции раньше других реализаций. Он быстрый, простой в установке и компилируется в чистый JavaScript для простой интеграции в современные рабочие процессы веб-разработки.

Чистая версия JS работает медленнее, чем автономная версия, но ее легко интегрировать в существующие рабочие процессы и позволяет настраивать функции и средства импорта с помощью JavaScript. Он добавляется в проект с помощью команды npm install --save-dev sass и импортируется через require().

При установке через npm Dart Sass предоставляет API JavaScript для совместимости с Node Sass. Идет работа над полной совместимостью

libSass

Изначально Sass был написан на Ruby. LibSass — это движок Sass, реализованный на C/C++. Суть в том, что это просто, быстро и легко интегрируется.
LibSass — это просто библиотека инструментов. Для локального запуска (т. е. для компиляции кода Sass) вам нужна оболочка для LibSass. Для LibSass уже существует множество оберток.

• Sass C, оболочка, разработанная на C
• sass.cr — это оболочка для LibSass для языка программирования Crystal.
• go-libsass — самая активная оболочка языка Go

Подробнее см.sass.bootcss.com/libsass

Less

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

Less может работать на узле или в браузере. Действительный фрагмент CSS сам по себе является допустимым фрагментом LESS.

LESS предоставляет механизмы абстракции, необходимые для общего программирования, такие как переменные, вложенность, примеси, операторы, функции и т. д.

Переменная

Переменные позволяют нам определить ряд общих значений в одном месте, а затем вызывать их по всей таблице стилей.

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

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

компилируется в:

#header {
  width: 10px;
  height: 20px;
}

Миксины

Mixin — это метод включения (или смешивания) набора свойств из одного набора правил в другой. Предположим, мы определяем класс следующим образом:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Если вы хотите использовать эти атрибуты в других наборах правил, просто введите имя класса нужного атрибута, как показано ниже.

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

Вложение

Less предоставляет возможность использовать вложение вместо или в сочетании с каскадированием. Предположим, у нас есть следующий код CSS:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

На языке Less мы можем написать такой код:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Код, написанный в Less, более лаконичен и имитирует структуру HTML.

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

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

Операция (Операции)

Арифметические операторы +, -, *, / могут работать с любым числом, цветом или переменной.

Обратите внимание, что если единицы измерения переменных с обеих сторон оператора различны, преобразование единиц измерения выполняется перед сложением, вычитанием или сравнением. Результат вычисления основан на типе единицы измерения крайнего левого операнда. Если преобразование единиц измерения неверно или бессмысленно, единица измерения игнорируется. Недопустимый пример преобразования единиц измерения: преобразование пикселей в см или рад в %.

Преобразование не выполняется, если нет единицы

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

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

@base: 2cm * 3mm; // 结果是 6cm

Вы также можете выполнять арифметические операции над цветами:

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

Функции

В Less есть встроенные функции для преобразования цветов, работы со строками, арифметических операций и многого другого. Эти функции подробно описаны в руководстве по функциям Less.

Использование функции очень простое. В следующем примере показано, как использовать процентную функцию для преобразования 0,5 в 50 %, увеличения насыщенности цвета на 5 %, уменьшения яркости цвета на 25 % и увеличения значения оттенка на 8:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Импорт

Вы можете импортировать файл .less, и все переменные в этом файле будут доступны. Если импортируемый файл имеет расширение .less, расширение можно не указывать:

@import "library"; // library.less
@import "typo.css";

В этой статье представлено лишь краткое введение в некоторые функции less. Более подробное введение в less см. в справочном документе 2 в конце статьи.

Sass

Sass — это вспомогательный инструмент для усиления CSS. Он добавляет расширенные функции, такие как переменные, вложенные правила, примеси и встроенный импорт на основе синтаксиса CSS. Эти расширения делают CSS более мощным и элегантным.

Особенности (особенности)

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

Переменная

SASS использует $ символ для определения переменных (старая версия использования Sass! Для определения переменных.

$highlight-color: #F90;

В отличие от свойств CSS, переменные могут существовать вне определений блоков правил CSS. Когда переменная определена в блоке правил css, переменная может использоваться только в этом блоке правил.

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

При объявлении переменной значение переменной также может ссылаться на другие переменные.

Вложение

Основное использование такое же, как и меньше

Селекторы подгрупп и селекторы родственных групп: >, + и ~

Эти три комбинированных селектора должны использоваться в сочетании с другими селекторами, чтобы указать, что браузер выбирает только элементы в определенном контексте.

Эти комбинированные селекторы можно без особых усилий применять для вложения правил sass. Их можно разместить после внешнего селектора или перед внутренним селектором:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass распаковывает эти вложенные правила одно за другим по вашему желанию:

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

вложенные свойства;

В sass, помимо селекторов CSS, свойства также могут быть вложенными.

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

Правила для вложенных свойств следующие: отсоедините имя свойства от подчеркивания -, добавьте двоеточие : после корневого свойства, за которым следует блок {}, и напишите часть подсвойства в этом блоке {}. Как и вложение селекторов css, sass будет раскрывать ваши подсвойства один за другим, соединять корневое свойство и части подсвойств с помощью тире-, конечный результат будет таким же, как стиль css, который вы вручную пишете снова и снова:

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

Для сокращенной формы свойств можно даже вложить их вот так, указав исключения:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

Смеситель;

Микшеры определяются с помощью идентификатора @mixin, который присваивает имя блоку стилей, который можно легко использовать повторно, ссылаясь на это имя.

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

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

Затем этот микшер можно использовать с помощью @include в таблице стилей. Вызов @include извлечет все стили из микшера и поместит их туда, где вызывается @include. Если написать так:

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

И less, и sass поддерживают передачу параметров микшера.Подробности см. в справочных документах 2 и 3.

Импорт файлов SASS;

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

В Sass также есть правило @import, но разница в том, что правило @import sass импортирует связанные файлы при создании файлов CSS. Это означает, что все связанные стили группируются в один и тот же файл css без инициирования дополнительного запроса на загрузку.

Использование правил sass @import не требует указания полного имени импортируемого файла. Вы можете опустить суффикс файла .sass или .scss.

Используйте файлы разделов SASS

При распространении стилей sass в несколько файлов через @import обычно требуется создать только несколько файлов css. Эти файлы sass, специально написанные для команды @import, не должны создавать соответствующие независимые файлы css, такие файлы sass называются частичными файлами. Имя частичного файла sass начинается с подчеркивания. Таким образом, sass не будет компилировать этот файл отдельно во время компиляции для вывода css.

значение переменной по умолчанию;

!defaultДля переменных смысл такой: если переменная объявлена ​​и присвоена, то использовать ее объявленное значение, в противном случае использовать значение по умолчанию.

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

В приведенном выше примере, если пользователь объявил$fancybox-widthпеременная, затем в вашем локальном файле$fancybox-widthОперация назначения 400px недействительна. Если пользователь не делает такого заявления, то$fancybox-widthБудет по умолчанию до 400px.

сходство и различие

Одинаковый:

Less и Sass имеют некоторые синтаксические сходства, такие как следующие:

1. Миксины - класс в классе;

2. Миксин параметров — класс, который может передавать параметры, как функция;

3. Правила вложенности — классы вкладываются в классы, тем самым уменьшая повторяющийся код;

4. Эксплуатация - в CSS используется математика;

5. Функция цвета - вы можете редактировать цвет;

6, пространство имен (namespace) - стиль группировки, по которому можно вызывать;

7. Scope - локальный стиль модификации;

8. Назначение JavaScript — назначение с использованием выражений JavaScript в CSS.

разница:

категория	Sass	less
окружающая обстановка	ДАРТ или др.	Основан на javascript, может работать на узле или в браузере.
использовать	сложный	простой (относительно)
Функция	сложный	простой (относительно)
механизм обработки	обработка на стороне сервера	Может работать на узле или на стороне браузера
Переменная	начинается с $	К ... началу
Расширение файла	.sass или .scss	.less

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

Не забывайте о Dart Sass, он быстрый, простой в установке и компилируется в чистый JavaScript для легкой интеграции в современные рабочие процессы веб-разработки.

• В Less допускаются только циклические значения.
  В Sass мы можем перебирать данные любого типа. Но в Less мы можем перебирать значения только с помощью рекурсивных функций.

• Условные операторы
  Условные операторы не поддерживаются в Less.Конечно, условные операторы могут быть смоделированы встроенными функциями if and and, or, not.
  Условные операторы поддерживаются в Sass, но они не пишутся напрямую через зарезервированные слова, как если бы в других языках программирования.Вам нужно добавить знак @

• Рамка- Кто может добавить фреймворк sass в область комментариев?

Что использовать?

я не знаю~

1. Среда LESS проще, чем Sass
2. Вероятно, LESS проще в использовании, чем Sass?
3. Условно говоря, отечественные фронтенд-команды используют МЕНЬШЕ чуть больше, чем Sass.
4. С точки зрения функциональности Sass немного мощнее, чем LESS.
5. У Sass есть несколько зрелых фреймворков на рынке, таких как Compass, и многие фреймворки также используют Sass, например Foundation.
6. По накалу зарубежных дискуссий Sass однозначно лучше LESS
7. Что касается обучающих руководств, то туториалы Sass лучше, чем LESS (само по себе достаточно меньше официальной документации).

Используем less, который генерирует css при компиляции

если вы получитеновые знания, Пожалуйста, нажмитеотличныйНу~

-

Эта статья включена в:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)

Рекомендуемое чтение:

• Давайте поговорим о характеристиках атрибута положения css и его значении атрибута sticky (эффект потолка)
  Я не знал, что это значение свойства существовало раньше. . .

• Переплавка и перекраска, KFC и MC
  Каждый раз, когда эти двое упоминаются одновременно, отношения настолько близки, что KFC должен иметь рядом с собой MC.

• окно просмотра и 1px | инструментщик: это 1px, дизайнер: нет, это не
  Я не умею проектировать, но умею спорить

• Съедобный "сухой товар css layout", чистый пример HTML, отлаживаемый | горизонтальный, вертикальный, многоколоночный
  Можно смотреть, можно отлаживать, можно забрать, это единственное, ветки нет

• «Каскадный контекст CSS», который интерфейс должен освоить
  Девушка и кошка, которые вы хотите?

Справочная документация:

1. В чем разница между Sass и меньше? какой лучше использовать
2. меньшеБыстрый старт
3. Начало работы с Sass
4. Что такое SASS и LESS? как использовать?