less和cass的相关知识和区别

less相关知识点

/* transform 是css3中的变形动画 /
/ 他的属性值translate表示位移 -50%表示位移半个自身的宽高 /
/ translate有两个参数 第一个是X轴第二个是Y轴 */
transform: translate(-50%,-50%);

    引入外部的less文件的时候
    1. 通过link引入less rel后面需要改成stylesheet/less
    2. script标签需要放在引入less文件的link后面
    3. 我们运行文件的时候，需要走http协议

 <!-- 
     在我们的vscode中 live server这个插件安装后 
     我们可以通过本地服务器去运行我们的页面
     这个时候 我们的请求都是http请求
  -->

  //单行注释 和js里是一样的
  /*
  111
  111
  11
  1111
  */
  /* 和JS里面的多行注释一样 */
  
  //单行注释不会被编译 多行注释则会编译 并出现在编译后的文件里

  <!-- // 什么是less中的变量  
  // 我们通过@开头定义变量 
  
  // 定义全局变量
  @w:400px;
  @c:gold;
  @m:purple;
  // 以上三个@w,@c,@m他们都是全局变量 因为他是定义在{}之外的
  // 我们也可以将一个变量的值赋给另一个变量
  @h:@w;
  .box1{
      // 定义局部变量
      // 局部变量 只能在当前的这个{}里面使用 不能再其他地方使用
      @m:pink;
  
      // 使用我们定义的变量
      width: @w;
      height: @h;
      background: @c;
      // 如果局部变量和全局变量重名的时候，优先使用局部变量
      color: @m;
  }
  .box2{
      @m:blue;
      @m:green;
      // 这里的@m是局部变量
      // 如果局部变量重名，那么我们使用就近原则
      width: @w;
      height: @h;
      background: @c;
      color: @m;
  
  } -->



  <!-- // 什么是插值 @m可以充当一个css属性值
  @m:100px;
  // 还可以当什么？当一个选择器  当一个属性名
  
  @d:div;     //变量插值
  @w:width;
  
  
  //变量插值的用法  @后面的变量名要加花括号
   @{d}{
       @{w}:@m; //width:100px
       height: 100px;
       background: red;
   }
   -->


   <!-- @w:200px;
   @h:200px;
   
   div{
       width: @w;
       height: @h;
       background: pink;
       position: absolute;
       left: 50%;
       top: 50%;
       margin-left: -(@w/2);
       margin-top: -(@h/2);
       // 运算的时候 一定要把先运算的加上括号
   } -->




   <!-- //  animate我们学Jq的时候 animate是以渐变的方式让属性变化 形成动画的效果

   // .animate(@name,@time,@mode,@delay){
   //     // transition: @name @time @mode @delay;
   //     // 是我们控制动画变化的
   //     // transition
   //     // 第一个参数是我们要形成动画的属性 默认的是all 
   //     // 第二个参数 动画的时间
   //     // 第三个参数曲线速度
   //     // 第四个参数 定义从何时开始
   
   //     //有一个东西 叫 arguments 
   //     //就是我们把所有的参数都收集过来了 是一个参数的集合
   //     // arguments中保留了调用混合时，我们传入的所有参数 也就是说
   //     // 我们调用这个animate混合的时候 传进去的所有参数 都保留在了arguments中
   //     transition: @arguments;
   // }
   // ...叫可变参数
   .animate(...){
       transition: @arguments;
   } -->

less混合

       // 什么是混合
       // 1.将同样的 重复使用的代码封装起来 封装成一个单独的类 然后在需要使用的地方调用封装好的类即可
       // 2.在预处理的时候less会自动的将封装好的类中的代码拷贝过来
       // 3.其本质就是ctrl+c ctrl+v
       
       // 注意
       // 如果混合名称后面没有() 预处理的时候 会保留混合的代码
       // 如果混合名称后面有() 预处理的时候就不会保留混合的代码
    //  小三角  如何去做小三角
       // 我们现在创建一个混合  就是用来做小三角的
       
       // 匹配模式  
       // 通用匹配 你去匹配其他的之前 先走一遍通用匹配 
       // 无论同名的哪一个混合被匹配到了  都会先执行通用匹配中的代码
       // @_
       .triangle(@_,@width,@color){
   
           width: 0px;
           height: 0px;
           border-style: solid solid solid;
           font-size: 10px;
           border-width: @width;
       }
       
       
       // Down表示向下
       .triangle(Down,@width,@color){
   
           // width: 0px;
           // height: 0px;
           // border-style: solid solid solid;
           // border-width: @width;
           border-color: @color transparent transparent transparent;
       }
       // 向左的三角
       .triangle(Left,@width,@color){
   
           // width: 0px;
           // height: 0px;
           // border-style: solid solid solid;
           // border-width: @width;
           // 上右下左的顺序
           border-color: transparent @color transparent transparent ;
       }
       // 向右的三角
       .triangle(Right,@width,@color){
   
           // width: 0px;
           // height: 0px;
           // border-style: solid solid solid;
           // border-width: @width;
           border-color: transparent transparent transparent @color ;
       }
       .triangle(Top,@width,@color){
   
           // width: 0px;
           // height: 0px;
           // border-style: solid solid solid;
           // border-width: @width;
           border-color: transparent transparent @color transparent ;
       }
       div{
   
           .triangle(Top, 80px, green)
       } -->

在一个less文件中导入另一个less文件

// 你要用另一个less文件里面的代码 你就要导入 

// 学css的时候 导入式
@import "triangle.less"