css预处理器

用法

可以方便快捷编写样式，提前处理css
css预处理器最终会被工具编译成css
CSS不支持计算写法，因此可以通过预处理器来实现

css语法糖

又名：糖衣语法: 一种编写css更加方便的技术语言
是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。
使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。给复杂的编程语言包裹一层糖衣(易于开发者开发)。

常见的CSS预处理器

Sass 常用

Less 常用

Stylus

Sass中文网：https://www.sass.hk/docs/
由于三种CSS预处理器语法类似，目前掌握一种即可
css转换less/scss stylus https://www.sass.hk/css2sass/

Less

相当于css的进阶版，高级css

  • Less是一个CSS预处理器, Less文件后缀是.less
  • 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
  • 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件—link;
    Less : 导入：@import “文件路径” ; (Less文件的话，可以省略后缀.less)
  • vscode插件:Easy Less—-作用：less文件保存自动生成css文件
    css预处理器Less - 图1
    正常编写less文件即可：1. 它完全支持css语法
    2.还提供其他很多强大语法🔥🔥🔥
    🌈单行注释 ————————-不会在css生成注释
    语法：// 注释内容
    快捷键：ctrl + /
    🌈块注释
    语法：/ 注释内容 / ——-会在css上生成注释
    快捷键： shift + alt + A

    语法注释

    Less强大语法🔥

    Less运算

    运算

    1.     加减乘直接书写计算表达式；<br />           除法需要添加小括号()或  .<br />注意🌈：表达式存在多个单位，以第一个单位为准。<br />**&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用**
    // less是完全支持css语法的
// 提供许多强大的语法功能
// 文件引入的还是css文件，因为浏览器不能识别less文件；
// less只是程序员自己开发使用的css预处理器（预处理语言）；
body {
 width: 40vw; 
 height: 50px; 
 // 运算 加减乘除
 width: 400px + 500px;
 width: 400px - 200px;
 width: 200px * 2;
 // 除法 需要加 括号()
 height: (200px / 2);
 // 计算vw
 width: (100vw * 100 / 375);
}
// 嵌套：后代选择器；子代选择器；伪类或者伪元素
.a {
 > .b {
     color: yellow;
     .c {
         color: pink;
         .d {
             color: red;
         }
     }
     .f {
         color: green;
     }
 }
}
.a{
 &::after{
     color: black;
     &:hover{
         color: pink;
     }
 }
}

    变量

    例如： 把颜色提前存储到一个容器，设置属性值为这个容器名
    变量：存储数据，方便使用和修改。
    语法：
    定义变量：@变量名: 值;
    使用变量：CSS属性：@变量名;

    混合mixin

    可以装一堆代码，看代码理解： ```html // less变量 @

@themColor: red; 可以指定页面主体颜色 @itemColor:blue;

// sass变量& div { color: red; background-color: pink; border: 5px solid @themColor; } // 🔥混合mixin .atCont() { display: flex;justify-content: space-between; align-items: center; } div {

> .box {
    .atCont();
    color:@themColor;
}

} // 🔥🔥🔥创建使用精灵图的混合 传参 变量 封装 js .sprites(@x,@y,@size) { background-image: url(http://md.zbztb.cn/uploads/205433780907/sprites.png); background-repeat: no-repeat; background-position: @x @y; background-size: @size; } div { .sprites(-200px,-90px,200px); color: red; } // 这种注释不会被css生成 / 这种注释会被css生成 /

生成对比：<br />![](http://md.zbztb.cn/uploads/205433780907/%E7%B2%BE%E7%81%B5%E5%9B%BE%E6%B7%B7%E5%90%88.png#crop=0&crop=0&crop=1&crop=1&id=L7rU2&originHeight=236&originWidth=782&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
<a name="9e3a140c"></a>
## b站案例：
示图：![](http://md.zbztb.cn/uploads/205433780907/1652286098231.png#crop=0&crop=0&crop=1&crop=1&id=MyqwQ&originHeight=519&originWidth=305&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
<a name="fa7a977a"></a>
### 注意点：
<a name="1499fca7"></a>
#### 导航--水平方向滚动滑轴
新增：overflow-x: auto; 水平方向溢出加滚动条<br />           white-space: nowrap; 不换行<br />方法1： 设置ul 标签为flex；<br />方法2： 设置li标签为行内块；<br />ul  li  中元素设置为行内块时，相邻元素因为换行，页面显示为之间空格间隙：<br />        解决方法：1.设置空格的父元素字体大小为0px;<br />                           2.单独设置要显示的文字 字体大小；<br />html代码
```html
<nav>
            <ul class="nav-bili">
                <li><a href="#">首页</a></li>
                <li><a href="#">动画</a></li>
                <li><a href="#">番剧</a></li>
                <li><a href="#">国创</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">舞蹈</a></li>
              .........多个li
            </ul>
            <div class="down">
                <a class="iconfont general_pulldown_s  "></a>
            </div>
        </nav>

CSS 设置ul标签 为flex

/* 导航 */
nav {
    height: 37px;
    /* background-color: skyblue; */
    display: flex;
    align-items: center;
}
.nav-bili {
    height: 100%;
    display: flex;
    🎃overflow-x: auto;   
    flex: 1;
}
.nav-bili li {
    /* flex: 1; */
    display: flex;
    /* justify-content: center; */
    💥加padding来撑大li💥
    padding: 0 16px;
    align-items: center;  
}
.nav-bili a {
    font-size: 14px;
    color: #333333;
    /* 继承,a标签中的字体颜色继承父元素
            可以写在初始化a  中 */
    /* color:inherit; */
    🎃white-space: nowrap;
}
nav .down {
    width: 40px;
    text-align: center;
    line-height: 37px;
}
nav .down .general_pulldown_s {
    font-size: 20px;
    color:#ccc;
}
.nav-bili li:hover {
    border-bottom: 1px solid #FB7299;
}
.nav-bili li:hover a{
    color: #FB7299;
}

播放列表：

新属性：1. gap:10px; 不用再换行

  1. 设置子项宽度，流出中间空隙 calc(50% - 5px);

    <ul class="items">
         <li>
             <a href="#" class="item">
                 <div class="pic">
                     <img src="./images/1.jpg" alt="">
                 </div>

                 <div class="title">
                     打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
                 </div>
             </a>
             <div class="bottom">
                 <div class="play">
                     <div class="iconfont icon_shipin_bofangshu"></div>
                     <div>36.9万</div>
                 </div>
                 <div class="words">
                     <div class="iconfont icon_shipin_danmushu"></div>
                     <div>4545</div>
                 </div>
             </div>
         </li>

    .content {

 margin-top: 82px;
 padding: 0 10px;
 display: flex;
 justify-content: center;
}
.content .items {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 🎃/* 设置flex一行中盒子之间的间隔10px 
            不能换行*/
 /* gap: 10px; */
}
.content .items li {
 🎃/* 利用calc运算 计算间隔 */
 width: calc(50% - 5px);
 position: relative;
 margin-top: 10px;
}
.content .items .title {
 font-size: 12px;
 color: #333333;
}
.content .item .pic img{
 width: 100%; 
 /* height: 97px;   */
}
.content  li .bottom {
 position: absolute;
 width: 100%;
 height: 18px;
 padding: 0 3px;
 background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.8));
 bottom: 35px;
 left: 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.content .items li .play,
.content .items li .words {
 display: flex;
 align-items: flex-end;
 color: #fff;
 font-size: 12px;
}
.icon_shipin_bofangshu,
.icon_shipin_danmushu {
 font-size: 12px;
 margin-right: 3px;
}

    渐变

    回顾使用方法

    小测：

    页面导入样式时，使用link和@import有什么区别？ ```javascript

  2. link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
  3. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
  4. import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
  5. link支持使用js控制DOM去改变样式，而@import不支持; ``` Label的作用是什么？是怎么用的？
  • label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
  • <label for="Name">Number:</label>
  • <input type="text" name="Name" id="Name"/>
  • <label>Date:<input type="text" name="B"/></label>

label.png输入框焦点
代码理解：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>label input.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <form action="">
      <!-- label 的for 和 input的id 一致 -->
      <label for="username">点击我 输入框也会获得焦点哦</label>
      <input type="text" id="username">
    </form>
  </body>
</html>