怎么做企业曝光引流网站,个人工作室如何纳税,花瓣官网设计网站,百度做自己的网站本文是对近两天学习postcss的总结#xff0c;在这里分享给大家。 如有错误#xff0c;还请指正#xff01; 什么是postcss postcss 一种对css编译的工具#xff0c;类似babel对js的处理#xff0c;常见的功能如#xff1a; 1 . 使用下一代css语法 2 . 自动补全浏览器前缀…本文是对近两天学习postcss的总结在这里分享给大家。 如有错误还请指正 什么是postcss postcss 一种对css编译的工具类似babel对js的处理常见的功能如 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem 4 . css 代码压缩等等 postcss 只是一个工具本身不会对css一顿操作它通过插件实现功能autoprefixer 就是其一。 与 less sass 的区别 less sass 是预处理器用来支持扩充css语法。 postcss 既不是预处理器也不是后处理器其功能比较广泛而且重要的一点是postcss可以和less/sass结合使用 关于取舍 虽然可以结合less/sass使用但是它们还是有很多重复功能用其中一个基本就 ok 了。 以下是个人总结 postcss 鼓励开发者使用规范的CSS原生语法编写源代码支持未来的css语法就像babel支持ES6而且高版本的谷歌浏览器已支持部分语法 less、sass 扩展了原生的东西它把css作为一个子集这意味这它比原生更强大但是迟早会和原生的功能重复比如css变量定义高版本的谷歌已经支持再比如js现在的 require 和 import。 可以结合使用 现阶段来说区别不大看个人喜好吧 如何使用 这里只说在webpack里集成使用首先需要 loader 1 . 安装 cnpm install postcss-loader --save-dev
复制代码2 . webpack配置 一般与其他loader配合使用下面*标部分才是postcss用到的 配合时注意loader的顺序从下面开始加载 rules: [{test: /\.css$/,exclude: /node_modules/,use: [{loader: style-loader,},{loader: css-loader,options: {importLoaders: 1,}},{//*loader: postcss-loader}]}
]
复制代码3 . postcss配置 项目根目录新建 postcss.config.js 文件所有使用到的插件都需在这里配置空配置项时配置xx:{} module.exports {plugins: {autoprefixer: {browsers: 5% //可以都不填用默认配置}}
}
复制代码注也可以在webpack中配置 常用的postcss插件 autoprefixer 前缀补全全自动的无需多说 安装cnpm install autoprefixer --save-dev postcss-cssnext 使用下个版本的css语法语法见cssnext (css4)语法 安装cnpm install postcss-cssnext --save-dev 别忘了在postcss.config.js配置postcss-cssnext:{} cssnext包含了 autoprefixer 都安装会报错如下 Warning: postcss-cssnext found a duplicate plugin (autoprefixer) in your postcss plugins. This might be inefficient. You should remove autoprefixer from your postcss plugin list since its already included by postcss-cssnext.
复制代码postcss-pxtorem 把px转换成rem 安装cnpm install postcss-pxtorem --save-dev 配置项 {rootValue: 16, //你在html节点设的font-size大小unitPrecision: 5, //转rem精确到小数点多少位propList: [font, font-size, line-height, letter-spacing],//指定转换成rem的属性支持 * selectorBlackList: [],// str/reg 指定不转换的选择器str时包含字段即匹配replace: true,mediaQuery: false, //媒体查询内的px是否转换minPixelValue: 0 //小于指定数值的px不转换
}
复制代码特殊技巧:不转换成rem px检测区分大小写也就是说Px/PX/pX不会被转换可以用这个方式避免转换成rem 相关资料 官网 cssnext (css4)语法 cssnext 和 css4 并不是一个东西cssnext使用下个版本css的草案语法 自定义属性 相当于一个变量变量的好处显而易见重复使用 1 . 定义 在 :root 选择器定义一个css属性 :root{--mianColor:#ffc001;
}
复制代码2 . 使用 使用 var(xx) 调用自定义属性 .test{background: var(--mianColor);
}/*编译后*/
.test{background: #ffc001;
}
复制代码比如在网站颜色上的使用避免复制粘贴颜色 自定义属性集 一个变量里存了多个属性 1 . 定义 在 :root 选择器定义一个css属性集 :root{--fontCommon:{font-size:14px;font-family: 微软雅黑;};
}
复制代码2 . 使用 使用 apply xx 调用属性集 .test{apply --fontCommon;
}/*编译后*/
.test{font-size:14px;font-family: 微软雅黑;
}
复制代码大小计算 一般用于px rem等的计算 语法cale(四则运算) /*css3*/
.test {width: calc(100% - 50px);
}
/*css4 允许变量*/
:root {--fontSize: 1rem;
}
h1 {font-size: calc(var(--fontSize) * 2);
}/*编译后*/
.test{font-size: 32px;font-size: 2rem;
}
复制代码自定义定义媒体查询 1 . 定义 语法 custom-media xx (条件) and (条件) custom-media --small-viewport (max-width: 30rem);
复制代码另外css4 可以使用 和 代替min-width 、max-width 2 . 使用 media (width 500px) and (width 1200px) {}
media (--small-viewport) {}/*编译后*/
media (min-width: 500px) and (max-width: 1200px) {}
media (max-width: 30rem) {}
复制代码自定义选择器 1 . 定义 语法custom-selector :name selector1, selector2; custom-selector 后必须有空格 custom-selector :--test .test1,.test2;
复制代码2 . 使用 语法:name :--test{color: #fff;
}/*编译后*/
.test1,
.test2{color: #fff;
}复制代码注与伪类使用相互组合 custom-selector :--test .test1,.test2;
custom-selector :--testClass :hover,:focus;
:--test:--testClass{color: #fff;
}/*编译后*/
.test1:hover,
.test2:hover,
.test1:focus,
.test2:focus{color: #fff;
}
复制代码选择器嵌套 支持嵌套后css代码就不那么混乱了而且方便 1 . 直接嵌套 语法 .test { span {color: white;}
}/*编译后*/
.test span {color: white;
}
复制代码2 . 指定如何嵌套 语法nest ... ...,指定位置 a {nest span {color: blue;}
}/*编译后*/
span a {color: blue;
}
复制代码3 . 自动嵌套媒体查询中 媒体查询中自动嵌套到内部 .test {media (min-width: 30rem) {color: yellow;}
}/*编译后*/
media (min-width: 30rem) {.test {color: yellow;}
}
复制代码image-set() 图像依据分辨率设置不同的值 不常使用后续补充 color() 调整颜色 示例使用 color(value alpha(百分比)) 调整颜色 .test {color: color(red alpha(-10%));
}/*编译后*/
.test {color: rgba(255, 0, 0, 0.9);
}
复制代码font-family 新增值 system-ui system-ui 采用所有系统字体作为后备字体 body {font-family: system-ui;
}/*编译后*/
body {font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
}
复制代码更多在官网查看 参考资料官方网站 左手121
