CSS вот-вот будет поддерживать вложенность, а препроцессоры, такие как SASS/LESS, бесполезны?

внешний интерфейс JavaScript CSS
CSS вот-вот будет поддерживать вложенность, а препроцессоры, такие как SASS/LESS, бесполезны?

Недавно появились очень интересные новости о том, что CSS будет изначально поддерживать вложенность --Agenda+ to publish FPWD of Nesting, что указывает на то, что спецификация вложенности CSS вот-вот войдет в стадию спецификации FWPD.

Текущая спецификация --CSS Nesting Module.

Благодаря широкомасштабной совместимости пользовательских свойств CSS (CSS Variable) CSS теперь будет поддерживать вложенность, а некоторые основные функции препроцессоров изначально поддерживаются CSS.Означает ли это, что препроцессоры, такие как SASS/LESS, бесполезны? Насчет ликвидации?

этапы спецификации

Во-первых, краткое, несколько этапов от предложения на пол, проходят технические характеристики:

  1. Редакторский черновик (ED)
  2. Рабочий проект (WD)
  3. Переход — рабочий проект «Последний звонок» (LCWD)
  4. Рекомендация кандидата (CR)
  5. Переход – Предлагаемые рекомендации (PR)
  6. Рекомендация (РЕК)

Как было сказано выше, он вот-вот войдет в FPWD, но находится на втором этапе спецификации WD stage, FPWD означает первый публичный рабочий проект (First Public Working Draft (FPWD)). За FPWD последует несколько рабочих проектов, в которых будут учтены отзывы более широкого сообщества в рамках CSSWG и вне группы. Идеальный дизайн спецификации.

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

Кроме того, я думаю, что у препроцессоров, таких как SASS\LESS, есть некоторые интересные функции (функции), которых все еще не хватает даже после того, как нативный CSS поддерживает пользовательские атрибуты и вложенность.Я просто перечислю свои представления.

функция цикла for()

В настоящее время собственный CSS по-прежнему не поддерживает циклические функции.

Но на самом деле в препроцессоре цикл по-прежнему является часто используемой функцией. Рассмотрим следующий макет:

ulЕсть несколькоli, увеличивая высоту каждого li20px, конечно, вы можете написать один за другим, но наличие цикла может значительно снизить рабочую нагрузку:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Без препроцессора наш CSS мог бы выглядеть так:

ul {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
li {
    width: 50px;
    background: #000;
}
li:nth-child(1) {
    height: 20px;
}
li:nth-child(2) {
    height: 40px;
}
// ... 3~9
li:nth-child(10) {
    height: 200px;
}

Если вы используете препроцессор SASS, его можно упростить до:

ul {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
li {
    width: 50px;
    background: #000;
}
@for $i from 1 through 10 {
    li:nth-child(#{$i}) {
        height: calc(#{$i} * 20px);
    }
}

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

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

Отображение некоторых эффектов, достигнутых с помощью функции цикла препроцессора

Ниже я кратко перечисляю некоторые эффекты анимации, которые я реализовал, используя функцию цикла препроцессора CSS.

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

Фрагмент функции цикла, использующей SASS:

@for $i from 1 to 200 {
    .g-ball:nth-child(#{$i}) {
        $width: #{random(50)}px;
        
        width: $width;
        height: $width;
        left: calc(#{(random(70))}px - 55px);
    }
    
    .g-ball:nth-child(#{$i}) {
        animation: movetop 1s linear -#{random(3000)/1000}s infinite;
    }
}

Хм, описанный выше цикл повторяется раз 200. Если вы действительно хотите писать по одному, нагрузка все равно очень велика. Полный код вышеупомянутого эффекта вы можете нажать здесь:

CodePen Demo -- CSS Candles

if () Условное утверждение

Следующим является условный оператор if().

На самом деле существует тип написания, очень похожий на условные операторы в CSS, то есть медиа-запросы.@mediaи обнаружение признаков@supportsзаявление, некоторые из похожих условных выборов, которые в настоящее время поддерживаются в CSS, следующие:

@поддержка условного оператора

CSS @supports реализует обнаружение функций с помощью синтаксиса CSS и пишет оператор CSS, который вы хотите реализовать, если обнаружение функций проходит во внутреннем блоке CSS.

div {
    position:fixed;
}
 
@supports (position:sticky) {
    div {
        position:sticky;
    }
}

CSS выше утверждения означает, что если клиентская поддержкаposition:sticky, затем используйтеposition:sticky, иначе этоposition:fixed.

Подробное объяснение обнаружения функций CSS можно найти в этой моей статье:Глубокое погружение в обнаружение функций CSS @supports и Modernizr

условное выражение @media

Другим распространенным условным оператором является медиа-запрос, с которым все знакомы.

Что делать, если текущее устройство удовлетворяет одному из условий.

article {
  padding: 4rem;
}
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

Кроме того, два приведенных выше условных оператора могут быть вложены друг в друга:

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Тем не менее, два вышеупомянутых не совсем то, что мы ожидаем в конце концов.if()утверждение.

Давным-давно у сообщества был голос (css-values - if() function), предложенный для реализации в спецификации CSSif()Условные операторы, например:

.foo {
  --calc: calc(10 * (1vw + 1vh) / 2);
  font-size: if(var(--calc) < 12px, 12px, var(--calc));
}

Вы можете увидеть это предложениеif(var(--calc) < 12px, 12px, var(--calc))Подобно тернарному оператору, его легче понять.

Однако приведенное выше условное утверждение не было поддержано по той причине, что вscss-values - if() functionВы можете получить представление.

Причина в том, что CSS всегда старался избегать произвольных зависимостей в свойствах. В CSS есть некоторые неявные зависимости между свойствами, такие какemДлина блока зависит от размера родительского элемента.font-size, если бы автор мог добавить произвольные зависимости (через условный оператор if()), это вызвало бы некоторые проблемы.

Исходный текст: это, к сожалению, означает, что мы добавляем произвольные зависимости между свойствами, чего мы до сих пор избегали, потому что это, как правило, неразрешимо. Пользовательские свойства могут произвольно ссылаться друг на друга, но они ограничены в том, что они могут делать, и имеют несколько разумное поведение «просто становятся недействительными», когда мы замечаем цикл. Циклы сложнее определить для произвольного CSS, и они могут произойти гораздо проще, потому что существует ряд существующих неявных зависимостей между свойствами.Например, все, что принимает длину, зависит от размера шрифта (из-за em), и поэтому вы не можете иметь значение в размере шрифта это относится к свойству, которое принимает длину (поэтому не нужно регулировать размер шрифта для масштабирования с шириной!).Мы добавляем новые зависимости такого рода с течением времени (например, добавление единицы lh, которая вызывает зависимость от высоты строки); если бы авторы могли добавлять произвольные зависимости, мы не смогли бы добавить новые неявные зависимости, опасаясь нарушить существующий контент (путем формирования циклов, которые ранее были действительными и нециклическими).

Итак, прямо в CSSif()Заявление так и не было реализовано.

в препроцессорах, таких как SASSif()утверждение

Наконец, давайте посмотрим наif()Приложение , потому что препроцессоры, такие как SASS, в конечном итоге будут скомпилированы в файлы CSS, поэтомуif()На самом деле это не очень распространено. потому что САСif()Невозможно добиться чего-то подобного вышеfont-size: if(var(--calc) < 12px, 12px, var(--calc))эта функция.

В SASS, я думаю, чаще всего используетсяif()Возможно, это сценарий:

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $size;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

Приведенный выше код представляет собой инкапсуляцию CSS для реализации треугольников.Через входящие параметры реализуются треугольники разных направлений, цветов и размеров. То есть в препроцессореif()Более полная инкапсуляция некоторых функциональных возможностей для облегчения повторного использования.

На самом деле приведенный выше код будет скомпилирован в:

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-left-color: black;
}

Случайная () случайная функция

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

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

Наиболее распространенными являются разные цвета, разная длина, разное количество и так далее.

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

Благодаря случайности мы можем получать блоки div с разной высотой/шириной и разными позициями каждый раз при обновлении и использовать случайные характеристики для отрисовки разных визуализаций:

DEMO -- изображение летнего заката

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

$r: random(100);

random()Это функция, поддерживаемая SASS.Вышеприведенный $r может получить случайное целое число от 0 до 100.

использоватьrandom(), вы можете инкапсулировать различные случайные функции, такие как случайные цвета:

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

div {
    background: randomColor();
}

Некоторые думают о нативной реализации CSS random ()

Ниже приведены некоторые мысли сообщества о реализации функции random() в нативном CSS.Если вам интересно, вы можете нажать на нее:

[css-values] random() function

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

Предполагая, что CSS изначально реализованrandom()функции, такие как следующие:

<p class="foo">123</p>
<p class="foo">456</p>
<p class="foo">789</p>

.foo:hover { 
    color: rgb(random(0, 255), 0, 0); 
}

Предположим, чтоramdom()Это случайная функция, реализованная нативным CSS.Есть некоторые вещи, которые должны быть решены или признаны всеми:

  1. random(0, 255)Когда определяется значение, каждый раз, когда анализируется CSS, или каждый раз, когда он запускается приложением?
  2. Для приведенного выше DEMO, 3.fooизcolorЗначения одинаковы?
  3. для повторногоhover,Отменаhoverусловие,random(0, 255)Будет ли значение ?

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

Вспомогательные функции: цветовые функции, математические функции

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

В одной из моих предыдущих статей о тенях --Уловки и детали CSS-теней, о которых вы не знали, я представил эффект использования нескольких теней для получения трехмерных теней.Например, мы хотим добиться следующего эффекта:

Изменение цвета теней производится с помощью SASS.функция цвета:

  • fade-outИзмените прозрачность цвета, чтобы сделать его более прозрачным.
  • desaturateИзмените значение насыщенности цвета, чтобы сделать его менее насыщенным.
@function makelongrightshadow($color) {
    $val: 0px 0px $color;

    @for $i from 1 through 50 {
        $color: fade-out(desaturate($color, 1%), .02);
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}

p{
   text-shadow: makelongrightshadow(hsla(14, 100%, 30%, 1));
}

Конечно, в дополнение к двум вышеупомянутым функциям цвета, SASS также предоставляет множество подобных функций, связанных с цветом, вы можете посмотреть здесь:Основы Sass — цветовые функции.

Помимо цвета, в CSS-эффектах часто используются математические функции.

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

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

@function fact($number) {
    $value: 1;
    @if $number>0 {
        @for $i from 1 through $number {
            $value: $value * $i;
        }
    }
    @return $value;
}

@function pow($number, $exp) {
    $value: 1;
    @if $exp>0 {
        @for $i from 1 through $exp {
            $value: $value * $number;
        }
    }
    @else if $exp < 0 {
        @for $i from 1 through -$exp {
            $value: $value / $number;
        }
    }
    @return $value;
}

@function rad($angle) {
    $unit: unit($angle);
    $unitless: $angle / ($angle * 0 + 1);
    @if $unit==deg {
        $unitless: $unitless / 180 * pi();
    }
    @return $unitless;
}

@function pi() {
    @return 3.14159265359;
}

@function sin($angle) {
    $sin: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 20 {
        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
    }
    @return $sin;
}

@function cos($angle) {
    $cos: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 20 {
        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
    }
    @return $cos;
}

@function tan($angle) {
    @return sin($angle) / cos($angle);
}

С точки зрения текущего CSS, с точки зрения математических функций, уже есть много усилий, таких как:

  • основная операционная функцияcalc()
  • функция сравненияmax(),min(),clamp()

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

  • Экспоненциальная функцияpow(),sqrt(),hypot(),log(),exp()
  • Тригонометрические функцииsin(),con(),tan()
  • Ступенчатая функцияround(),mod(),rem()Ждать

также стандартизируетCSS Values and Units Module Level 4Это указано в определении, и я думаю, что в ближайшее время это будет постепенно реализовано.

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

В заключение

Ну, подводя итог, на данный момент я думаю, что препроцессоры, такие как SASS/LESS, по-прежнему полезны во многих аспектах.Прежде чем некоторые из вышеперечисленных функций будут полностью реализованы, препроцессоры можно использовать в определенной степени.Компенсировать недостатки CSS .

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

Итак, я думаю, что в течение некоторого времени препроцессор все еще может мирно сосуществовать с CSS~

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные эффекты CSS могут следовать за мнойCSS-вдохновение

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

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

Категории