Сначала поставил логотип таун билдинг, эммм...
Технология предварительной обработки CSS и виды внедрения
- Что такое технология предварительной обработки css
- Препроцессор CSS определяет новый язык. Основная идея состоит в том, чтобы использовать специальный язык программирования, чтобы добавить некоторые функции программирования в CSS, использовать CSS в качестве цели для создания файлов, а затем разработчикам нужно использовать только этот язык. Выполните кодирование.
- С точки зрения непрофессионала, «препроцессор CSS использует специальный язык программирования для оформления веб-страниц, а затем компилирует их в обычные файлы CSS для использования в проекте. Препроцессоры CSS добавляют некоторые функции программирования в CSS, нет необходимости учитывать проблемы совместимости с браузером», например. , вы можете использовать переменные в CSS, простые логические программы, функции (такие как переменная $main-color) и т. д. Некоторые базовые функции языков программирования могут сделать ваш CSS более кратким, лучшей адаптируемостью, лучшей читабельностью, более простым обслуживанием кода, и многие другие преимущества.
- Типы методов предварительной обработки css
- Сасс (SCSS)
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
Существует так много препроцессоров CSS, что вопрос «Какой препроцессор CSS мне выбрать?» также стал горячей темой в Интернете в последнее время, и крупные технические форумы также бесконечно спорят, такие как Nuggets (ха-ха, тайно лижут волну)
Среди многих отличных языков препроцессора CSS на данный моментSass,LESSа такжеStylusСамый лучший и самый обсуждаемый, сегодня я представлю Sass в препроцессоре CSS. Я верю, что осадные львы будут есть кашу
Не говорите ерунды, сразу переходите к коду
переменная корреляция
Значение локальных переменных похоже на локальные переменные в javascript (что такое локальная переменная, гм...)
вложенная корреляция
Используйте &, чтобы увеличить вес селектора
Вложенность свойств — это разделение свойств на объекты. Объект в ключ, значение
заполнитель
Используйте % для объявления заполнителей, @extend для применения заполнителей
Функция плейсхолдеров очень мощная, если объявить только плейсхолдеры без ссылок, то по завершении редактирования код генерироваться не будет
расширение и наследование
Поговорив о заполнителях, быстро возьмите небольшой блокнот и запишите расширение и наследование.
Видно, что @extend используется как в заполнителях, так и в наследовании.
Разница в том, что заполнители не генерируют допустимый код, а при наследовании родительского класса родительский класс является допустимым кодом.
миксин инструкция миксин
Есть много названий инструкций по микшированию, например, инструкции по микшированию, макроинструкции. Редактор назвал его смешанным в соответствии с названием Vue.
Инструкции микширования могут устанавливать параметры для гибкого использования
Если вы иногда не хотите передавать параметры, установите параметр по умолчанию при объявлении
Синтаксис SassScript
Директива процесса @IF.
Управляющая инструкция - это расширенная функция, которая обычно не используется в процессе повседневной записи в основные инструкции по смешиванию (микс) в сочетании с
Инструкция цикла @for
инструкция цикла @в то время как
Инструкция цикла @каждый
использование функций
Строковые функции
Числовая функция
функция списка
функция цвета
@ правило в sass
@import
- Sass расширяет правило CSS @import для включения файлов SCSS и Sass. Все импортированные файлы SCSS и Sass объединяются и выводятся в один файл CSS. Кроме того, переменные или примеси, определенные в импортированном файле, можно использовать в основном файле.
- @import импортирует по имени файла. По умолчанию он будет искать файлы Sass и импортировать их напрямую, однако в некоторых случаях он будет скомпилирован в правила CSS @import.
- Расширение файла .css.
- Имя файла начинается с http://.
- Имя файла URL().
- @import включает любые медиа-запросы.
- Если ничего из вышеперечисленного нет, а расширение .scss или .sass, будет импортирован файл Sass или SCSS с таким именем. Если расширения нет, Sass попытается найти одноименный файл с расширением .scss или .sass и загрузить его.
@media
Директива @media в Sass так же проста, как правила использования CSS, но у нее есть дополнительная функция, которую можно вложить в правила CSS. Подобно всплывающей функции JS, если вы используете директиву @media в стиле, она будет всплывать наружу.
@at-root
@at-root буквально означает «выпрыгнуть из корневого элемента». Если у вас есть несколько вложенных селекторов и вы хотите, чтобы селектор выпрыгивал наружу, вы можете использовать @at-root.
@debug
@debug используется для отладки в Sass.После того, как вы используете команду @debug в исходном коде Sass, когда код Sass компилируется неправильно, установленная вами подсказка Bug будет выводиться в командном терминале.
@warn
@warn похож на @debug и помогает нам лучше отлаживать Sass.
@error
@error имеет ту же функцию, что и @warn и @debug.
заключительные замечания
В повседневных проектах некоторые грамматики используются меньше и постепенно игнорируются. Я надеюсь, что эта статья, обобщенная сегодня, может помочь всем.Если вы найдете ее полезной, пожалуйста, добавьте куриную ножку в редактор (лайк, ага)