less学习笔记

最新推荐文章于 2021-08-04 08:17:04 发布

原创最新推荐文章于 2021-08-04 08:17:04 发布 · 907 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css less 学习笔记

Web前端专栏收录该内容

15 篇文章

订阅专栏

less中的注释：
1. /**/和//；
2. 注意：css中是不支持//注释的，所以也不会被编译成css；
变量：
1. 综述：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了
2. 用法：@变量名：变量值；

混合：

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
我们还可以带参数地调用，就像使用函数一样。

eg：

      
       
        // LESS
       
       
         
       
       
        .rounded-corners (@radius: 5px) {
       
       
          border-radius: @radius;
       
       
          -webkit-border-radius: @radius;
       
       
          -moz-border-radius: @radius;
       
       
        }
       
       
        #header {
       
       
          .rounded-corners;//不带参数引用，则使用默认值
       
       
        }
       
       
        #footer {
       
       
          .rounded-corners(10px);//传递参数
       
       
        }
       
       
         
       
       
        /* 生成的 CSS */
       
       
         
       
       
        #header {
       
       
          border-radius: 5px;
       
       
          -webkit-border-radius: 5px;
       
       
          -moz-border-radius: 5px;
       
       
        }
       
       
        #footer {
       
       
          border-radius: 10px;
       
       
          -webkit-border-radius: 10px;
       
       
          -moz-border-radius: 10px;
       
       
        }

匹配模式：

综述：相当于if-根据你传入的不同值而找到相对应的代码来执行，最后要跟上一个带@_的模式来写匹配任意参数的，即公共的部分；

eg：

      
       
        .mixin (dark, @color) {
       
       
          color: darken(@color, 10%);
       
       
        }
       
       
        .mixin (light, @color) {
       
       
          color: lighten(@color, 10%);
       
       
        }
       
       
        .mixin (@_, @color) {//通配变量@_ ，写公共的部分代码
       
       
          display: block;
       
       
        }
       
       
         
       
       
        //现在，如果运行:
       
       
        @switch: light;
       
       
         
       
       
        .class {
       
       
          .mixin(@switch, #888);
       
       
        }
       
       
        //就会得到下列CSS:
       
       
        .class {
       
       
          color: #a2a2a2;--匹配了light
       
       
          display: block;
       
       
        }

运算：运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

多用宽高的运算，而颜色直接取值；

eg:

      
       
        // LESS
       
       
         
       
       
        @the-border: 1px;
       
       
        @base-color: #111;
       
       
        @red:        #842210;
       
       
         
       
       
        #header {
       
       
          color: @base-color * 3;
       
       
          border-left: @the-border;
       
       
          border-right: @the-border * 2;
       
       
        }
       
       
        #footer { 
       
       
          color: @base-color + #003300;
       
       
          border-color: desaturate(@red, 10%);
       
       
        }
       
       
        /* 生成的 CSS */
       
       
         
       
       
        #header {
       
       
          color: #333;
       
       
          border-left: 1px;
       
       
          border-right: 2px;
       
       
        }
       
       
        #footer { 
       
       
          color: #114411;
       
       
          border-color: #7d2717;
       
       
        }

嵌套规则：我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

eg:

      
       
        // LESS
       
       
         
       
       
        #header {
       
       
          h1 {
       
       
            font-size: 26px;
       
       
            font-weight: bold;
       
       
          }
       
       
          p { font-size: 12px;
       
       
            a { text-decoration: none;
       
       
              &:hover { border-width: 1px }
       
       
            }
       
       
          }
       
       
        }
       
       
         
       
       
        /* 生成的 CSS */
       
       
         
       
       
        #header h1 {
       
       
          font-size: 26px;
       
       
          font-weight: bold;
       
       
        }
       
       
        #header p {
       
       
          font-size: 12px;
       
       
        }
       
       
        #header p a {
       
       
          text-decoration: none;
       
       
        }
       
       
        #header p a:hover {
       
       
          border-width: 1px;
       
       
        }

向写html结构嵌套一样明晰样式之间的关系；

可以方便的写hover，在a标签中：

      
       
        a{
       
       
          //&代表它的上一层选择器
       
       
          &:hover{
       
       
             color:red
       
       
          }
       
       
        }

@arguments变量： @arguments包含了所有传递进来的参数.

如果你不想单独处理每一个参数的话就可以像这样写:

      
       
        .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { 
       
       
          box-shadow: @arguments;
       
       
          -moz-box-shadow: @arguments;
       
       
          -webkit-box-shadow: @arguments;
       
       
        }
       
       
        .box-shadow(2px, 5px);
       
       
        将会输出:
       
       
        box-shadow: 2px 5px 1px #000;
       
       
        -moz-box-shadow: 2px 5px 1px #000;
       
       
        -webkit-box-shadow: 2px 5px 1px #000;

避免编译、！important以及总结：
1. 避免编译：用法：~"输出内容"；
2. !important关键字：自动给编译后的css样式都加上!improtant；

命名空间：有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

    
     
      #bundle {
     
     
        .button () {
     
     
          display: block;
     
     
          border: 1px solid black;
     
     
          background-color: grey;
     
     
          &:hover { background-color: white }
     
     
        }
     
     
        .tab { ... }
     
     
        .citation { ... } 
     
     
      }
     
     
      //你只需要在 #header a中像这样引入 .button:
     
     
      #header a {
     
     
        color: orange;
     
     
        #bundle > .button; 
     
     
      }