精华内容
下载资源
问答
  • PostCss使用

    千次阅读 2020-08-19 00:09:15
    PostCSS 插件使用 PostCSS CLI 2_postcss.css 是源文件, 3_post.css 是生成的文件 全局安装 postcss-cli npm install postcss-cli -g 全局安装 autoprefixer npm install autoprefixer -g 全局安装后,就...

    PostCSS 插件使用

    PostCSS CLI

    2_postcss.css 是源文件, 3_post.css 是生成的文件

    • 全局安装 postcss-cli
    npm install postcss-cli -g
    
    • 全局安装 autoprefixer
    npm install autoprefixer -g                  
    
    • 全局安装后,就可以直接调用如下命令
    postcss 2_postcss.css
    

    全局安装比较方便,下面演示的是本地安装

    如何创建 Node.js 模块

    • 创建 package.json
    # 初始化
    npm init
    
    • 可以在 package.json “scripts” 中添加 post(以后 npm run post 即可)

    添加 scripts

    "scripts": {
        "post": "./node_modules/.bin/postcss 2_postcss.css -o 3_post.css"
    },
    
    • 本地安装 postcss-cli (Windows 终端要切换成 GitBash)
    # 安装 postcss-cli
    npm install postcss-cli
    # 运行检验(终端要切换成 GitBash)
    ./node_modules/.bin/postcss 2_postcss.css
    
    • 第一次运行会出现如下情况,先不用管。是因为没有创建配置文件
    // 没有设置解析器
    You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing
    

    plugins问题

    第一个插件 autoprefixer(格式化/加前缀)

    • 在本地安装 autoprefixer
    npm install autoprefixer
    
    • 新建 postcss.config.js 配置文件,之后添加如下内容
    const autoprefixer = require('autoprefixer');
    module.exports = {
        plugins: [
            autoprefixer({
                browsers:['>0%']
            })
        ]
    };
    
    • 在终端运行一下 npm run post ,运行后又发现新问题(但不影响文件的生成)
    // 版本问题,引用有修改
    Replace Autoprefixer browsers option to Browserslist config.
    Use browserslist key in package.json or .browserslistrc file.
    
    Using browsers option can cause errors. Browserslist config 
    can be used for Babel, Autoprefixer, postcss-normalize and other tools.
    
    If you really need to use option, rename it to overrideBrowserslist
    

    brosers问题

    • 把 browsers 修改为 overrideBrowserslist 即可

      浏览器占比参考:usage-table

      browserslist 使用用法参考:browserslist

    overrideBrowserslist:['>0%']
    

    第二个插件 postcss-import(合并样式表)

    • 在本地安装 postcss-import
    npm install postcss-import
    
    • 新建 4_post.css 增加内容,并让 2_postcss.css 引入@import 4_post.css

    • 修改 postcss.config.js 配置文件

    const autoprefixer = require('autoprefixer');
    const atImport = require('postcss-import');
    module.exports = {
        plugins: [
            atImport,
            autoprefixer({
                overrideBrowserslist:['>=0%']
            }),
        ]
    };
    
    • 在终端运行一下 npm run post 即可

    第三个插件 cssnano(压缩代码)

    • 在本地安装 cssnano
    npm install cssnano 
    
    • 修改 postcss.config.js 配置文件
    const cssnano = require('cssnano');
    module.exports = {
        plugins: [
            cssnano 
        ]
    };
    
    • 在终端运行一下 npm run post 即可

    第四个插件 cssnext

    • 在本地安装 postcss-cssnext
    npm install postcss-cssnext
    
    • 2_postcss.css 添加如下代码

      cssnext 只支持用 :root 定义变量

      @apply 类似 mixin

    :root{
        --mainColor: red;
        --danger-theme:{
            color: white;
            background-color: red;
        };
    }
    a{
        color: var(--mainColor);
    }
    .danger{
        @apply --danger-theme;
    }
    
    • 修改 postcss.config.js 配置文件
    const cssnext = require('postcss-cssnext');
    const cssnano = require('cssnano');
    module.exports = {
        plugins: [
            cssnext,
            cssnano
        ]
    };
    
    • 在终端运行一下 npm run post 即可

    第五个插件 precss

    • 变量

    • 条件(if)

    • 循环

    • Mixin Extend

    • import

    • 属性值引用

    • 在本地安装 precss

    npm install precss
    
    • 2_postcss.css 添加如下代码
    $blue: #056ef0;
    $column: 200px;
    .menu {
        width: calc(4 * $column);
    }
    .menu_link {
        background: $blue;
        width: $column;
    }
    .notice--clear {
        @if 3 < 5 {
            background: green;
        } @else {
            background: blue;
        }
    }
    @for $i from 1 to 3 {
        .b-$i {
            width: $(i) px;
        }
    }
    
    • 修改 postcss.config.js 配置文件
    const precss = require('precss');
    module.exports = {
        plugins: [
            precss,
        ]
    };
    
    • 在终端运行一下 npm run post 即可

    PostCSS 支持的构建工具(Gulp)

    • CLI 命令行工具

    • webpack postcss-loader

    • Gulp gulp-postcss

    • Grunt grunt-postcss

    • Rollup rollup-postcss

    • 在本地安装 gulp-cli 、 gulp 和 gulp-postcss

    npm install gulp-cli
    npm install gulp
    npm install gulp-postcss
    
    • 创建 gulpfile.js 添加如下代码
    const gulp = require("gulp");
    const autoprefixer = require("autoprefixer");
    const atImport = require("postcss-import");
    
    // 指定任务名为 postcss
    gulp.task("postcss", function () {
        var postcss = require("gulp-postcss");
        // 指定源文件来自 2_postcss.css
        return gulp
            .src("2_postcss.css")
            .pipe(
                postcss([
                    atImport,
                    autoprefixer({
                        overrideBrowserslist: [">=0%"],
                    }),
                ])
            )
            .pipe(gulp.dest("3_post"));
    });
    
    • 在终端运行一下 gulp postcss 即可
    展开全文
  • postcss使用

    千次阅读 2019-08-16 16:34:14
    postcss:它将CSS转换成抽象语法树(AST),也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS,它请允许插件执行和转换你的代码。Postcss...

    postcss:它将CSS转换成抽象语法树(AST),也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS,它请允许插件执行和转换你的代码。Postcss不是预处理器,不是后处理器,不是新语法,而是通用平台,适用于各种css相关的插件,旨在更加方便,快捷,舒适的编写css。

    1. h5移动端屏幕适用性解决方案
    cssnano用来优化和压缩css,注意cssnano中包含autoprefixer
    postcss-aspect-ratio-mini容器比匹配
    postcss-cssnext进行嵌套编程
    postcss-px-to-viewport将px装换为vw,以适应各种屏幕
    postcss-write-svg1px细线的绘制
    module.exports = {
      "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "postcss-aspect-ratio-mini": {},
        "postcss-write-svg": { utf8: false },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
          viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
          viewportHeight: 667, // (Number) 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置著作权归作者所有。
          unitPrecision: 5, // (Number) 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
          viewportUnit: 'vw', // (String) 指定需要转换成的视窗单位,建议使用vw
          selectorBlackList: ['.ignore', '.hairlines'], // (Array) 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
          minPixelValue: 1, // (Number) 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
          mediaQuery: false // (Boolean) 允许在媒体查询中转换`px`
        },
        "cssnano": {
          preset: "advanced",
          autoprefixer: false,
          "postcss-zindex": false
        }
      }
    }

    2.postcss界面嵌套css样式写法

    postcss-importimport
    postcss-urlurl
    postcss-bem元素规则命名
    postcss-nested嵌套
    postcss-preset-env变量 运算 
    postcss-simple-vars变量

    参考资料

    1. https://www.w3cplus.com/preprocessor/postcss-and-crazy-things-you-can-do-with-it.html
    2. https://www.w3cplus.com/mobile/vw-layout-in-vue.html
    3. http://ju.outofmemory.cn/entry/341641
    展开全文
  • PostCSS使用教程

    2018-09-23 21:27:08
    PostCSS是一个javascript转换CSS的工具,有了它可放心使用CSS未来的语法等 增加代码的可读性:可自动添加属性前缀 可使用最新的CSS语法,如变量定义 可模块化CSS,CSS Modules 可检查CSS语法错误,避免出错 强大...

    PostCSS是一个用javascript转换CSS的工具,有了它可放心使用CSS未来的语法等

    1. 增加代码的可读性:可自动添加属性前缀
    2. 可使用最新的CSS语法,如变量定义
    3. 可模块化CSS,CSS Modules
    4. 可检查CSS语法错误,避免出错
    5. 强大的格子系统LostGrid

    CSS部分基础知识:

    1 CSS 变量声明:变量名前加两根半角中划线-,变量大小写敏感!

    --text-size:14px;
    注意:14px 没有 ‘’ 不是定义的字符串
    

    2 var()函数:读取变量,如果没有可以设置默认值。仅作为属性值读取

    font-size:var(--text-size);
    或者:
    font-size:var(--text-size,16px);
    表示:如果没有读取到数值,默认的是16px
    

    3 变量类型:纯数字/纯字符串/带单位的数字

    纯数字:
    --gap:20;
    带单位:
    --gap:20px;
    纯字符串:
    --gap-text:'hello'
    
    字符串拼接:
    --bar:'hello';
    --foo:var(--bar)' world';
    数字与字符串拼接:
    .foo{
    	--gap:20;
    	/*无效*/
    	margin-top:var(--gap)px;
    	/*正确*/
    	margin-top:calc(var(--gap)*1px);
    }
    有单位的写法:
    /* 无效 */
    .good{
    	--foo:'20px';
    	font-size:var(--foo)
    }
    /*有效*/
    .good{
    	--foo:20px;
    	font-size:var(--foo)
    }
    

    4 css 作用域
    内联>ID>class>元素>全局(根)
    例子:

    style:
    :root{--color:blue;}
    div{--color:green;}
    #uid{--color:red}
    *{color:var(--color);}
    
    html:
    <span>蓝色</span>
    <div>绿色</div>
    <div id="#uid">红色</div>
    

    5 响应式布局

    --color:red;
    @media screen and (min-width:768px){
    	--color:red;
    }
    
    

    6 javascript 操作

    // 设置变量
    document.body.style.setProperty('--color':'red');
    // 读取变量
    document.body.style.getProperty('--color').trim()
    // 删除变量
    document.body.style.removeProperty('--color')
    
    展开全文
  • PostCSS 是一个允许使用 JS 插件转换样式的【工具】 autoprefixer 添加了 vendor 浏览器前缀的【插件】 PostCSS 文档:https://github.com/postcss/postcss/blob/main/docs/README-cn.md PostCSS Github: ...

    PostCSS 是一个允许使用 JS 插件转换样式的【工具】

    autoprefixer 添加了 vendor 浏览器前缀的【插件】

    PostCSS 文档:https://github.com/postcss/postcss/blob/main/docs/README-cn.md

    PostCSS Github: https://github.com/postcss/postcss

    安装

    npm i postcss autoprefixer
    

    Node.js使用代码实例

    // 引入工具和插件
    const Postcss = require("postcss");
    const Autoprefixer = require("autoprefixer");
    
    
    // 设置插件
    const processor = Postcss([Autoprefixer]);
    
    // 处理css
    const css = `
    .box{
        transform: scale(0.5);
    }
    `;
    
    processor.process(css, { from: undefined }).then(result => {
      result.warnings().forEach(warn => {
        console.warn(warn.toString());
      });
    
      console.log(result.css);
    });
    
    /*
    输出:
    .box{
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
    }
    */
    
    
    展开全文
  • 第一小节讲了browserslist的作用,接下里讲Postcss 这个插件有什么呢? 1 可以通过js来转换css样式如适配,加前缀,css的重置等等 2 postcss本身功能很少,需要借助其他插件。 如何使用呢? 1 查找postcss工具的...
  • PostCSS使用

    2019-12-03 16:11:04
    postcss使用
  • postcss-cssnext已弃,而支持postcss-preset-env 在了解更多 postcss-cssnext PostCSS插件可在今天使用明天CSS语法。 PostCSS-cssnext是一个PostCSS插件,可帮助您使用当今的最新CSS语法。 它将CSS规范转换为更...
  • 套索插件可使用PostCSS转换CSS。 重要信息:Lasso当前每个组件都运行转换,而不是全局运行一次。 这个插件对于处理语法(例如嵌套选择器)很有用,但是强烈建议在套索处理之后进行最小化。 用法 1.安装插件和依赖...
  • 使用PostCSS在HTML中的<style>标记和内联style=属性中处理CSS。 用法 var HTMLPostCSS = require ( 'html-postcss' ) ; var processor = new HTMLPostCSS ( plugins ) ; processor . process ( htmlString ,...
  • Ember CLI Postcss 使用处理带有大量CSS 。 安装 ember install ember-cli-postcss 兼容性 由于Postcss V8的插件API发生了更改,因此在升级Postcss后需要更新某些插件。 这应该像将软件包从v6更新到v7一样简单,...
  • postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
  • Postcss

    2021-01-12 13:42:32
    Postcss一、了解Postcss1.安装2.对文件进行转换3.postcss配置文件二、postcss常用插件1.安装插件2. autoprefixer 浏览器前缀插件3.poscss-import 引入合并css4. cssnano 对css压缩5.postcss-cssnext6.stylelint 语言...
  • postcss

    2019-08-06 14:16:17
    postcss是一个 JavaScript 工具和插件转换 CSS 代码的工具 官网:https://www.postcss.com.cn/ 常用插件: autoprefixer //自动添加浏览器兼容前缀 postcss-pxtorem //px转rem cssnano //css压缩 postcss-...
  • tcomb-postcss 不可约节点类型扩展库。 以下类型已添加到tcomb: 用法 var t = require ( 'tcomb-postcss' ) ; var postcss = require ( 'postcss' ) ; var root = postcss . parse ( 'a{}' ) ; t . Root . is ...
  • 尝试使用 PostCSS 来解决问题。 设置和安装 依赖关系 grunt - 使用npm install grunt-cli -g 安装 从 git git clone https://github.com/fabean/postcss-example.git 。 cd 进入项目目录cd postcss-example 。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 220,324
精华内容 88,129
关键字:

postcss怎么用