Less学习笔记

Less

• less的使用

  • 以//开头的注释，不会被编译到css文件中

  • 以/**/包裹的注释会被编译到css文件中

  • 变量的语法：@变量名

  • 使用变量时，如果是直接使用则以@变量名使用

  • 作为类名，或者一部分值使用必须以@{变量名}的形式使用

  • 变量发生重名时，会优先使用比较近的变量

  • &表示外层的父元素

  • >表示子代元素

  • ：extends()对当前选择器扩展指定选择器的样式（选择器分组）

    • .juzhong {
      	width: 100px;
      	height: 100px;
          color: red
      }
      .juzhong:hover{
      	color: blue
      }
      
      .box {
          .inner {
          	&:extends(.juzhong all)
          }
          .wrapper{
      		&:extends(.juzhong)
          }
      }
      

  • 直接对指定的样式进行引用（p1()）

  • 使用类选择器可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins

    • .juzhong(@w,@h,@color) {
      	width: @w;
      	height: @h;
          color: @color 
      }
      
      .box {
          .inner {
      		.juzhong(100px,100px,pink)
          }
          .wrapper{
      		,juzhong(@color:black)
          }
      }
      

  • 混合函数可以直接设置变量，调用混合函数，按顺序传递参数

  • @import 引入其他less文件

  • Less的匹配模式

    • .trigger(L,@w,@c){
      	width: 0px;
          height: 0px;
          border-width: @w;
          border-style: dashed solid dashed dashed;
          border-color: transparent @c transparent transparent;
          overflow: hidden;
      }
      .trigger(R,@w,@c){
      	width: 0px;
          height: 0px;
          border-width: @w;
          border-style: dashed dashed solid dashed;
          border-color: transparent transparent @c transparent;
          overflow: hidden;
      }
      .trigger(T,@w,@c){
      	width: 0px;
          height: 0px;
          border-width: @w;
          border-style: solid dashed dashed dashed;
          border-color: @c transparent transparent transparent;
          overflow: hidden;	
      }
      

    • 把这个封装成单独的less文件

    • 在页面css导入功能less，直接使用类并进行传参。

  • Less的继承

    • #test{
      	&:extend(.father)
      }
      #test:extend(.father){
      	
      }
      

    • 继承实质上将.father选择器和#test组合成一个选择器，声明块使用.father的

    • all：继承所有和.father相关的声明块

    • 切记父类不能定义成混合(继承不灵活性能高 混合灵活性能低)

  • Less避免编译

    • ~“内容”
    • 里面的内容原封不动

• 响应式布局核心CSS3媒体查询选择器

  • @media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性
  • 媒体类型
    • all
    • screen
    • print
  • 媒体属性
    • width: 浏览器的窗口尺寸
    • device-width:设备尺寸
    • device-pixel-ratio(必须加webkit前缀)：像素比（以上三个媒体属性可加min和max前缀）
    • 横竖屏切换
      • orientation：landscape(横屏)
      • orientation：portrait(竖屏)
  • 关键字
    • only：处理浏览器尽量问题
    • and：连接一条查询规则
    • ,：连接多条查询规则
    • not：取反