Sass和Less（预处理器） 一、了解Sass和Less 二、Sass和Less 语法 2.1 注释 2.2 语法 赋值 插值 作用域 选择器嵌套、伪类嵌套、属性嵌套（Sass） 运算 函数 混合、命名空间...Less文件以.less结尾，Sass文件新版的以.scss结尾，老版的以.sass结尾。 Less文件和Sass文件都会生成css文件。...图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。减少复杂的编译选择器代码。...伪类嵌套，需要在伪类的冒号前面加&，不然会有空格。 属性嵌套只有在Sass中有，Less没有。...} a{ background: azure; // & 父类元素选择器，添加伪类选择器 &：hover{
配置预选项： 后来后悔自己加上Linter/Formatter了 ? 选版本号：3.x ? 选css扩展语言：dart-scss 《为什么选dart-scss？》...dart-scss比node-scss快很多（node-scss基于ruby的，运行速度很慢） 后续更新的功能也都加到了dart-scss中，是在一直维护、最新的了。 ?...解决方案： 切换镜像重新安装NPM包依赖 比如，更新npm：npm i -g npm 把package-lock.json锁文件删掉 重新安装（这里应该就可以了，不可以继续走下边） 安装后把警告解决一遍...index.js // 单组件入口 - index.js // 入口 - style // 组件样式 - common // 公共样式 - mixins // 混合方法 - button.scss
目录 常用命令 变量 嵌套css规则 群组选择器 子选择器，相邻，同级选择器 属性嵌套 import导入 嵌套导入 sass注释 sass乱码解决 常用命令 sass 命令 sass input.scss...15px; } #main .left { float: left; } #main .left ul li { color: red; } 但是上面这种方式不能正常添加伪类...//实际编译的结果 article a{ color:red; } article a :hover{ color:blue } 可以看到实际编译的结果a与伪类选择器中间多了一个空格 表示的是...这与我们最初预料的结果不一致 测试 324 解决办法：给伪类元素加一个...default; 嵌套导入 sass还支持嵌套导入，在代码块中导入 //a.scss .a{ color:red } //b.scss .b{import "a.scss"} //编译b.scss
父选择器 & 在 CSS 中，基本选择器分为以下几种： ID 选择器，如 #id 类选择器，如 .class 标签选择器，如 div、p 属性选择器，如 [lang='en'] 伪类选择器，如 a:hover...、div:first-child 伪元素选择器，如 p::before、p::after 其中，伪类和伪元素选择器需要与别的选择器复合使用，以确定是哪些元素的伪类或伪元素。...因此，如果 @import 导入的资源位置在嵌套层级中，那么： 资源中的变量只在当前层级中可用 资源中的选择器在编译时会带上父级前缀 // _source.scss $width: 10px; p {...color: red; font-size: 14px; } // index.scss @import '_source'; $width: 20px; .outer { width...outer .inner { width: 10px; } .outer .inner p { color: red; font-size: 14px; } 在使用 @import 导入文件时，可以不写 .scss
steelblue; } button.active, button.pressed { color: lightsteelblue; } :where() :where() 是一个与 :is() 非常相似的伪类...:has() 一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。...所以我们可能很快就会看到一个非常像 scss 的嵌套语法。...浏览器支持 目前所有主流浏览器都支持 :is() 和 :where() 伪类: 但是，需要注意，我们在这里提到的 :has() 伪类没有相同级别的支持，所以使用 :has() 时要小心:
目录标题 一、Less、Sass/Scss是什么?...二、less和sass的相同之处 三、less和sass的区别 在介绍less和sass的区别之前，我们先来了解一下他们的定义： 一、Less、Sass/Scss是什么?...Sass与Scss是什么关系?...：选择器嵌套，属性嵌套，伪类嵌套 选择器嵌套 ul{ li{} } 后代 ul{ >li{} } 子代 &:表示上一层 div{ ul{ li{ &==“div ul li” } } } 属性嵌套...：属性名与大括号之间必须有: 例如:border:{color:red;} 伪类嵌套：ul{li{ &:hover{ “ul li:hover” } } } (4)、混合宏、继承、占位符 ①混合宏：声明
steelblue;}button.active, button.pressed { color: lightsteelblue;}:where():where() 是一个与 :is() 非常相似的伪类...:has()一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。...所以我们可能很快就会看到一个非常像 scss 的嵌套语法。...浏览器支持目前所有主流浏览器都支持 :is() 和 :where() 伪类:图片但是，需要注意，我们在这里提到的 :has() 伪类没有相同级别的支持，所以使用 :has() 时要小心:图片
Linter 假设我们的 Linter 名字是 MyLinter。 MyLinter 是一个自顶向下的架构。 对任何语言来说，该语言的 Linter 就是一个输入代码文本，输出诊断的函数。...Architecture MyLinter MyLinter 是一个抽象类，定义了三种操作： 给定文件夹及其他必要信息，对指定文件夹内某一种语言的所有文件进行检查并返回结果 给定代码文本、文件名及其他必要信息...ECMAScriptLinter ECMAScriptLinter 是 ESLinter 的派生类，同时也是 JavaScriptLinter 和 VueLinter 的基类，在这一层中提供了无差别的针对...SCSSLinter SCSSLinter 基于 StyleLinter，提供了支持 SCSS 语法的 Linter。...引擎需要准备 Linter 的实例，并负责： 按照顺序调度 Linter 检查指定文件夹 将单个文件的诊断请求分配到合适的 Linter 执行并返回诊断结果 将单个文件的自动修复请求分配到合适的 Linter
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题 解决的问题 嵌套规则：通过花括号的方式解决复杂的css父子样式嵌套问题。...： nav { a { color: red; header & { color:green; } } } 属性嵌套 Sass 中还提供属性嵌套，CSS...red; bottom: 1px solid green; } } 字体大小 .box { font: { size: 12px; weight: bold; } } 伪类嵌套...其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。...继承@extend Sass中是通过关键词 @extend来继承已存在的类样式块，从而实现代码的继承。
和其他属性一样，自定义属性也是写在规则集之内的，如下：element { --main-bg-color: brown;}所定义自定义属性需要在其可见作用域内（即被嵌套的标签内使用），通常的最佳实践是定义在根伪类...备用值嵌套：var()本身可以作为第二个值进行无限嵌套 .three { background-color: var(--my-var, var(--my-background, pink));...:root 伪类:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 \ 元素，除了优先级更高之外，与 html 选择器相同。...与Less和Sass变量的区别声明LESS用@符号，SCSS用$符号表示@link-color:#000@main-top : search;$to-color:#000$main-top : search...;使用不同于CSS，声明变量以“插值”的形式使用，并且不但可以表示为数值，文本嵌入表达式，还可以作为类名、属性名等。
相对于后端，前端代码规范的质量检查涉及到HTML, CSS，Javascript ，如今还涉及到SCSS，ES5，JSX, React，Vue，Angular等，更是复杂。...笔者对常见的代码检查工具做了一番调研，结合规则支持度，配置方式，在编辑器Sublime于Webstrom这只IDE上的支持度，在webpack打包的支持，最终确立了使用如下方案 HTML / tpl: HTMLHint CSS / SCSS...// 文件最后一行必须有一个空行 // @error 应该在文件末尾保持一个换行 'eol-last': 'error', // 代码块嵌套的深度禁止超过...', // 函数的参数禁止超过10个 // @warn 警示即可 'max-params': ['warn', 10], // 回调函数嵌套禁止超过...'react/no-string-refs': 'warn', // 必须使用 Class 的形式创建组件 // @warn 警告即可
ps：如果有npm WARN警告，可能是coffee-script的某个依赖包改名了（coffee-script本身已经淘汰了）。...Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ?...Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > SCSS/SASS...// Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能） LESS // Less最终会通过编译处理输出css到浏览器...Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb
（Vue有配套的第三方类库，可以整合起来做大型项目的开发） 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果； 为什么要学习流行框架?...企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱； 企业中，使用框架，能够提高开发的效率； 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 ->...在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!...(with dart-sass) ❯ Sass/SCSS (with node-sass) Less Stylus Vue...Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default ): Sass/SCSS
1.Sass和SCSS的区别。 ...文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(...;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 ...Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套 例如：在css 会这样写 nav a { ...-属性嵌套 Sass中提供属性嵌套，css有一些属性前缀相同。
简单来说在mixin或者function内部，我们可以通过@warn操作符给用户提示一些警告内容输出在控制台。...比如一个文件夹两个 scss 文件，一个 root.scss,一个 _vars.scss。...global全局声明 变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !...默认使用@at-root不传递任何时，他的作用为跳出选择器的作用域嵌套，当然可以传递参数去使用。...需要主要的是:scope伪类在css中已经不被大多数浏览器支持，甚至已经废弃。但是在js这些方法中仍然被主流浏览器支持。
路由配置 │ ├── stores 状态管理 │ ├── typings ts公共类型 │ ├── utils 工具类函数封装...drop_debugger: true // 生产环境去除 debugger }, }, chunkSizeWarningLimit: 1500 // chunk 大小警告的限制...（以 kbs 为单位） } 复制代码 接入代码规范 ESlint 被称作下一代的 JS Linter 工具，能够将 JS 代码解析成 AST 抽象语法树，然后检测 AST 是否符合既定的规则。...typescript-eslint，提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等 使用 scss...来增强 css 的语法能力 yarn add sass yarn add stylelint yarn add stylelint-scss 复制代码 接入naive ui库 Naive UI 是尤大推荐的
类 SCSS 的语法 5. JS 带来的动态性 6. 绑定组件的全局样式 7. Theme 机制及 Theme 对象的设计 8. 提升开发体验 9....内联 CSS 不支持复杂的样式配置, 例如伪元素, 伪类, 动画定义, 媒体查询和媒体回退(对象不允许同名属性, 例如display: -webkit-flex; display: flex;) 内联样式通过...不方便调试和阅读 … 所以 内联 CSS 适合用于设置动态且比较简单的样式属性 社区上有许多 CSS-in-js 方案是基于内联 CSS 的, 例如 Radium, 它使用 JS 添加事件处理器来模拟伪类...不过不是所有东西都可以通过 JS 模拟, 比如伪元素....; // 伪类 &:hover { background: palevioletred; } // 提供样式优先级技巧 &&& { color: palevioletred
blue; } .button-secondary { background-color: green; } /*# sourceMappingURL=index.css.map */ 结合 & 和伪类选择器...button.large { font-size: 20px; } /*# sourceMappingURL=index.css.map */ 使用 &::before 或 &::after 定义伪元素的样式...避免与其他选择器冲突 占位符选择器的命名以 % 开头，与常规的 CSS 类选择器不同。这样可以避免与其他选择器冲突，减少样式命名的可能性。...index.css.map */ ③ Sass 代码注释 ✅ 多行注释 /* 多行注释 */ 单行注释 // 单行注释 ④ Sass 变量 ✅ 4.1 css 中变量的定义与使用 /* `:root` 伪类选择器用于选择文档根元素...当规则块嵌套时，内部规则块可以访问外部规则块的变量，但外部规则块无法访问内部规则块的变量。
嵌套 tree-shaking 如下，在 webpack4 中 a、b 都会被打包进 bundle 中，webpack5 会对嵌套的无用代码也会删除掉，也就是说 b 并不会被打包进 bundle 中了，...(api.resolve("tsconfig.json")); const linter = new tslint.Linter(options, program); const updateProgram...= linter.updateProgram; linter.updateProgram = function(...args) { updateProgram.call(this, .....const filePath = api.resolve(file); const isVue = isVueFile(file); patchWriteFile(); linter.lint.../src/global/*.scss")] } } } 使用 └──── src │── global │ │── index.less │ └── index.scss
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
