less学习笔记

less基础内容

  1. 使用@来声明变量
  2. url变量
    /* Less */
@images: "../img";//需要加引号
body {
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
body {
    background: url("../img/dog.png");
}
  3. 变量用于字符拼接使用方法：
    @className: box;
@mainColor: #e92323;
.@{className} {
    color: @mainColor;
}

    等价于

    .box{
    color: #e92323;
}
  4. 嵌套使用：

    • &，当需要连接时使用&，代表上层选择器的名字，如：

      .class {
    &:hover{
        cursor: pointer;
    }
    img {
        ...
    }
}

      此时 &:hover 等同于 .class:hover{} ;

      此时 img 等同于 .class img{} ;

  5. 媒体查询 @media
    .container{
    width: 750px;
    @media screen {
        @media (max-width: 768px){
            background-color: red;
        }
    }
    @media tv {
        background-color: yellow;
    }
}

    等同于

    @media screen and (max-width: 768px){
    .container{
        background-color: red;
    }
}
@media tv{
    .constainer{
        background-color: yellow;
    }
}
  6. 函数

    • 一些内置函数

      判断： isnumber, iscolor, isurl, 分别判断是否是一个数字，颜色，url

      颜色操作：lighten增加颜色亮度，darken降低颜色亮度，fade增加透明度，mix根据比例混合两种颜色，saturate增加颜色饱和度等等

      数学函数：ceil向上取整，floor向下取整，round四舍五入，sqrt平方根，abs绝对值，pow幂，percentage浮点数转换为百分比字符串等

    • 自己写函数

      .fun(){
    width: 100px;
}
.container{
    .fun();
}

      等同于

      .container{
    width: 100px;
}

    • 方法的条件筛选

      Less 没有 if else，可是它有 when

      /* Less */
#card{

    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
    border:solid #999 200px;
    background:#111;
    font-size:40px;
}

        - 比较运算有： > >= = =< <。
  - = 代表的是等于
  - 除去关键字 true 以外的值都被视为 false：

    • 数量不定的参数

      如果你希望你的方法接受数量不定的参数，你可以使用... ，犹如 ES6 的扩展运算符。

        /* Less */
  .boxShadow(...){
      box-shadow: @arguments;
  }
  .textShadow(@a,...){
      text-shadow: @arguments;
  }
  #main{
      .boxShadow(1px,4px,30px,red);
      .textShadow(1px,4px,30px,red);
  }

  /* 生成后的 CSS */
  #main{
    box-shadow: 1px 4px 30px red;
    text-shadow: 1px 4px 30px red;
  }

    • 循环方法

      Less 并没有提供 for 循环功能，可以使用递归去实现。

      /* Less */
.generate-columns(4);
.generate-columns(@n, @i:1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

/*生成后的CSS*/
.column-1 {
    width: 25%;
}
.column-2 {
    width: 50%;
}
.column-3 {
    width: 75%;
}
.column-4 {
    width: 100%;
}
  7. 混入: 一堆属性从一个规则集到另一个规则集。

    • 组合样式混入

    • 类混入

    • 函数混入

      /*混入*/
/*组合样式的例子*/
.w50{
    width: 50%;
}
.f_left{
    float: left;
}
.f_right{
    float: right;
}
/*类混入*/
.w50-f_left{
    .w50();
    .f_left();
}
/*函数混入*/
/*定义函数*/
.w50(){
    width: 50%;
}
.f_left(){
    float: left;
}
.f_right(){
    float: right;
}
/*
1. 定义了参数(无默认值)，调用时必须传参
2. 怎么定义默认值 和定义变量值是一样的
3. 定义了参数(有默认值)，可传可不传
*/
.f(@direction:left){
    float: @direction;
}
.borderRadius(@width:100px){
    border-radius: @width;
}
.w50-f_left{
    .w50();
    .f(right);
    .borderRadius(20px);
}

      输出的css为：

      
/*混入*/
/*组合样式的例子*/
.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*类混入*/
.w50-f_left {
  width: 50%;
  float: left;
}
/*函数混入*/
/*定义函数*/
/*
1. 定义了参数(无默认值)，调用时必须传参
2. 怎么定义默认值 和定义变量值是一样的
3. 定义了参数(有默认值)，可传可不传
*/
.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
}
  8. 继承 extend

    能够继承所匹配的所有样式，但不会继承其子元素的内容

    .container{
    width: 100px;
    .other{
        color: red;
    }
}
.content{
    &:extend(.container);
}
.span{
    &:extend(.container .other);
}

    等同于

    .container,
.content {
  width: 100px;
}

.container .other,
.span {
  color: red;
}
  9. 运算
    @num: 9;
ul{
    width: 100%*@num;
    li{
        width: 100%/@num;
        color: red+yellow+blue;
        background: gray*0.7;
        /*内置函数*/
        border-color: darken(red,20%);
    }
}

    等同于

    ul {
  width: 900%;
}
ul li {
  width: 11.11111111%;
  color: #ffffff;
  background: #5a5a5a;
  /*内置函数*/
  border-color: #990000;
}
  10. 导入@improt

less中可以通过@import来导入外部文件，@import可以放在代码中任意位置，导入文件时处理方式取决于文件的扩展名。

@import "style";      // 导入 style.less
@import "style.less";  // 导入style.less
@import "style.php";   //  style.php 作为LESS文件被导入
@import "style.css";   // 文件内容被原样输出

一个网站常常是有多个模块组成，如果只使用一个 .less 文件，编辑起来非常不便，也不利于分工协作。此时，就可以为每个模块单独创建 .less 文件，然后通过 @import指令将它们合并成一个文件。

  1. 其他

    • 注释

      /**/ CSS原生注释，会被编译在CSS文件中

      / / Less提供的一种注释，不会被编译在CSS文件中

    • 避免编译

      /* Less */
#main{
    width:~'calc(300px-30px)';
}

/* 生成后的 CSS */
#main{
    width:calc(300px-30px);
}

      结构：` ~ '值' `

    • 使用JS

      /* Less */
@content: `"aaa".toUpperCase()`;
#randomColor{
    @randomColor: ~"rgb(`Math.round(Math.random) * 256`, `Math.round(Math.random) * 256`, `Math.round(Math.random) * 256`)";
}
#wrap{
    width: ~"`Math.round(Math.random) * 100`px";
    &:after{
        content: @content;
    }
    height: ~"`window.innerHeight`px";
    alert: ~"`alert(1)`";
    #randomColor();
    background-color: @randomColor;
}

/* 生成后的CSS */

// 弹出1
#wrap{
    width: 随机值(0~100)px;
    height: 743px;
    background: 随机颜色;
}
#wrap:after{
    content: "AAA";
}

      参考 ：https://segmentfault.com/a/1190000012360995?utm_source=tag-newest

posted @ 2019-09-16 15:16  成全OMG  阅读(124)  评论(0)  编辑  收藏  举报