Интерфейсная разработка CSS — достаточно освоить эти четыре функции Sass.

внешний интерфейс CSS SCSS
читать оглавление

Когда я впервые встретил CSS, я влюбился в него с первого взгляда.

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

Однако по мере увеличения размера проекта и сложности страницы мы вскоре обнаружили, что эта красавица не только не красива, но и лишена рук и ног:

  • Отсутствующая модульная система. Система модуля является краеугольным камнем программного обеспечения. Этот дефект CSS вызвал большое сопротивление инженерному управлению интерфейсными проектами, что делает его чрезвычайно сложным для кодирования и поддерживать масштабные приложения. У js не было модульной системы в начале. Позже разные колеса часто появлялись часто. CMD, AMD и UMD все выскочили. Это был беспорядок. К счастью, ES6 представил систему модуля с уровня языка, чтобы закончить этот хаос. Модульность может, наконец, быть единым. CSS, почему бы тебе не учиться у вашего доброго друга js, у каждого это есть, а ты все еще глупы, и вообще нет движения.
  • Переменного механизма нет. Это неудобно для управления значениями свойств, на которые ссылаются в нескольких местах. Например, значение цвета используется во многих местах на странице. Дизайн ММ вдруг по прихоти изменил это значение на другой цвет. Что делать, ctrl+f глобальная замена? Что, если вы замените что-то, что не должно быть заменено, или если вы пропустите несколько.
  • Вложенные уровни очень больно писать. происходит часто
    .page .content .left-side .profile .name{};
    .page .content .left-side .profile .age{};
    Это выглядит неприятно, а писать еще неприятно. Это то, что больше всего терпеть не могут программисты — повторение.
  • Сложно повторно использовать. Повторное использование является основной идеей разработки программного обеспечения.CSS не только не предоставляет систему модулей, но и умело избегает многих инженерных практик. Я чувствую, что дизайн языка css похож на шутку.
  • блабла.. Остальные не очень серьезные.

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

Будет спрос, будет и рынок.Sass(Syntactically Awesome Style Sheets)возник.

Старые правила, давайте взглянем на оригинальные слова официального сайта Сасса:

Sass — самый зрелый, стабильный и мощный язык расширений CSS профессионального уровня в мире!

Этот продукт действительно совсем не скромный, «самый зрелый, самый стабильный, самый мощный».

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

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

Это Sass или SCSS?
SCSS — это новый синтаксис, введенный в Sass 3. Он полностью совместим с родным CSS по синтаксису и полностью наследует Sass по функциям.Можно сказать, что это идеальное слияние CSS и Sass. СКСС Для Sass это то же, что CSS3 для CSS, ES6 для JS. Так что не волнуйтесь, на самом деле это одно.

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

1. Вложенное письмо

Подумайте о том, как мы раньше писали нативный css:

 .page .content .left-side .profile .name{
     font-size: 2rem;
 }
 .page .content .left-side .profile .age{
     color: red;
 }
 скопировать код

Теперь с помощью scss вы можете написать:

.page{
    .content{
        .left-side{
            .profile{
                .name{
                    font-size: 2rem;
                }
                .age{
                    color: red;
                }
            }
        }
    }
}
 скопировать код

после компиляции

.page .content .left-side .profile .name{font-size: 2rem;}
.page .content .left-side .profile .age{color: red;}
 скопировать код

Преимущества этой вложенной нотации очевидны:

  • Структура понятна и лаконична и может соответствовать структуре html-документа;
  • Уменьшено количество избыточных повторяющихся кодировок селекторов;

Во-вторых, повторное использование значений атрибутов — определение переменных

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

Код перед переменной (вот пример определения ряда компонентов стиля, представляющих стиль успеха):

.success-bg{
    background: #dff0d8;
}
.success-panel{
    .panel-heading{
        background: #dff0d8;
    }
    .panel-body{
        border: 1px solid #dff0d8;
    }
}
 скопировать код

Код после использования переменных:

$success-color: #dff0d8;

.success-bg{
    background: $success-color;
}
.success-panel{
    .panel-heading{
        background: $success-color;
    }
    .panel-body{
        border: 1px solid $success-color;
    }
}
 скопировать код

Преимущества использования переменных очевидны:

  • Для нескольких человек удобно работать вместе и определять часто используемые значения атрибутов как переменные и помещать их в отдельные файлы, чтобы разработчики могли легко ссылаться на эти мелкие детали, не обращая внимания на эти мелкие детали.Использование семантических имен переменных лучше, чем у монотонного CSS, значение намного проще;
  • Значительно повышает удобство сопровождения кода и облегчает единообразное управление локальными и глобальными стилями;

3. Повторное использование на уровне файлов — модульная система

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

Нативный CSS@importПредоставляет поддельную модульную систему, которая не работает. Сасс пара@importРасширен для реализации действительно еще более мощной модульной системы. Sass выберите пару@importЧтобы расширить вместо создания новой инструкции, можно увидеть, что ключевое слово import имеет сильную семантику, и ключевое слово модульной системы JavaScript такжеimport.

Перед модульной системой:

<!-- index.html -->
<link rel="stylesheet" href="/your/site/common.css">
<link rel="stylesheet" href="/your/site/popup.css">
<link rel="stylesheet" href="/your/site/module_a.css">
<link rel="stylesheet" href="/your/site/site.css">
 скопировать код

При наличии модульной системы:

/* site.scss */
@import "common";
@import "popup";
@import "module_a";
 скопировать код
<!-- index.html -->
<link rel="stylesheet" href="/your/site/site.css">
 скопировать код

О преимуществах, конечно, говорить не приходится:

  • После добавления, удаления или изменения модулей за это отвечает css, не беспокойте других, не нужно снова трогать html; -
  • Модульная система предотвращает усложнение проектов по мере увеличения сложности бизнеса. При добавлении функций вам нужно расширяться только по горизонтали, а не по вертикали, чтобы каждый модуль всегда был гарантированно полным и простым;

В-четвертых, мультиплексирование слоя отображения — смешанные инструкции

Миксины очень похожи на функции в JavaScript, однако Sass предоставляет функции для оценки выражений.@functionФункциональные инструкции, здесь нет такой аналогии. Но на самом деле это такая штука, когда ее вызовут, она вернет стиль.

Например, в следующем коде есть повторяющиеся стили.

Перед повторным использованием:

.description{
    color: red;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}
.article{
    color: #444;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}
 скопировать код

Небольшая оптимизация:

.description, .article{
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}
.description{
    color: red;
}
.article{
    color: #444;
}
 скопировать код

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

.description, .article, .style01, .style02{
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}
.
.
.
.style01{}
.style02{}
 скопировать код

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

Повторите оптимизацию:

.grey-border-radius{
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}
.description{
    color: red;
}
.article{
    color: #444;
}
 скопировать код

Выглядит немного лучше, но в этом случае html нужно добавить дополнительный класс .grey-border-radius к каждому используемому тегу. Очевидно, что это лишнее. Такой подход можно назвать «сделать».

После мультиплексирования с Sass:

@mixin grey-border-radius{
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}
.description{
    @include grey-border-radius;
    color: red;
}
.article{
    @include grey-border-radius;
    color: #444;
}
 скопировать код

Скомпилированный вывод css:

.description {
  border: 1px solid #e3e3e3;
  border-radius: 2px;
  color: red;
}
.article {
  border: 1px solid #e3e3e3;
  border-radius: 2px;
  color: #444;
}
 скопировать код

Видите ли, этот подход просто «идеален»:

  • Извлечение фрагментов общего стиля для многократного повторного использования;
  • Размещайте фрагменты общего стиля в отдельных файлах, что удобно для повторного использования нескольких файлов проекта;
  • Использование html не требуется, CSS может решать свои дела за закрытыми дверями и никогда не беспокоить других;

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

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

# Повторное использование семантического слоя - механизм наследования

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

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

Перед использованием наследования:

.msg{
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success{
    color: #4cae4c;
}
.msg-error{
    color: #d43f3a;
}
 скопировать код

Это также проблема, упомянутая выше: при написании html к каждому используемому тегу нужно добавить еще один класс .msg, что избыточно.

После использования наследования:

.msg{
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success{
    @extend .msg;
    color: #4cae4c;
}
.msg-error{
    @extend .msg;
    color: #d43f3a;
}
 скопировать код

после компиляции

.msg, .msg-success, .msg-error {
  border: 1px solid #e3e3e3;
  background: #dff0d8;
}
.msg-success {
  color: #4cae4c;
}
.msg-error {
  color: #d43f3a;
}
 скопировать код

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

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

# Функции для сложных вычислений

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

Например, разработка мобильного терминала может быть заключена в функцию преобразования px в rem.

$baseFontSize: 20;
@function px2rem($val) {
  @return $val/$baseFontSize + rem;
}

.big-text{
    font-size: px2rem(30);
}
 скопировать код

После компиляции:

.big-text {
  font-size: 1.5rem;
}
 скопировать код

Таким образом, после получения визуального эскиза, заданного дизайном MM, вы можете напрямую использовать px для измерения и использования.

# Идеальный поток управления

поток управления в языках программированияif/else,for,whileи другие управляющие операторы. Sass также предоставляет реализации директив:

  • @if
  • @for
  • @each
  • @while

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

резюме

Sass прекрасно компенсирует несколько недостатков, выявленных вышеприведенным собственным CSS.В то же время новый синтаксис SCSS позволяет разработчикам CSS легко переходить и является заслуженным лидером среди препроцессоров CSS. С помощью Sass легко писать файлы в стиле проекта с четкой структурой, возможностью повторного использования и простотой обслуживания, чего и ожидают инженеры. Такая хорошая вещь, используйте ее быстро.

Эта статья в основном касаетсяКитайская сеть Sass.

Категории