JEFF_xieyuzhi的博客

文章目录使用选择器继承来精简CSS6-1. 何时使用继承6-2. 继承的高级用法6-3. 继承的工作细节6-4. 使用继承的最佳实践使用选择器继承来精简CSS选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，通过@extend语法实现。 <header>头部</header> <main> XYZ </main>header{ border: 1px solid #f00; bac

文章目录混合器5-1. 何时使用混合器5-2. 混合器中的CSS规则5-3.给混合器传参5-4. 默认参数值混合器混合器使用@mixin标识符定义, 通过@include来使用这个混合器。@mixin main-color { color: #00f;}main{ font-size: 30px; @include main-color;}5-1. 何时使用混合器你是否为这个混合器想出一个好名字，如果你能找到一个很好的短名字来描述这些属性修饰的样式，那么往往

文章目录静默注释静默注释sass注释格式/…/的注释语法，即静默注释。其内容不会出现在生成的css文件中。main { color/* 这种注释内容会出现在生成的css文件中 */: #f00; // 这种注释内容不会出现在生成的css文件中 padding:10px; /* 这种注释内容会出现在生成的css文件中 */}编译之后的cssmain { color/* 这种注释内容会出现在生成的css文件中 */: #f00; padding: 10px; /*

文章目录3.导入SASS文件3-1.使用SASS部分文件3-2.默认变量值3-3.嵌套导入3-4.原生的CSS导入3.导入SASS文件3-1.使用SASS部分文件局部文件：不需要生成对应的独立css文件，这样的sass文件称为局部文件sass局部文件的文件名以下划线开头例如：_night-sky.scss,你在引用的时候可以省略文件名的下划线3-2.默认变量值!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。// _night-sky.

嵌套CSS规则2. 嵌套CSS规则2-1. 父选择器的标识符&2-2. 群组选择器的嵌套2-3. 子组合选择器和同层组合选择器： >、+和 ~2-4. 嵌套属性2. 嵌套CSS规则2-1. 父选择器的标识符&伪元素 : hover <article> Lorem ipsum dolor sit amet <a href="https://www.sass.hk/guide">了解：父选择器的标识符&&lt

<template> <view class="content"> </view></template><script> export default { methods: { } }</script><style scoped lang="scss"> /* 多行注释：会被完整...

混合指令：定义混合指令@mixin以及引用混合指令@include<template> <view class="content"> 定义混合指令@mixin以及引用混合指令@include </view></template><script> export default {}</script>...

<template> <view class="content"> 4.3. 属性嵌套 (Nested Properties) </view></template><script> export default { }</script><style scoped lang="scss">...

<template> <view class="content"> 6.2. 变量 $ (Variables: $) </view></template><script> export default { }</script><style scoped lang="scss"> $co...

extend：一般的写法<template> <view class="content"> <view class="inherit-color1"> 继承 </view> <view class="inherit-color2"> 继承 </view> </view>&l...

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul><style lang="scss" scoped> ul { li { &:nth-child(1) { colo...