变量的作用域 Sass的变量其实是有作用域的，Sass 变量的作用域只能在当前的层级上有效果 $myColor: red; h1 { $myColor: green; // 只在 h1 里头有用...，局部作用域 color: $myColor; // green } p { color: $myColor; // red } 提升全局变量 Sass 中可以使用 !...global; // 全局作用域 color: $myColor; // green } p { color: $myColor; // green } 对于Sass全局变量，可以用一个文件来存储...混合@mixin 用来分组那些需要在页面中复用的CSS声明，可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用。...mixin important-text { color: red; font-size: 24px; font-weight: bold; } 感觉没啥高大上的啊，是的，其实就是定一个代码块，
嵌套规则： Sass允许将选择器嵌套在其他选择器中，使样式表更具可读性。这样，可以使用父选择器的上下文来定义子选择器的样式。 混合： Sass中的混合是一种将一组CSS属性打包成可复用代码块的方式。...命名空间： Sass允许将相关的样式组织在一个命名空间内，从而避免全局作用域的冲突。 条件语句： Sass支持if-else语句，可以根据条件来选择应用哪些样式。...Stylus： Stylus是一个功能强大且灵活的CSS预处理器，它的语法比较自由，可以使用缩进或大括号来表示代码块，支持变量、嵌套规则、混合、继承等功能，可以通过Stylus的编译器将Stylus代码转换为...PostCSS： PostCSS不同于前面的预处理器，它是一个用JavaScript实现的工具，可以通过插件来处理CSS代码，例如自动添加浏览器前缀、压缩CSS、处理未来CSS语法等。...功能扩展：某些CSS预处理器支持插件系统，可以扩展一些额外的功能，如自动添加浏览器前缀、压缩CSS、处理未来CSS语法等。
目录 术语 规则声明 选择器 属性CSS 格式 注释 OOCSS 和 BEM - ID 选择器 JavaScript 钩子 - 边框Sass 语法 排序 变量 Mixins 扩展指令...中是 //) 代替块注释。...ID 选择器 在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级，而且 ID 选择器是不可重用的。...我们推荐在创建用于特定 JavaScript 的类名时，添加 .js- 前缀： Request to...对于仅用在当前文件的变量，可以在变量名之前添加下划线前缀（例如 _my-variable）。
Sass 提供了嵌套的书写方式，用以简化选择器的书写，同时也带来了“作用域”。...Sass 引入了嵌套，出现了嵌套层级，自然也就有了“层级作用域”。...变量作用域 在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。...Sass 对 @media 做了一些改进，允许我们在嵌套的过程中书写媒体查询和响应代码。在编译时， Sass 会把媒体查询编译到文件最外层，并为子选择器加上父选择器前缀。...在 Sass 中，我们可以在写完一个元素的公共样式之后，直接在下面嵌套媒体查询，所有的响应代码和这个元素都写在同一块地方，维护起来非常方便。
不能用 ID，不能用标签。只能用类。 块和元素可以嵌入其他块和元素，但是它们必须是完全独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话，就不要在按钮上加边距，否则按钮就会与标题绑定。...添加自动前缀 我们设置好了开发工具，太棒了！现在，让我们来谈谈构建工具，特别是：自动前缀（Autoprefixer）。...这就是为什么我们需要自动前缀来帮助我们的CSS代码获得浏览器的兼容，而不用增加额外的复杂性。 那么我们如何用更聪明地构建CSS呢？ 将所有的SCSS文件编译成一个主CSS文件。...使用自动前缀为CSS文件添加前缀。 压缩CSS文件 还有最后几步，请坚持看下去，马上就结束了。...这里为你设置了一个代码仓库，以帮助你迅速开始：） 如果你想知道我是如何在项目中应用这些技术的，请点击这里查看 代码仓库 和 结果。希望你能通过这些例子更深入理解。
我们还将通过演示示例来了解为什么要使用这些预处理程序，演示如何将样式划分为更小的特定组件，而不必强迫用户下载大量不需要的CSS文件。...保持类的作用域以避免意外地设置样式有时候有的很累。 即使引入了 CSS 变量以减少声明的重复，但使用预处理器仍可以解决变量的一些问题。 例如：较长的变量名。...SCSS 中的概念 嵌套和作用域 当设计 HTML文件的样式时，SCSS 使我们能够在样式表中拥有相同的 HTML 视觉层次结构，这样我们就可以以一种更容易理解的方式来设计样式。...这样做的另一个好处是，它有助于避免拼写错误，而且还可以看到，我们已经确定了一些规则的作用域，因此这些样式只用于nav。...父选择器(&) 如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况，这也会起到修饰符的作用，& 在 scss中表示自身的意思。
CSS 前缀的配置。...变量的作用域 全局作用域 在 Sass 文件的任何地方定义的变量都具有全局作用域，可以在整个文件中访问和使用。...这意味着在文件的任何位置都可以使用该变量，包括嵌套的规则块内部。 局部作用域 局部作用域是指在特定的规则块内部定义的变量，只能在该规则块内部使用。这些变量在规则块外部是不可见的。...$color: red; // 全局作用域 body { $size: 16px; // 局部作用域 font-size: $size; .container { color...: $color; // 可以访问全局变量 width: $width; // 错误，无法访问外部规则块的变量 } } 全局作用域的另一种定义方法 在局部作用域中定义一个变量时，它默认只在当前作用域内有效
功能 PostCSS 本体功能比较单一，大多数的 CSS 处理功能都由插件提供，下面是一些常用的插件： Autoprefixer 为 CSS 中的属性添加浏览器特定的前缀。...功能 Sass 常用的有几种功能： 变量：变量中可以存储颜色、字体或任何 CSS 值。 嵌套：可嵌套 CSS 选择器，提供清晰的层次结构。 混合：可以定义&重用代码块。...Less[3] Less 和 Sass 类似，完全兼容 CSS 语法，并给 CSS 提供了变量、嵌套、混合、运算等可编程能力。Less 通过 JavaScript 实现，可在浏览器端直接使用。...缺点 不支持自定义函数（可通过 mixins 实现简单逻辑）。 编程能力相对较弱。 4. Stylus[4] Stylus 基础功能和 Sass / Less 十分类似。...CSS Modules[5] CSS Modules 和前文介绍的预处理器不同，不是可编程化的 CSS，而仅是给 CSS 文件加入了作用域和模块依赖，主要是为了解决 CSS 全局污染的痛点以及为了解决全局污染而嵌套过深的问题
你打算如何建造一座简单的房子？你需要一个窗户，一个屋顶，一扇门，一些墙，就这些东西，这些就是我们需要的块。这些块都是有命名意义的。...最后，你的页面也不会有很多特定样式，所以你也可以跳过那个文件夹。太好了，只剩4个文件夹了！...它是一个工具，可以解析 CSS 并使用 can I use 中的值将浏览器供应商前缀添加到 css 规则中。...实际上，在构建网站时，你可能会使用到并非所有浏览器都完全支持的新特性，这时候，添加浏览器供应商前缀可以支持这些新特性，下面是示例： -webkit-animation-name: myAnimation...所有我们按如下方式编写 css 代码： 将所有的 scss 文件写入一个主文件中 通过 Autoprefixer为css添加浏览器供应商前缀 编译 css 文件 这将是最后的步骤了，所有耐心和我一起完成吧
说明他们的作用。 block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。...inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。...（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）...解释一下这2个伪元素的作用。 如何修改chrome记住密码后自动填充表单的黄色背景 ？ 你对line-height是如何理解的？ 设置元素浮动后，该元素的display值是多少？...- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了 BEM 的性能。这将使样式表更易于维护，同时对 CSS 级联进行更严格的控制。...在这篇文章中，我们将展示如何在 Chrome 中使用 @scope 特性，以及如何使用它来替换前端项目中的 BEM。我们通过几个例子进行讲解，你可以在 GitHub 上的示例项目中查看并跟随操作。...在即将发布的 Chrome 118 版本中，@scope 特性创建了 CSS 样式的块级作用域。.../DOG_1.jpg'} alt="dog" /> 要将 BEM 重构为 @scope ，只需找到样式组，然后适当添加您的作用域样式。...通过使用@scope，可以通过紧密限定元素范围来控制层叠的副作用。 文件 no_scope.html 的样式和一些元素定义如下： <!
定义方法来定义 libraryTarget: "this", // 在 this 上设置属性 libraryTarget: "var", // 变量定义于根作用域下...chunkFilename: "[id].js", chunkFilename: "[chunkhash].js", // 长效缓存(/guides...crossOriginLoading: "anonymous", crossOriginLoading: false, // 指定运行时如何发出跨域请求问题... npm install sass --save-dev npm install sass-loader --save-dev { //sass打包处理,...devServer 安装命令： npm install webpack-dev-server --save-dev 在 package.json 中的 scripts 中添加
比较典型的后处理器有： clean-css: 用来压缩CSS AutoPrefixer: 自动添加 CSS3 属性各浏览器的前缀 Rework: 取代 stylus 的插件化框架 PostCSS 举个例子...：补足前缀。...状态 状态 class 一般通过js动态挂载到元素上，可以根据状态覆盖元素上特定属性。...BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一，同时将类选择器的语义化提升了一个新的高度。...CSS Module CSS Module 并不是将 CSS 改造成编程语言，而是通过给 CSS 加入局部作用域和模块依赖的方式达到 CSS 的模块化。
说明他们的作用。 block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none 缺省值。象行内元素类型一样显示。...list-item 象块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。...（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）...CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。...- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的 是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
预处理器变量不能级联 每当使用变量，作用域的问题就不可避免的出现。这个变量应该设置为全局变量吗？是否应该限定其范围为文件或模块？是否应该限制在块中？...由于CSS最终目的是为HTML添加样式，事实证明还有另一种有效的方法给变量限定作用域：DOM元素。但由于预处理器不在浏览器中运行并且无法看到标记，它们不能这样做。...假设有一个网站，面对偏好较大文字的用户，就向元素添加类user-setting-large-text。...显然这在Sass中行不通，因为预处理器不知道DOM结构，但希望你清楚的认识到为什么这类东西是有用的。 调用一个特定的用例：出于可访问性的原因，在继承了DOM属性上运行颜色函数是极其方便的。...如果你正使用PostCSS来构建网站，想使用只能通过Sass实现主题化的第三方组件，那你真是不走运了。 跨不同的工具集或CDN上托管的第三方样式表共享预处理器变量是不可能（或至少不容易）的。
在说 css 自定义属性(变量)的作用域前，让我们先回顾一下 js 预处理的作用域，这有利于我人更好的理解和比较。...我们知道，js var 的变量的作用域被限制在它所在的 function 中。 let 和 const 性质也是类似的，不过它们都是块级变量。...js 中的闭包可以对外暴露一个 function 的变量/属性 — 作用域链。js 闭包有三个作用域链： 自己内部的作用域变量 外部方法的变量 全局变量 ?...任何一个嵌套的代码块都可以访问闭包作用域内的变量（同 javascript）; ?...一个全局的变量可以被定义在选择器块作用域的 这意味着，在 sass 中，变量的作用域很大程度上依赖于代码的上下文结构。 但 css 自定义属性默认是继承的，和 css 一样，也是级联的。
五、IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。...（3）为了代码的易读性，在每个声明块的左花括号前添加一个空格。 （4）声明块的右花括号应当单独成行。 （5）每条声明语句之后应该插入一个空格。...3.2替代方法 （1）使用多个 元素 （2）通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件 （3）通过 Rails、Jekyll 或其他系统中提供过...五、带前缀的属性 5.1 垂直对齐 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。 5.2 Example ?...过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。 7.3 Example ? 八、Less 和 Sass 中的嵌套 8.1 尽量不嵌套 避免不必要的嵌套。
前缀） block 代表了更高级别的抽象或组件。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多。...另外，对于对外发布的公共组件来说，一般为了风格的可定制性，都不会使用这种局部作用域方式来定义组件样式。此时使用 BEM 格式也会大显其彩。...层级最后不要超过 4 级，不然增加阅读的理解难度 3 总结 BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它。
CSS 预处理器是一个非常出色的工具，但是它们的变量是静态的，有语法作用域。...预处理器变量不能级联（层叠） 每当你使用变量，作用域的范围不可避免，这个变量应该全局吗？应该是file/module？还是块作用域？...如果class info或者error已经添加到alert（或者通过JavaScript设置背景颜色或用户样式），按钮元素希望能够得到这两个颜色。...现在这个虽然不会在sass 运行，因为预处理器不知道DOM结构，但还是希望搞清楚这类型的东西可能有哪些用处。 说一个特定的用例：这也是在继承DOM属性的可访问性运行color 函数的原因。...为了更简洁，预处理器变量是语法作用域和编译后静态。自定义属性作用域是DOM，他们都很灵活。 实际案例 如果你仍然不确定自定义属性可以做到这一点，而预处理器不行，我这里给一些例子。
Sass 支持所有CSS3的 @规则，以及一些已知的其他特定的Sass "指令"。这些在 Sass 都有对应的效果，更多资料请查看 控制指令 (control directives) 。...@extend当一个样式类（class）含有另一个类的所有样式，并且它自己的特定样式。...在它后面跟混入的名称和任选的arguments（参数），以及混入的内容块。Mixin有点像C语言的宏（macro），是可以重用的代码块。使用@mixin命令，定义一个代码块。... left; margin-right: $value;}使用的时候，根据需要加入参数：div { @include left(20px); }下面是一个mixin的实例，用来生成浏览器前缀...global; } }}// 通过key获取map中到值@function themed($key) { @return map-get($theme-map, $key);}这里需要熟悉 Sass
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
