VUE学习之less

关于less

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。

less转css的一些操作
      cnpm install -g less          //下载
      lessc less文件                 //转css后输出到控制台
      lessc less文件 css文件   //将less转到指定css文件里
 
//引入外部less文件
<link rel="stylesheet/less" type="text/less" href="./styles/index.less">  //要手动修改rel="stylesheet/less"不然会报错

//因为默认的rel="stylesheet" mime类型是text/css,而不是text/less
//注意:即使改了type="text/less"也没用,因为这只是辅助说明引入的文件是less类型,并不起什么作用。
//只有改了rel="stylesheet/less"才能识别less类型文件

 <!-- 转换less->css的js文件 -->
    <script src="../../工具/less-3.12.2.js"></script>

混入

//混入
.one{
    color: teal;
}
body{
    //使用
    .one()
}

加成乘除规律

    font-size: 30px+10;  //40px
    font-size: 5cm+10mm;  //6cm
    font-size: 30px+10rem;  //40px
    font-size: 30px+10cm;  //407.952755px

    font-size: 3rem+10;  //13rem
    font-size: 3rem+10px;  //13rem
    font-size: 10+10px;  //20px

    font-size: 2+5px+3cm;  //-106.385826px

总结:

m,n都为绝对单位,转换后在相加

m,n有一个相对单位,一个绝对,左边为准

m,n只有一个为单位,有单位的为准

嵌套

body{
    //body>a()  报错

    //嵌套 body div
    div{color: red;}

    //&代表当前选择器 现在为body 
    &>a{color: black};
    &:hover{};
    &>a>a{  }
}

body{
    div{
        &>*{
            &:first-child{
                span{
                    color: blue;
                }
            }
        }
    }
}

//编译出来是 body div>*:first-child span{}

@规则

   @规则会提前到选择器外面,只有@规则会往外调,其他的顺序不变

// @min768:(min-width:768px);   //新版本
@min768:~"(min-width:768px)";  //旧版本

.component {
  width: 300px;
  @media @min768 {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
}

编译为:
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}

函数

 if函数:条件,true,false

div{
    &:before{
        content: if((5>3),'hello','world');
    }
}

 color("#aaa")   解析颜色,将代表颜色的字符串转换为颜色值

@mycolor:'#ccc';  //这是字符串,
// div{
//     color:@mycolor;     //如果不转的话会解析成color:'#ccc'
       color:color(@mycolor);   //color:#ccc
// }

each(列表/规则集,遍历规则) 

//@key @value @index  1开始
列表 key=index,value是内容
css规则集  key是属性名,value是属性值 

@list:range(5,12,3);  //范围函数,参数:开始,结束,步长

//生成选择器声明块
// each(@list,{
    //选择器声明要包{ }
//     .col-@{value}{
           //属性值的话直接放 
//         width: @value;
//     }
// })

//生成css规则
div{
    each(@list,{
        my-@{value}:@key
    })
}

  ceil(num)               向上取整
  floor(num)             向下取整
  percentage(num)  将浮点数转换为百分比字符串。
  round(num)           四舍五入取整
  pi()                          返回圆周率 π (pi);
  min(5, 10);             最小值
  max(5, 10);            最大值
  boolean(3<5)        返回boolean值

div{
    color:color(@mycolor);

    font-size:seil(12.4px);  //13px
    font-size:floor(12.4px);  //12px
    font-size:round(12.4px);  //12px

    height: pi()*10px;  //31.41592654px
    width: min(12px,4px,5px)  //4px
    width: max(12px,4px,5px)  //12px
}

命名空间

看起来像一个函数,命名空间的数据可以复用

//在空间里放选择器和声明规则

//命名空间 #one(){ }
#one(){
    .red{
        color:red
    };
    .blue{
        color: blue;
    }
}
div{
    //访问命名空间 命名空间名+选择器名
    #one.red();
}

//混入会转换到css中,命名空间不会转换到css中

//命名空间
#one(){
    .red{color:red};
    .blue{color: blue;}
}
div{#one.red();}

----编译成----
div{color: red;}      //只会再使用的地方转义

********************************************
//混入
#one{
    .red{color:red};
    .blue{color: blue;}
}
div{#one.red();}

---编译成-----
#one .red {color: red;}
#one .blue {color: blue;}    //混入被编译了
div {color: red;}

映射

//在命名空间里放规则,没有放选择器,有点属性的意思。可以理解为是命名空间的儿子吧

//映射
.one(){
    mya:'red';
    myb:'blue'
}

div{
    //使用
    color:.one[mya];
    background-color: .one[myb];
    // background-color: color(.one[myb]);
}

作用域

花括号内可以放任何东西,each函数、变量等

@var:red;
#page{
    @var:white;
    #header{
        color:@var;  //white
    }
//  @var:white;   //在作用域内,放哪都一样
}

导入

@import  '8-mo';     //相当于 8-mo.less

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页