CSS-Next : CSS預處理器簡單寫法的替代者, 想了解下麼?

時間  2019-11-17
標籤 css 預處理 簡單 寫法 替代 想了 解下 欄目 CSS 简体版
原文   原文鏈接

前言

CSSNEXT: 能夠理解爲 CSS 3+,雖然不必定全部特性都成爲正式標準;javascript

藉助相關的插件咱們能夠把新的特性降級主流瀏覽器能夠識別的狀態(好比CSS3模擬）css

但裏面的一些特性,折騰了下發現基本能夠知足開發了(代替CSS預處理器SASS,LESS);html

由於大多數人用預處理器最多的幾個特性無非以下: 繼承,嵌套寫法, 全局變量,計算顏色vue

固然,這不是說sass/less 不夠好,相反它們能夠作更多複雜的工做,邏輯運算和條件判斷這些;java

若你只是用到一些常規特性,那就能夠放心大膽的用了;react

藉助webpack 開發的小夥伴基本能夠搞起;其餘構建工具也能夠的,好比gulp,webpack

webpack 相關的依賴

如果用 Vue且用vue-cli初始化的腳手架,只要在 style的 lang 屬性指明爲postcss便可css3

如果本身搭建腳手架的..大致的配置也這麼些git

常規解析 : style-loader < css-loader < postcss-loader < sass/less loader;github

常規配置

  • 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 的 mixin?

// 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;
}

複製代碼

顏色計算,通常定製主題或者 UI 規範的會考慮..

同理,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);
}
}

複製代碼

還有一些特性我感受並不經常使用,

好比雙冒號(pseudo),數據的截斷overflow-wrap , 字體的initial;

只能說你要規範化寫,也能夠用這些特性,畢竟無論什麼什麼規範,

愈加展越完善,越完善越細化和嚴謹

總結

最近在折騰 react 16.3+,發現更多人的是偏向於寫 css乃至用 styled-component,

可是本身又想用scss 的部分特性,因而就有了這篇文章

把手頭項目 vue-cli 初始化的項目.升級到了 webpack4.8.3 , 引入了一堆移動端相關東東。

本想抽離出來作一個腳手架,想一想仍是算了

webpack 4.8.3的不如期待那般美好，只能說有所提高。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程