zoukankan      html  css  js  c++  java

  • 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{
     750px;
    @media screen {
        @media (max- 768px){
            background-color: red;
        }
    }
    @media tv {
        background-color: yellow;
    }
}

      等同于

      @media screen and (max- 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(){
     100px;
}
.container{
    .fun();
}

        等同于

        .container{
     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} {
         (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

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

      • 组合样式混入

      • 类混入

      • 函数混入

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

        输出的css为：

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

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

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

      等同于

      .container,
.content {
   100px;
}

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

      等同于

      ul {
   900%;
}
ul li {
   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{
    ~'calc(300px-30px)';
}

/* 生成后的 CSS */
#main{
    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{
     ~"`Math.round(Math.random) * 100`px";
    &:after{
        content: @content;
    }
    height: ~"`window.innerHeight`px";
    alert: ~"`alert(1)`";
    #randomColor();
    background-color: @randomColor;
}

/* 生成后的CSS */

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

        参考 ：https://segmentfault.com/a/1190000012360995?utm_source=tag-newest
  • 相关阅读:
    shell脚本空行造成“: not found.sh“报错
    MySQL实现分组排序（8.0版本以下ROW_NUMBER() OVER()）
    vscode远程主机
    nginx-ingress-controler改写上下文
    nginx-ingress-controller自定义参数
    kubernetes安装nginx-ingress-controller服务
    二进制kubernetes升级
    C++关键字完整版
    virtio、vhost和 vhost-user
    Tomcat端口占用报错时的排除办法
  • 原文地址：https://www.cnblogs.com/chengquanomg/p/11527437.html
Copyright © 2011-2022 走看看