css中Less的使用_汪刚_2023.4.28

今日学习内容：
1.css基础

• CSS的弊端
  
  • CSS是一门非程序式的语言，没有变量、函数、作用域等概念
    
  • CSS需要书写大量的没有逻辑的代码，CSS的冗余程度是比较高的
    
  • CSS没有很好的计算能力
    
  • 如果是没有很多经验的工程师比较难写出易于维护的CSS代码的
    
• Less的介绍
  
  • LESS（leanerStyle Sheets的缩写），是一门CSS的扩展语言，也称为CSS的预处理器。、
    
    • 它在原有的css的基础上增加了新的程序式语言的特性，比如：函数、变量、计算等等。
      
    • 常见的CSS的预处理器：Sass、Less、Stylus。
      
• Less中的变量使用
  
  • 变量是指没有固定的值，并且可以改变里面装的值。简单理解就是一个装具体值的一个盒子
    
  • @变量名: 值；
    
  • 注意点：
    
    • 必须要以 @ 开头
      
    • 不能包含特殊字符
      
    • 不能以数字开头
      
    • 大小写敏感（@Color 和@color 是两个变量）
      
• Less的编译
  
  • 下载编译插件 easy less
    
  • 创建less文件
    
  • 书写代码后保存会自动生成css文
    
• Less的嵌套
• less代码
•       生成的css代码
•       Less运算
  
  • 任何的数字、颜色或者变量都可以参与计算，less为我们提供了加(+)、减(-)、乘(*)、除(/)算术运算。
    
  • 注意点：
    
    • 除法必须要加括号
      
    • 运算符的左右两边要用空格隔开 1px + 50
      
    • 如果多个值参与计算，最终的单位选择最先出现单位的这个值的单位。
      
• 使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同的设备，
• 通常设备的划分情况如下：
  
  • 小于768px的宽度为超小屏幕
    
  • 768~992之间的为小屏设备
    
  • 992~1200px之间的是中等屏幕
    
  • 1200px以上的是大屏幕
  • 2.响应式布局的容器
  • 响应式需要一个父级作为布局容器，来配合子元素实现变化效果
  • 父级容器版心的尺寸
  • 
    
    • 小于768px的宽度为超小屏幕 版心宽度设置为100%
      
    • 768~992之间的为小屏设备  版心宽度设置为750px
      
    • 992~1200px之间的是中等屏幕 版心宽度设置为970px
      
    • 1200px以上的是大屏幕 版心宽度设置为1170px
      
  • 遇到问题：无
  • 解决方案：无