Sass

# 1.CSS3简介 - 前缀 google/safari : -webkit- ie : -ms- firefox : -moz- opera : -o- - 前缀官方网址 参考手册：http://css.doyoe.com 权威网站：http://www.caniuse.com - 预处理器:pre-processor less/sass cssNext插件 cssNext:用来实现一些未来的标准（未完全在各大浏览器实现的功能） - 后处理器:post-processor 后处理器插件 autoprefixer : 可以帮助我们自动添加前缀 - postCss + 插件 （充分体现了扩展性） 用JS实现的css抽象的语法树 AST(Abstract Syntax Tree) 剩下的是留给了后人来做 来源： oschina 链接： https://my.oschina.net/u/4413947/blog/4282731

Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。详情见， https://github.com/postcss/autoprefixer 具体安装和配置： 1.首先当然是安装node.js; （略） 2.安装Autoprefixer， 见 https://github.com/postcss/autoprefixer ： sudo npm install autoprefixer -g 要不要加 sudo ，或者是不是全局安装（ -g ）那就看你自己的环境了。 npm太慢，我是用淘宝的 NPM 镜像的 https://npm.taobao.org/ 3.安装postcss-cli Autoprefixer其实是postcss的插件，见 https://github.com/code42day/postcss-cli sudo npm install postcss-cli -g 4.配置External Tools 打开Webstorm设置，Preferences -> Tools -> External Tools ;点击新增按钮，如图： 填写具体配置，例如我的配置，如图： Program:填入你的postcss

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。 Chrome的实施仍然落后。 使用 :is() 减少重复 你可以使用 :is() 伪类来删除选择器列表中的重复项。 /* BEFORE */ .embed .save-button:hover, .attachment .save-button:hover { opacity : 1 ; } ​ /* AFTER */ :is(.embed, .attachment) .save-button:hover { opacity : 1 ; } 此功能主要在未处理的标准CSS代码中有用。如果使用Sass或类似的CSS预处理程序，则可能更喜欢嵌套。 注意 ：浏览器还支持非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 相似，但限制更多。WebKit在2015年弃用了 :-webkit-any() ，Mozilla已将Firefox的用户代理样式表更新为使用 :is() 而不是 :-moz-any() 。 使用 :where() 来保持低特殊性 :where() 伪类与 :is() 具有相同的语法和功能。它们之间的唯一区别是 :where() 不会增加整体选择器的特殊性（即某条CSS规则特殊性越高

什么是Sass和Less？ Sass和Less都属于CSS预处理器， 那什么是 CSS 预处理器呢？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 转化成通俗易懂的话来说就是“ 用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用 ”。 为什么要使用CSS预处理器？ 作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。 CSS有具体以下几个缺点： 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。 这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器， 提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。 大大提高了我们的开发效率。 但是，CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。

今天进行npm install 出现以下错误： npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.14.1 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2020-05-14T08_03_32_089Z-debug.log 出现原因：估计是家里网络不好下载安装不了，可以使用cnpm（npm淘宝镜像）安装或者手工设置该插件仓库地址 方法1 cnpm install 方法2 npm config set sass_binary_site=https://npm.taobao.org/mirrors

博客原文地址： Claiyre的个人博客 https://claiyre.github.io/ 博客园地址： http://www.cnblogs.com/nuannuan7362/ 如需转载，请在文章开头注明原文地址 前言 众所周知，css是静态语言，虽功能强大，但用起来还是略微不爽，于是便有了动态样式语言，sass和less。动态样式语言的精髓就在于其有了变量，其中的诸多功能都是建立在变量之上的。因此，彻底弄懂sass和less中变量的异同之处，是学好它们的关键！ 本文由浅至深，逐步展开介绍，并从大家所熟知的JS变量的角度，讲述sass和less变量作用域。 正文 sass和less都允许使用变量，且对变量的类型没有限制，这一点和js极为相似，非常灵活。但两者的不同都有哪些呢？ 变量标识符不同 sass中规定，以美元符号 $ 开头的即表示变量，而less中以符号 @ 开头表示变量。这点很容易理解，不再多说。 变量插值方式不同 在两种语言中，变量都可以以一定的方式插入到字符串中去，这个特性极为有用，但两种语言的插入方式不同，具体请看下例： //sass 中 $direction: left; .myPadding{ padding-#{$direction}: 20px; } //less中 @direction: left; .myPadding{ padding-@

关于前端和后端java学习难以程度，以下是我的分享。 难易程度： web前端开发 起点低。容易入门，相对于Java来说，前端对于逻辑思维的要求比较低，所以学习前端也要容易一些，所以你不用担心学不会。很多程序员都是0基础开始学的，而且因为职位所处位置的交叉性，也就有很多Web前端开发人员是转行而来。HTML5前端源于HTML语言发展而来，由于HTML和CSS起点低、容易入门。 java 语言语法简单，但有一定难度 Java语言拥有与C、C++等众多流行语言一样的简洁易懂的关键字、语法，而且是各种后台开发语言中相对比较容易上手的语言。使用Java语言开发诸如服务后台等复杂的应用场景都有简单完美的解决方案。 Java的入门难度在后台开发语言中也是属于比较容易的，但相比前端还是较难 前景 Web前端开发 优势：人才缺口大，发展前景好，需求量大 web前端开发前景大好！其中的HTML5技术更是日趋成熟，HTML5是移动互联网前端的主流开发语言，目前还没有任何一种前端开发技术能够取代HTML5。因此，无论是PC端还是APP端的应用，前端样式都离不开HTML5。基础学习web前端，java，Python思路，附带学习资料 JAVA 优势：全球最流行，就业方向广，选择性多 Java的发展前景都是很乐观的。Java开发语言是全球最流行的开发语言，无论是程序界还是整个互联网行业势必带来很大的影响