命名：块名：.block 示例：.card、.form、.post、.user-navigation 元素 接下来，你应该如何用你的乐高积木建造一个窗口呢？...BEM 的时候，你可以用且只能用类来命名。...只能用类。 块和元素可以嵌入其他块和元素，但是它们必须是完全独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话，就不要在按钮上加边距，否则按钮就会与标题绑定。请改用工具类。...那么我们如何用更聪明地构建CSS呢？ 将所有的SCSS文件编译成一个主CSS文件。 使用自动前缀为CSS文件添加前缀。 压缩CSS文件 还有最后几步，请坚持看下去，马上就结束了。...这里为你设置了一个代码仓库，以帮助你迅速开始：） 如果你想知道我是如何在项目中应用这些技术的，请点击这里查看 代码仓库 和 结果。希望你能通过这些例子更深入理解。
变量 sass使用“$”声明变量如 $theme-color:#f98; sass变量有块级作用域，也就是一个{}的变量不能在另一个{}里面使用 #main{ $testColor:red;...a元素里面的子元素经过时变蓝，这与我们最初预料的结果不一致 测试 324 解决办法：给伪类元素加一个“&”表示“&”表示当前设置样式的选择器 article{ a{ color:red; &:hover{...hover{ color:blue } 群组选择器 我们在编写css时有时会这样做 .con h1,.con h2 .con h3{ font-weight:400; } 而在sass中可以简写为...; } 很多时候我们不希望在编译时将那些被导入的sass文件也编译出来，如这里我们就不需要编译a.scss和b.scss但是当我们执行某些命令如将如果文件夹的sass全部编译这时候a和b都会被编译 如果我们不希望他们被编译
二者其实有不同 两个区别点如下 （1）.文件扩展不同。 Sass用“.sass”后缀为扩展名； SCSS用“.scss”; （2）.语法书写方式不同。 ...: $baseLineHeight; } 编译的css为： body{ line-height: 2; } 结论：很正常、最普通的一个写法 ——两个或多个普通变量声明 $baseLineHeight...变量分为全局变量和局部变量 全局变量：在选择器、函数、混合宏...的外边定义的变量为全局变量，也就是定义在元素外边的变量。 有时候定义全局变量会加上"!...局部变量：定义在元素内部的变量，局部范围内（选择期内、函数内、混合宏内...）； 局部变量只会在局部范围内覆盖全局变量，在元素内部定义的变量不会影响其他元素 示例： //SCSS $color: orange...他也能够支持多种单位（比如 em ,px , %）， 但当一个单位同时声明两个值时会有问题。
lighten(#fff,10%) //原色的亮度值 增加百分之10亮度 draken(#fff,10%) // 在原色的基础上 减少百分之10亮度 复制代码 应用场景 lighten和darken这两个内置函数经常被用到元素被...此时并不希望改变这个元素的色值，但是又想要用户感知到鼠标停留在这个元素上。此时这两个内置函数就发挥了他们的作用了。...比如一个文件夹两个 scss 文件，一个 root.scss,一个 _vars.scss。...default声明变量的意思就是说如果项目中存在相同的声明则优先使用别的声明，如果不存在则使用!default的值，可以理解为默认值。 !...For example: @each 指令也可以使用多个变量，如@each var1, var2, ... in 。如果是列表列表，则子列表的每个元素都分配给相应的变量。
如果不想局部文件被编译，文件名可以以下划线 （_）开头，如下图的 public 最好前面添加 “_” 开头，这样就不会导出 css 文件，如 _test.scss 文件，因为我们只是单纯引入，不需要 css...2、还有就是带（_）文件，在引入时，可以不写（_）,即引入 _test.scss , @import "test" 3、这也就意味着，同一个目录下不能同时出现两个相关名的 SCSS 文件（一个不带...使用参数时建议加上默认值 2.6 SCSS @extend（继承）指令 在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。...通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。...2.6.1 用占位选择器继承 注意：上面的图中 .alert 只是单纯的用于继承，不用做元素类名，但是它却导出成了 类名，这时我们可以用 占位选择器%foo 对其进行声明，不用于元素类名
保持类的作用域以避免意外地设置样式有时候有的很累。 即使引入了 CSS 变量以减少声明的重复，但使用预处理器仍可以解决变量的一些问题。 例如：较长的变量名。...基本的CSS 选择器仍然适用于 SCSS，比如： > 选择器 .container{ > .left-area{ ... } } 现在，只有类为container的直接子类才会获得样式。...css 中“>”是 css3 中特有的选择器，A > B 表示选择 A 元素的所有子B元素，与A B不同的是，A B 选择所有后代元素，为A > B只选择一代。...父选择器(&) 如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况，这也会起到修饰符的作用，& 在 scss中表示自身的意思。...我们也可以定义自己的 Sass 函数，要实现函数的声明和返回内容我们需要使用function和return两个指令，类似于其他语言中的关键字。
基本用法声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。...无效情况：先会检查属性 color 是否为继承属性，如果不是则将该值设置为它的默认初始值。:root 伪类:root 这个 CSS 伪类匹配文档树的根元素。...对于 HTML 来说，:root 表示 \ 元素，除了优先级更高之外，与 html 选择器相同。实践中主要用于声明全局CSS变量。...与Less和Sass变量的区别声明LESS用@符号，SCSS用$符号表示@link-color:#000@main-top : search;$to-color:#000$main-top : search...;使用不同于CSS，声明变量以“插值”的形式使用，并且不但可以表示为数值，文本嵌入表达式，还可以作为类名、属性名等。
函数： SCSS提供了内置的函数，用于操作颜色、执行计算等。此外，你还可以创建自定义函数，使得在样式中执行复杂的逻辑变得更加容易。 模块化： SCSS支持使用局部文件，将样式表分割为更小的模块。...SCSS允许我们将CSS规则嵌套在父选择器内部。这有助于提高样式的可读性和组织性，特别是对于复杂的结构。 例如，我们创建一个带有两个元素的简单HTML页面；一个父元素和一个子元素。... 我们为这两个元素添加一些样式，并将它们嵌套在一起...alt="image.png" /> 我们为父元素添加一个悬停状态的样式：（当我鼠标经过时父元素背景色变为黄色） .parent { padding: 2rem; background-color...在SCSS中声明变量 在SCSS中，我们可以使用美元符号（$）来声明变量。
尤其是大型团队合作的项目, 很难确定某个特定的类或者元素是否已经赋过样式. 所以在大部分情况下我们都会绞尽脑汁新创建一个类名, 而不是复用已有的类型....至少需要支持为顶层元素配置className和style属性: interface ButtonProps { className?: string; style?...: React.CSSProperties; } 这两个属性应该是每个展示型组件应该暴露的 props, 其他嵌套元素也要考虑支持配置样式, 例如 footerClassName, footerStyle...通过组件名来标志样式, 自动生成唯一的类名, 开发者不需要为元素定义类名. 绑定组件....以 Bootstrap 的项目结构为例: . ├── _alert.scss ├── ...
两个基本原则: 独立的结构和样式（即不要将定位、尺寸等布局样式与字体、颜色等表现样式写在一个选择器中）。...增加类的数量: 您可能需要将多个类添加到一个元素以说明所有样式元素。这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。...无语义化的类名: 根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。...SMACSS 将 CSS 代码分为五个主要类别: 基础（Base）是 HTML 元素定义默认样式，可以包含属性、伪类等选择器，如 reset.css、normailze.css 之类的格式化元素样式 CSS...│ ├── widths.scss │ └── gaps.scss └── index.scss 优缺点 优点： 结构清晰：ITCSS将样式表分为不同的层级，如设置（Settings）、工具（
AbcdDatePicker,AbcdTable） 页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem...） 使用遵循 kebab-case 约定 在页面中使用组件需要前后闭合，并以短线分隔，如（，） 导入及注册组件时，遵循 PascalCase 约定 同时注意:必须符合自定义元素规范:切勿使用保留字 #...--声明语言，并且添加scoped--> # 多个特性的元素规范 分多行撰写，每个特性一行 <!...scoped 中出现 官方文档说明:在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的 分类的命名方法(使用单个字母加上"-"为前缀) 布局（grid）（.g-）...(:first-letter, :hover, :active etc) 伪类元素 (:before and :after) 父级选择器的声明样式 (.selected, .active, .enlarged
没错，由于变量名并不对应具体的类名或者元素名，而是比类名或者元素名更具体，所以猜是一个好主意，比如@font-size-h6是什么意思？猜的话肯定是h6元素的字体大小，事实上也是这样。...，默认值为8px。...强调一下关于css的定制，从上文可以看到，定制分为两个部分，一部分是修改bs自身的css变量值，另一部分是写模板专用的css。...从实践来看，这两种修改不要同时进行，可以先只写模板专用的css，等做出一两个页面，形成了自己模板统一的合理的风格之后，再总结出对bs的css变量的修改，然后再去改bs的css变量。...接着是nav元素，然后是#wrap元素，然后是footer元素，最后是#fixed元素（用于漂浮、弹出层等），不再细说。
父选择器 & 在 CSS 中，基本选择器分为以下几种： ID 选择器，如 #id 类选择器，如 .class 标签选择器，如 div、p 属性选择器，如 [lang='en'] 伪类选择器，如 a:hover...、div:first-child 伪元素选择器，如 p::before、p::after 其中，伪类和伪元素选择器需要与别的选择器复合使用，以确定是哪些元素的伪类或伪元素。...，如 div > p，选中条件： 节点为 div 的邻层子节点 节点标签为 p + 为相邻兄弟选择器，如 div + p，选中条件： 节点为 div 后面的第一个节点 节点标签为 p ~...为同层后续选择器，如 div ~ p，选中条件： 节点为 div 后面的同层节点 节点标签为 p 对于组合选择器，直接嵌套就可以了。...变量作用域 在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。
Vue中如何创建新的跳转界面 由于自己在线教育网站距离上线的日子越来越近了，之前专注研究的都是有关如何用k8s部署相关的东西，没有太关注一些页面的东西。...但是vue让你开始不太习惯的就是，你api拿到数据之后，直接就支持把相关item渲染到界面上，同时，如果有针对表单的监听，你在相应vue的html文件xx.vue中声明对该表单的监听行为，如click，...如change，再声明好监听的函数，在界面的export default{...}中的methods就可以放置相应的回调函数，实现相应交互行为。...我截取两段code，大家感受下 //这是使用scss .button-box { padding: 10px 20px;...举两个例子。
Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的...其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。...如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用来声明混合宏的关键词...带参数混合宏： 除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如： @mixin border-radius($radius:5px){ -webkit-border-radius...继承@extend Sass中是通过关键词 @extend来继承已存在的类样式块，从而实现代码的继承。
版权声明：本文为吴孔云博客原创文章，转载请注明出处并带上链接，谢谢。...最后的大括号不折行 展开输出：–style expanded, 最后的大括号折行 紧凑输出：–style compact, 单行 压缩输出：–style compressed，最大压缩 API 变量的声明和调用...CSS文件中显示，‘//’不会显示 数据类型 跟javascript字符类型一样， SassScript 支持 CSS 的两种字符串类型： 有引号字符串 (quoted strings)，如...“Lucida Grande” 、’http://sass-lang.com‘； 无引号字符串 (unquoted strings)，如 sans-serifbold。...或sass @import "include/foo.scss|include/foo", "
示例：.post--important，.post__btn--disabled 注意点 当你使用 BEM 时，你的命名只有 class 类名并且只使用 class 类名，没有 id ，没有标签，就只使用...class 类名。...此文件包含用于构建页面所需的组件，如：buttons、forms、swipers、popups等等。 layout: 用于布局页面的不同部分。...所有我们按如下方式编写 css 代码： 将所有的 scss 文件写入一个主文件中 通过 Autoprefixer为css添加浏览器供应商前缀 编译 css 文件 这将是最后的步骤了，所有耐心和我一起完成吧...： 添加两个依赖：postcss-cli和autoprefixer：npm install autoprefixer postcss-cli --save-dev 修改 build scirpt，添加两个
解决命名混乱 没有 css 模块化和统一的规范，会使得多人开发，没有一个规范 减少 css 代码冗余，体积庞大 React 中各个组件是独立的，所以导致引入的 css 文件也是相互独立的，比如在两个...因为声明的类名，比如如上的 .text 已经被处理成了哈希形式。 那么怎么样快速引用声明好的全局类名呢？...CSS Modules 允许使用 :global(.className) 的语法，声明一个全局类名。凡是这样声明的 class ，都不会被编译成哈希字符串。...color: blue; } .title { composes: base; /* 继承 base 样式 */ font-size: 20px; } composes 可以将多个 class 类名添加到元素中...Style.dark : Style.light }> CSS in JS ; } # styled-components 库 CSS IN JS 也可以由一些第三方库支持，如
虽然你可以使用类选择器来定义样式，但要实现可重用性，通常需要手动编写和维护一组类或样式规则。...「嵌套规则:」 CSS: 在 CSS 中，如果要定义嵌套的选择器，你需要使用复杂的选择器名称，如 .parent .child。...SCSS: SCSS 允许你使用嵌套规则，将子元素的样式嵌套在父元素内，使样式表的结构更加清晰。 「维护性:」 CSS: 随着项目的增长，纯 CSS 可能会变得难以维护，因为它缺乏模块化和结构性。...编程性和灵活性： 与 Sass 类似，SCSS 具有编程性的特性，如变量、嵌套、混合（mixins）和条件语句，允许你编写更加灵活和可维护的样式代码。...手动编写样式： 使用 SCSS 需要手动编写 CSS 规则，即你需要明确地编写每个元素的样式规则和选择器。 独立性： SCSS 是一种独立的 CSS 预处理器，可以与任何前端框架或库一起使用。
设置为使用最新的两个版本和全球使用率超过 1% 的浏览器。 "liveSassCompile.settings.formats": 编译输出格式的配置。...这里设置为将编译后的 CSS 文件保存为扩展名为 .css 的文件，并指定保存路径为 ~/../css。【~/.....这样一来，就减少了生成的 CSS 文件的大小，让页面加载性能变得轻盈如鸟。不需要多余的CSS 代码。 避免与其他选择器冲突 占位符选择器的命名以 % 开头，与常规的 CSS 类选择器不同。...index.css.map */ ③ Sass 代码注释 ✅ 多行注释 /* 多行注释 */ 单行注释 // 单行注释 ④ Sass 变量 ✅ 4.1 css 中变量的定义与使用 /* `:root` 伪类选择器用于选择文档根元素...*/ body { --border-color: #ccc; } /* `.header` 选择器选择了页面的 .header 类元素，这里定义了 header 元素区域的 `CSS` 变量 */
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
