Stylus项目实战：cards

1. 什么是 Stylus？

Stylus 是一门动态的 CSS 预处理器，语法简洁灵活（支持缩进或传统写法）。
支持：变量、函数、混合（mixins）、嵌套、条件判断、循环等编程特性。
浏览器不直接识别 .styl 文件 → 必须 编译成 .css 后供浏览器解析。

bash 复制代码

# 全局安装 stylus
npm install -g stylus

# 编译单个文件
stylus style.styl -o style.css

# 监听文件变化，实时编译（推荐开发时使用）
stylus style.styl -o style.css -w

✅ 开发流程：.styl → 编译 → .css → 引入 HTML

2. 核心语法优势（对比原生 CSS）

✅ 变量（Variables）

arduino 复制代码

// 定义颜色/尺寸变量
primary-color = #007bff
card-width = 45px

.card
  width: card-width
  height: card-width
  background: primary-color

编译后：

css 复制代码

.card {
  width: 45px;
  height: 45px;
  background: #007bff;
}

✅ 嵌套（Nesting）------ 结构更清晰

yaml 复制代码

.card
  width: 45px
  height: 45px

  // 子元素嵌套
  .title
    font-size: 16px
    color: white

    &:hover
      color: yellow

  // 状态类嵌套（同级）
  &.active
    border: 2px solid green

& 表示父选择器本身，常用于伪类、状态类：

yaml 复制代码

.panel
  background: #f0f0f0

  &.active
    background: #000

等价于 .panel.active

✅ 混合（Mixins）------ 复用样式块

scss 复制代码

// 定义一个 flex 居中 mixin
flex-center()
  display: flex
  justify-content: center
  align-items: center

// 使用
.container
  flex-center()
  height: 100vh

也可以带参数：

scss 复制代码

flex-layout(direction = row, jc = center, ai = center)
  display: flex
  flex-direction: direction
  justify-content: jc
  align-items: ai

.box
  flex-layout(column, flex-start, stretch)

弹性布局（Flexbox）实战（移动端首选）

我要完成这样一个页面，6张卡片点击的卡片将会会放大；

1.初步观察先要一个大body装入5个div，div里放入img

xml 复制代码

<body>
    <div class="container">
      <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Explore The World</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Wild Forest</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
        <h3>Sunny Beach</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
        <h3>City on Winter</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Mountains - Clouds</h3>
      </div>
    </div>
    <script src="./common.js"></script>
</body>

由于默认布局的样式，div从上往下流，并且div的宽度由h3的文字撑起，文字则是默认的16px,和目标相差甚远那么就要css的进入了

2.样式的实现

首先打开终端输入下面代码并运行，代表了.styl将会由.css监听，它的一切改动将同步到css。

复制代码

stylus style.styl -o style.css -w

然后就可以开始样式的编译

首先是body

scss 复制代码

body
   display flex
   flex-direction row // 垂直
   justify-content center //主轴
   align-items center  //垂直主轴
   height 100vh
   overflow hidden
   background-color #666

详细说说如何达成居中

1. `display: flex;`

这句话让一个容器变成 弹性盒子（Flexbox）容器。
它的直接子元素（flex items）将按照弹性布局进行排列。

2. `flex-direction: row;`

作用：定义主轴（main axis）的方向，也就是子元素的排列方向。
row 表示 水平从左到右 排列（默认值）。
❌ 你的注释写的是"垂直"，这是不正确的。
如果你想垂直排列，应该使用：
css 复制代码
```
css
编辑
flex-direction: column;
```

总结：

row → 水平（左 → 右）

column → 垂直（上 → 下）

3. `justify-content: center;`

作用：控制 主轴（main axis） 上的对齐方式。
当 flex-direction: row 时，主轴是 水平方向。
所以 justify-content: center 会让子元素在 水平方向居中对齐。
类似可选值还有：
- flex-start（靠左）
- flex-end（靠右）
- space-between（两端对齐，中间等距）
- space-around（周围留白）

4. `align-items: center;`

作用：控制 交叉轴（cross axis） 上的对齐方式。
当 flex-direction: row 时：
- 主轴 = 水平方向（x 轴）
- 交叉轴 = 垂直方向（y 轴）
所以 align-items: center 会让子元素在 垂直方向居中对齐。
这就是我们常说的"垂直居中"实现方式之一！

div块的样式实现

scss 复制代码

.container
   display flex
   width 90vw
   .panel
      height 80vh
      border-radius 50px//给面板四角添加 50px 的圆角，使外观更柔和、现代。
      color #fff
      cursor pointer//鼠标悬停时显示为手型光标，提示用户该元素可点击。
      flex 0.5//设置弹性比例，开始每个都一样
      margin 10px
      position relative//将定位上下文设为相对定位，使其内部的绝对定位元素（如 `h3`）能相对于它进行定位。
      background-size cover//背景图缩放以完全覆盖整个面板，可能裁剪部分图片，但不留空白
      background-position center//背景图居中对齐（水平和垂直方向），常与 `cover` 搭配使用，确保重点内容可见。
      background-repeat no-repeat//背景图不重复，避免出现多个相同图案。
      transition all 700ms ease-in//所有 CSS 属性变化时，使用 700 毫秒的过渡动画，缓动效果为"慢进快出"（ease-in）。
      h3
         font-size 24px
         position absolute
         right 20px
         left 20px
         bottom 20px
         margin 0
         opacity 0
         transition all 300ms ease-in 400ms
      &.active
        flex 5
        h3
           opacity 1

这下就完成了样式的设计，接下来还要引入js文件让样式可以交互

3.交互的实现（点击变大）

javascript 复制代码

// domcument 文档对象 顶级的 dom树
// dom 事件监听

const panels = document.querySelectorAll('.panel');

// JS 中除了string,number,boolean,null,undefined其他都是对象
// 对象的一个子类
// console.log(panels,
//     panels[0],
//     typeof panels[0],//瞎的
//     //[object HTMLDivElement]
//     Object.prototype.toString.call(panels[0])
// );

panels.forEach(function(panel){
    // console.log(panel)
    //事件监听需要在具体元素上
    panel.addEventListener('click',function(){
        // 点击当前项添加active类名
        const cur = document.querySelector('.active');
        if(cur){
            cur.classList.remove('active');
        }
        panel.classList.add('active');
    })
})

首先是交互对象的获取（就是每个div块）

document.querySelectorAll('.panel')

意思：从整个 HTML 页面中查找所有 class 为 panel 的元素。
详细说明：
- document：代表当前网页的 DOM 根对象。
- querySelectorAll：是 DOM API 提供的方法，用于选择匹配指定 CSS 选择器的所有元素。
- ('.panel')：传入的参数是一个 CSS 类选择器，表示"查找所有 class 包含 panel 的元素"。
返回值 ：一个 NodeList（类似数组的集合），包含所有匹配的 DOM 元素。
- 例如：如果有 3 个 <div class="panel">...</div>，那么 panels 就是一个包含这 3 个 div 元素的集合。

用foreach高阶函数对获取的每个div进行点击事件监听

javascript 复制代码

panels.forEach(function(panel){
   panel.addEventListener('click',function(){
   })
   })

点击后应该查找上次获得active的元素将active删除，再给新元素加上active类。

csharp 复制代码

const cur = document.querySelector('.active');
       if(cur){
           cur.classList.remove('active');
       }
       panel.classList.add('active');

如此就是大功告成了。

总结：为什么用 Stylus？

特性	原生 CSS	Stylus
变量	❌ (需 CSS Custom Properties)	✅
嵌套	❌	✅
混合/Mixins	❌	✅
函数	❌	✅
条件/循环	❌	✅
模块化	❌	✅
编译需求	❌	✅（唯一代价）

⚡️ 一句话总结：Stylus = 更快 + 更少重复 + 更易维护的 CSS 写法 ！

Stylus项目实战：cards

1. 什么是 Stylus？

2. 核心语法优势（对比原生 CSS）

✅ 变量（Variables）

✅ 嵌套（Nesting）------ 结构更清晰

✅ 混合（Mixins）------ 复用样式块

弹性布局（Flexbox）实战（移动端首选）

1.初步观察先要一个大body装入5个div，div里放入img

2.样式的实现

首先是body

详细说说如何达成居中

1. display: flex;

2. flex-direction: row;

3. justify-content: center;

4. align-items: center;

div块的样式实现

3.交互的实现（点击变大）

首先是交互对象的获取（就是每个div块）

用foreach高阶函数对获取的每个div进行点击事件监听

总结：为什么用 Stylus？

1. `display: flex;`

2. `flex-direction: row;`

3. `justify-content: center;`

4. `align-items: center;`