标签：Less color dashed 笔记 选择器 学习 width border transparent

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：取反

标签：Less,color,dashed,笔记,选择器,学习,width,border,transparent
来源： https://www.cnblogs.com/yumengcode/p/14848064.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。