三、不要使用 @import 3.1 不用原因 与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。...五、带前缀的属性 5.1 垂直对齐 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。 5.2 Example ?...过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。 7.3 Example ? 八、Less 和 Sass 中的嵌套 8.1 尽量不嵌套 避免不必要的嵌套。...这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。 8.2 Example ?...（6）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。 在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。
这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。 ?...五、带前缀的属性 5.1 垂直对齐 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。 5.2 Example ?...过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。 7.3 Example ? 八、Less 和 Sass 中的嵌套 8.1 尽量不嵌套 避免不必要的嵌套。...这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。 8.2 Example ?...（6）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。 在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。
提交逻辑 ：可以像高级语言一样编写逻辑性的css代码 Sass 和 SCSS 区别 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，...在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。...header nav a { color:green; } 那么在 Sass 中，就可以使用选择器的嵌套来实现： nav { a { color: red; header...其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。...，带有多个参数，这个时候可以使用“ … ”来替代。
嵌套规则 &标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。...article a { color: blue; &:hover { color: red } } 群组选择器的嵌套: 多个子选择器拥有公共父选择器,并且需要给子选择器设置通用属性的情况...）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。...选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。...嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
五、Sass嵌套--选择器的嵌套 选择器嵌套功能并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。...选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法， Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套 （1）选择器嵌套 示例： 假设我们有一段这样的结构...，带有多个参数，这个时候可以使用"..."...， Sass 中的数学运算——乘法 Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。...+ 8px/2px; //使用了加(+)号，是除法运算。
SASS使嵌套/分组CSS选择器和构建样式表变得更加容易 Sass通过在其中嵌套CSS类或选择器并在后台生成CSS使其成为可能。...现在如果你用sass来做这件事，它看起来是这样的： 上面的示例展示了SASS如何通过使用（＆）将CSS选择器串联在（{}）中来嵌套几个选择器。.../类中的父子关系分组，就像您进行选择器连接的方式一样，只是添加了一个与号(&)，您只需多加几个括号就能完成。...对选择器分组并创建嵌套选择器时简直轻而易举，因为Sass自动的帮我们完成了大量的工作。我可以毫不夸张的说我比使用纯CSS设置样式快了2倍。总体的感觉就是“真香”。...您可以使用Mixins将CSS代码段重用到其他选择器 您不仅可以轻松地用更少的代码嵌套CSS选择器，而且可以重用一些代码片段来解决整个UI中的某些CSS问题。 Mixins可以帮助您做到这一点。
很早之前，就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？...CSS 原生嵌套语法 在之前，只有在 LESS、SASS 等预处理器中，我们才能使用嵌套的写法，像是这样： div { & > p { color: red; }...如果我们不使用具体的 ClassName，而是使用标签名称选择器，像是这样： div { border: 1px solid #000; h3 { color:...SASS 等类似，& 符号在嵌套中，也表示嵌套的父选择器本身，因此，上面两个嵌套选择器最终的表达式实则为： div h3 { color: red }; div h3 span { color blue...使用嵌套规则的好处在于： 更加易读和易维护，嵌套帮助我们编写更易于维护的 CSS，基于嵌套，我们可以更好的控制样式的作用域 更少的代码，嵌套帮助我们编写更少的代码，因为我们不需要一遍又一遍地重复父选择器
类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。....listing-card--featured 是一个修饰符（modifier），表示这个块与 .listing-card 有着不同的状态或者变化。...Bad .foo { border: none; } Good .foo { border: 0; } Sass 语法 使用 .scss 的语法，不使用 .sass 原本的语法。...扩展指令 应避免使用 @extend 指令，因为它并不直观，而且具有潜在风险，特别是用在嵌套选择器的时候。即便是在顶层占位符选择器使用扩展，如果选择器的顺序最终会改变，也可能会导致问题。...} } } 当遇到以上情况的时候，你也许是这样写 CSS 的： 与 HTML 强耦合的（也是脆弱的） —或者— 过于具体（强大） —或者— 没有重用 再说一遍: 永远不要嵌套 ID 选择器！
[TOC] (1) HTML编码规范 用两个空格来代替制表符（tab），嵌套元素应当缩进一次（即两个空格）; 属性的定义确保全部使用双引号，绝不要使用单引号 不要省略可选的结束标签（closing tag...可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）--> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题; (解决办法:使用多个 元素,通过 Sass 或...当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。...Less 和 Sass 中避免非必要的嵌套; 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
Sass与Scss是什么关系?...三、less和sass的区别 Less和Sass的主要不同就是他们的实现方式。 Less是基于JavaScript，是在客户端处理的。 Sass是基于Ruby的，是在服务器端处理的。...中的代码结构 ①嵌套默认是后代选择器，如果需要子代选择器，则在子代前加> ②....： (1)、Sass中的变量 使用 $变量名：变量值，声明变量； 如果变量需要在字符串中嵌套，则需使用#加大括号包裹； border-#{$left}:10px solid blue; (2)、Sass...中的运算，会将单位也进行运算，使用时需注意最终单位 例：10px10px=100pxpx (3)、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套 选择器嵌套 ul{ li{} } 后代 ul{
SASS优点可以简单的规纳为以下几点： 增加了一些编程特性 简少CSS代码的重复性与代码的冗余 维护方便 适应性更强，可读性更强 代码从层次不清楚？css不够灵活？开发繁杂而痛苦？...使用 俗话说，简单的才是最好的，SASS其实就是一普通的文本文件，支持CSS的所有格式，当然后缀名不同哦，他的后缀名是.scss，意思为Sassy CSS。...嵌套 SASS允许选择器嵌套。...在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成： a { &:hover { color: #ffb3ff; } } 4 注释 SASS共有两种注释风格。...继承 当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法。 SASS允许一个选择器，继承另一个选择器。
Sass 提供了嵌套的书写方式，用以简化选择器的书写，同时也带来了“作用域”。...嵌套 选择器嵌套 在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。...元素只要满足群组中任何一个选择器，都会使用群组对应的样式进行渲染，如 a, span, label { color: grey; } 在 Sass 中，我们可以使用嵌套的形式来简写群组。...变量作用域 在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。...Sass 媒体查询的好处： 以前使用原生 CSS 做响应式布局时，我们需要先写好不同的媒体查询区块，整理出元素在不同设备的特殊样式，然后写入对应的区块。
嵌套(Nesting) sass 的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。...选择器嵌套 所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了 sass 文件的结构性和可读性。...@at-root sass3.3.0 中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。...除此之外还可以选择性的传入参数，使用参数名与值同时传入。...继承 sass 中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend ，后面紧跟需要继承的选择器。
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...& (Referencing Parent Selectors: &) 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。...继承(扩展) 11.1 基本继承 sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。...导入文件 Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
选择器的嵌套 和普通的css代码相比，scss允许我们进行选择器的嵌套。这样有利于我们更好的组织代码。 选择器的嵌套可以使代码更加直观，同时也可以将继承关系表现的更加清晰。...html的层级结构去计算css的属性值，仔细想一想，我们写的嵌套的选择器，其实就是这么回事儿。...占位符选择器和常用的类选择器以及ID选择器除了是以百分号%开头之外，没有其他区别。...为了让我们的css代码重用性更好，我们需要尽量的做到模块儿化，同时需要尽量减少sass的嵌套层数。...因为sass-lint检查到嵌套层数超过3层就会提示报错。 多层级的嵌套一方面在渲染时可能会消耗一定的性能，即影响sass的编译速度，也影响界面的渲染速度。
，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。...@media Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。...如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。...它可以与单个内联选择器一起使用 且@at-root 使多个规则跳出嵌套 @at-root 默认情况下并不能使规则或者选择器跳出指令，通过使用 without 和 with 可以解决该问题 了解即可 #...@for 循环语句 表达式：@for var from through 或 @for through 和 to 的相同点与不同点： 相同点：两者均包含的值 不同点
Sass和Less（预处理器） 一、了解Sass和Less 二、Sass和Less 语法 2.1 注释 2.2 语法 赋值 插值 作用域 选择器嵌套、伪类嵌套、属性嵌套（Sass） 运算 函数 混合、命名空间...Sass作用域有顺序。 图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。...减少复杂的编译选择器代码。 伪类嵌套，需要在伪类的冒号前面加&，不然会有空格。 属性嵌套只有在Sass中有，Less没有。...如果进行不同单位的计算，会按照第一个单位进行计算，只计算值。 ---- 在Sass中不同单位不能进行计算，默认/是分割，不会像Less一样会认为是除号。...样式可以单独显示，也可以在其他的杨使用混入，如果不想选择器编译出来可以在样式后面加一个()，就不会编译出来，可以在括号中进行传参。
此外，不同种类的选择器，例如ID 选择器、类选择器、元素选择器等的权重也不一样，这很容易引起样式相互覆盖或冲突。虽然可以通过差异化类命名的方式来避免全局冲突，但这又会导致类命名的复杂度上升。...因此，相比与 CSS，Sass / Less 更像是一门编程语言，可以提升写 CSS 的效率，代码更易于组织和维护。...这两者解决问题采用的是两种不同的思路：CSS Module 是通过工程化的方法，加入了局部作用域和模块机制来解决命名冲突的问题。CSS Module 通常会配合 Sass 或者 Less 一起使用。...Sass / Less 进行组合使用，从而既能拥有 Sass / Less 的 CSS 预处理器的能力（规则、变量、混入、选择器、继承等），又可以拥有 CSS Modules 提供的局部作用域的能力，避免全局污染...），并添加带有 componentId 的特殊注释标记到 稍后将使用的元素。
功能 Sass 常用的有几种功能： 变量：变量中可以存储颜色、字体或任何 CSS 值。 嵌套：可嵌套 CSS 选择器，提供清晰的层次结构。 混合：可以定义&重用代码块。...扩展/集成：可以在一个选择器内继承另一个选择器。 操作符：可以在 CSS 中使用操作符进行计算。 条件/循环语句：可以循环/条件生成 CSS。 自定义函数：可以自定义复杂操作的函数。...优点 使用广泛。 功能支持完善。 可编程能力强。 缺点 CSS 的复杂度不可控。 node-sass 国内安装不易（非 Sass 本身的缺点，dart-sass 可代替）。 3....Less[3] Less 和 Sass 类似，完全兼容 CSS 语法，并给 CSS 提供了变量、嵌套、混合、运算等可编程能力。Less 通过 JavaScript 实现，可在浏览器端直接使用。...功能 Less 常用的有几种功能： 变量：变量中可以存储颜色、字体或任何 CSS 值。 嵌套：可嵌套 CSS 选择器，提供清晰的层次结构。 混合：可以定义&重用的代码块。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
