postcss

Sass是一种CSS预处理语言。 首先要了解什么是CSS预处理器？ CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。 CSS预处理语言有Scss(Sass) 和Less、Postcss。 那么Scss和Sass有什么区别呢？ Sass 有两种语法规则(syntaxes)，目前新的语法规则（从 Sass 3开始）被称为 “SCSS”，它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别称为缩进语法（或者 Sass），它受到了Haml的简洁精炼的启发，它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号、分号，它使用行缩进的方式来指定css 块，虽然sass不是最原始的语法，但是缩进语法将继续被支持，在缩进语法的文件以.sass为拓展名。 特性概览： CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过Sass预处理器进行CSS的开发，Sass提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。 Scss的使用语法： ·注释： 注释分为三种：/* */css中显示，/

暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。 之前做不同颜色的皮肤，暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法，就是less、sass、post-css，把颜色抽离出变量。然后打包输出不同的样式，即： CSS预处理直接生成多套主题样式 利用Less，stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpack等工具输出多套主题样式 页面加载后，根据用户需求加载不同的样式列表 推荐阅读《 webpack 换肤功能多主题/配色样式打包解决方案 》，配置文件： https://github.com/hiyangguo/webpack-mutiple-theme-bundle-css-demo/blob/master/webpack.config.js 这里是以less 为例，sass 配置，稍微修改即可，这里就不做赘述了，google应该都可以搜索得到，推荐这篇也是顺手搜的 这种方式在bootstrap时代就流行开来，那时候还用过php编译less，以及java编译：java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css webpack

像软件加密与解密一样，javascript的混淆与解混淆同属于同一个范畴。道高一尺，魔高一丈。没有永恒的黑，也没有永恒的白。一切都是资本市场驱动行为，现在都流行你能为人解决什么问题，这个概念。那么市场究竟能容纳多少个能解决这种问题的利益者。JS没有秘密。 其实本人不赞成javascript进行hash混淆处理，一拖慢运行时速度，二体积大。JS代码前端可获取，天生赋予“开源”属性，都可以在chrome devTools下查看。JS非压缩性混淆完全违法前端优化准则。 目前网络上可以搜索的JS混淆工具不外乎以下几种： eval混淆 ，也是最早JS出现的混淆加密，据说第一天就被破解，修改一下代码，alert一下就可以破解了。这种方法从出生的那天就失去了意义。其实JS加密（混淆）是相对于可读性而言的，其实真正有意义的就是压缩型混淆uglify这一类，即可减少体重，也可减少可读性。 但是，也不能排除部分商业源代码使用hash类型混淆源代码，比如 miniui 使用的 JSA加密 , fundebug使用的 javascript-obfuscator 。 下面通过代码来说明 JSA加密 和 javascript-obfuscator 的区别： 要混淆的代码： function logG(message) { console.log('\x1b[32m%s\x1b[0m', message); }

一.前言 webpack配置较为繁杂，大部分教程开篇就从基本术语开始讲起，容易让人望而生畏。so，我已实用为目的写了这篇文章。 项目地址 github 码云 二.目标 <input type="checkbox" checked disabled>支持热替换 <input type="checkbox" checked disabled>支持scss，自动添加前缀 <input type="checkbox" checked disabled>支持eslint <input type="checkbox" checked disabled>支持babel <input type="checkbox" checked disabled>支持图片压缩 <input type="checkbox" checked disabled>支持多js入口，多html模板 三.搭建环境 创建 package.json 文件 npm init -y 首先，安装 webpack，webpack-cli 和 cross-env npm install --save-dev webpack webpack-cli cross-env 其中 cross-env 主要是用于比较方便的跨平台设置 process.env.NODE_ENV ,用于区分开发环境和生产环境。 新建目录src，目录下创建index

前言 前段时间，laravel更新8.0版本，系统内置的Jetstream应用支架使用的是Tailwind CSS，于是勾起了我对Tailwind CSS的兴趣。 后来项目中也是逐步使用，总体感觉超级爽。就像他的简介一样Utility-First效用优先的CSS框架。 相比bootstrap，semantic ui antd这些组件库，tailwind只是个css库，简单的说就是可以完成任何ui交互，而上面的组件库一般就是做个后台应用，所以使用tailwind的环境更广泛一些。 几个亮眼的地方 首先是响应式设计。 css的媒体查询写起来还是比较麻烦的，如下： @media only screen and (max-width: 760px) { .navbar { width:100%; } } **使用了Tailwind CSS就免去这些繁琐的东西。**默认情况下，Tailwind使用移动优先断点系统，类似于您在Bootstrap或Foundation中可能使用的系统。 这意味着未加前缀的实用程序（如uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。 如下一段代码就可以实现不同尺寸显示不同样式，是不是比媒体查询写法方便很多呢！ <div class="bg-red-500 sm:bg-green-500 md