CSS-Next: простая альтернатива препроцессору CSS. Хотите узнать о нем больше?

внешний интерфейс CSS Webpack PostCSS
CSS-Next: простая альтернатива препроцессору CSS. Хотите узнать о нем больше?

предисловие

CSSNEXT: можно понимать как CSS 3+, хотя не все функции стали официальными стандартами;

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

Но некоторые фичи внутри, после выбрасывания, обнаружили, что в принципе могут удовлетворить разработку (препроцессор CSS вместо SASS, LESS);

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

Конечно, это не означаетsass/lessНедостаточно хороши, наоборот могут выполнять более сложную работу, логические операции и условные суждения;

Если вы используете только некоторые обычные функции, вы можете использовать их с уверенностью;

Небольшие партнеры, разработанные с помощью webpack, в основном могут это сделать; другие инструменты сборки, такие какgulp,

зависимости, связанные с веб-пакетом

  • postcss-loader: постcss-процессор
    • postcss-next: Плагин, используемый для анализа записи next=>css3, может понимать что-то вроде ES6 (ESNEXT) до ES5.

Если вы используетеVueи использоватьvue-cliИнициализированные леса, покаstyleизlangатрибут указан какpostcssТолько что

Если вы строите свои собственные леса... общая конфигурация такая же

Общий разбор:style-loader < css-loader < postcss-loader < sass/less loader;

Общая конфигурация

  • vue-cliИнициализацияwebpackЭтот шаблон уже встроен.(vue init webpack xxx_project)
// css next
// 指定为 postcss 就可以走 postcss 了..自己装个 `postcss-next`
// 在根目录的 .postcssrc.js 配置一下就行了
 
<style lang="postcss" scoped>
</style>


// .postcssrc.js
// postcss-cssnext 插件内置了 autoprefixer , 可以在内部配置你需要兼容的范围

// https://github.com/michael-ciniawsky/postcss-load-config


module.exports = {
  plugins: {
    'postcss-cssnext': {},
  }
};
  • webpackнастроен

Старая версия webpack 2 использовала для выполнения загрузчиков справа налево... Вы можете разделить элементы конфигурации или напрямую добавить параметры конфигурации

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

postcssизoptionsВы можете написать в раздел комментариев, но я рекомендую раздел комментариев, который по умолчанию найдет корневой каталог.postcss.config.js

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

  {
    test: /\.(css|scss)$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1
        },
      },
      {
        loader: require.resolve('postcss-loader')
        // options: {
        //   // Necessary for external CSS imports to work
        //   // https://github.com/facebookincubator/create-react-app/issues/2677
        //   ident: 'postcss',
        //   plugins: () => [
        //     require('postcss-flexbugs-fixes'),
        //     autoprefixer({
        //       browsers: [
        //         '>1%',
        //         'last 4 versions',
        //         'Firefox ESR',
        //         'not ie < 9', // React doesn't support IE8 anyway
        //       ],
        //       flexbox: 'no-2009',
        //     }),
        // },
      },
      {
        loader: require.resolve('sass-loader')
      }
    ],
  },

Я установил много плагинов.Если вам интересно, вы можете погуглить соответствующие плагины, и вы будете знать общее использование.


// https://github.com/michael-ciniawsky/postcss-load-config


module.exports = {
  plugins: {
    'postcss-import': {}, // 样式文件的导入处理
    'postcss-url': {},
    'postcss-cssnext': { // 下一代的 CSS 转换插件
      browsers: [  // 兼容,不指定默认则是该插件默认范围,最近两个版本
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ],
      flexbox: 'no-2009',
    },
    cssnano: {  // 压缩
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    },
    'postcss-pxtorem':{ // pxtorem 
      'rootValue': 75,
      'unitPrecision': 7,
      "propList": ["*"],
      'selectorBlackList': ['ignore','html-topbar'],
      'replace': true,
      'mediaQuery': false,
      'minPixelValue': 0
    },
  }
};

//  vh vw 真心不是最完美的方案.我之前用了大漠那套,

// 发现我们突然要把手机端兼容 PC 的时候.我发现很无解,
//  vh vw 是相对视窗而不是父类的...
// 所以退而求次..rem 的可控性比较强,可以同时考虑 PC 和移动端的转换

С этим покончено, давайте приступим к реальным вещам

Сравнение синтаксиса (для достижения того же эффекта)

Вложенное написание?

// & 都代表父类自身
// scss

a {
    color:#333;
    .test{
        color:#f00;
    }
    &:hover{
        color:#ccc;
    }
    &+div{
        float:left;
    }
}


// css-next
// cssnext 的嵌套是空格子集,不像 scss 那样直接就行哦
a{
 color:#333;
 & .test{
   color:#f00;
 }
 &:hover{
  color:#ccc;
 }
 &+div{
  float:left;
 }
}


// css

a {
  color: #333;
}
a .test {
  color: #f00;
}
a:hover {
  color: #ccc;
}
a + div {
  float: left;
}

глобальная переменная?


// scss

$red:#f00;
$grey:#ccc;

a{
  color:$red;
  background-color:$grey;
}


// cssnext
// 在:root定义变量,可以理解为全局变量
// 变量用 var 函数读取
:root{
 --red:#f00;
 --grey:#ccc;
}

a{
 color:var(--red);
 background-color:var(--grey);
}

// css
a{
 color:#f00;
 background-color:#ccc;
}

Реализовать миксин, например sass/less?

// scss 可以使用默认变量,还可以定义 function, extends
// css next 没有这些, 所以下面比较的是常规写法
//scss

@mixin flex-basic(){
    display:flex;
    flex-wrap:no-wrap;
}

@mixin flex-horizontal-btw{
  @include flex-basic;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.page{
    position: absolute;
    @include flex-horizontal-btw;
}



//cssnext
// 定义和全局变量差不多.就是一个 js 对象的写法
// 应用需要用到类似装饰器的 @apply
:root {
    --flex-basic: {
      display: flex;
      flex-wrap: no-wrap;
    }
    --flex-horizontal-btw: {
      @apply --flex-basic;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  
.page {
    position: absolute;
    @apply --flex-horizontal-btw;

 }


// css
.page {
    position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: no-wrap;
      flex-wrap: no-wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

 }

регулярные численные расчеты


// scss 的计算贼强大,cssnext 比不得,但是最基础的用法还是可以的
// scss

$big-font-size:24px;
html{
    font-size: $big-font-size / 3;
}


// cssnext 
// 不能像 scss 直接编译出8px,而是依赖 calc 函数计算的,结果一致
:root{
 --big-font-size:24px;
}

html{
  font-size: calc(var(--big-font-size) / 3); // font-size: calc(24px / 3);
}

// css
html {
  font-size: 8px;
}

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

Точно так же scss может полностью имитировать реализацию нескольких цветовых функций cssnext,

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

Например, оцените их в соответствии с условиями, передайте разные переменные, а затем выполните

скажи что-нибудь еще

cssnext имеет несколько встроенных функций, которые также полезны, хотя и не так хороши, какsassЭти сильные события на протяжении многих лет

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

  • Агрегировать селекторы в переменную
//cssnext
// @custom-selector 装饰器名称固定的, 后面是 空格 + 关联设置
// @custom-selector + 样式匹配器(:--name) + 应用的元素或者选择器
@custom-selector :--color a , span , img , .test;


:--color {
    color:#333;
    &::before{
        content:'$';
        
    }
}


//css 
a,
span,
img,
.test {
    color:#333
}


a::before,
span::before,
img::before,
.test::before{
    content:'$';
}
  • :matchesПсевдокласс, это также может упростить написание css

// cssnext
div::before{
 content:'!!';
}
div:matches(::before, .items) {
  color: red;
  & a{
    font-size:10px;
  }
}

// css

div::before{
 content:'!!';
}
div::before, div.items {
  color: red
}
div::before a, div.items a{
 font-size:10px;
}
  • Установите упрощенный способ написания нескольких изображений для картинок, прямо возьмите официальный пример, и друзья, у которых есть такая потребность, могут написать меньше кода.

//cssnext
.foo {
    background-image: image-set(url(img/test.png) 1x,
                                url(img/test-2x.png) 2x,
                                url(my-img-print.png) 600dpi);
}

//css
.foo {
    background-image: url(img/test.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.foo {
    background-image: url(img/test-2x.png);
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {.foo {
    background-image: url(my-img-print.png);
}
}

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

Например, двойное двоеточие (псевдо), усечение данныхoverflow-wrap, шрифтinitial;

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

Чем более развито, тем совершеннее, чем совершеннее, тем утонченнее и строже

Суммировать

В последнее время металсяreact 16.3+, обнаружил, что все больше людей предпочитают писать css или даже использоватьstyled-component,

Но я хочу использоватьscssНекоторые особенности , поэтому есть эта статья

Проект, который инициализировал проект vue-cli под рукой, был обновлен до webpack4.8.3, и было введено множество вещей, связанных с мобильными устройствами.

Я хотел его вытащить и сделать подмости, но забыл.

Webpack 4.8.3 не так хорош, как ожидалось, можно только сказать, что он стал лучше.

Категории