less学习,快学快用!

第一次在简书上写博客,这也是我的第一篇博客!

less我应该是css的升级版了哈 _...好处懂的自然懂!
less: css的动态语言,语法类似css,增加了很多实用的东西,如:变量、继承、运算、函数
更利于方便和编写!
使用方式总的来说3种吧!
1、工具的方式--Koala
官网:http://koala-app.com/index-zh.html,直接下来安装即可(下载可能有点慢)

  用法:
            install完后,项目目录下建立.less文件,
            将项目目录拖拽到Koala工具中在设置中
            可以将语言设置为中文的,重启下Koala即可
            项目拖拽进来,会自动读取.less文件,
            点击显示的文件,右下角点击 '执行编译',
            会在存放.less的目录下生成.css文件,
            index.html等页面直接引用生成的.css文件
1.png

2、终端的使用方式--cnpm(我的是window32系统)
node环境自己安装下,最好装下淘宝镜像,为以后下载东西都增加速度!
cnpm install less -g 全局安装
检查:lessc -version 简写 lessc -v
在项目目录中写好.less代码后,然后使用命令来进行编译

  Tip: Shift+右击  选择 '在此处打开命令窗口'

  2-1、cd 到项目目录:执行 lessc css\index.less > css\index.css
  2-2、cd到存放less文件目录:执行 lessc index.less index.css
  参数:-x 输出时对.css进行压缩
            --clean-css 还原为正常的css文件,方便查看

Tip:less编译的时候,// 我是注释  和  /*****我是注释*****/,两种的区别,
      第一种编译后会去除,第二种则不会被去除,可自行编译查看.css文件
4.png

3、直接在页面使用.less(需要配合less.js),来使用

      <link rel="stylesheet/less" href="./css/index.less">
      <script src="./assets/less.js"></script>

//这种会增加 http 的请求,不是最好的,最好编译后再去使用
//注:link 中 rel="stylesheet/less" 不要忘记写 less!!哦,否侧出不来

4、变量:

      //声明变量:
                      @min_w:100px;
                      @min_h:100px;
                      @orange:orange;

     // 使用:
                     .div01{
                           width:@min_w;
                            height:@min_h;
                            background-color:@orange;
                       }

5、 混合:定义了一个border的样式,class='div1' 去使用,class='div2'和div1的样式是一样的 直接就可以使用div1的样式,不同的自己写

      .div1{
        width:@min-w;
        height:@min-h;
        background-color:@orange;
        .border;
    }
    .border(){
        border:solid 2px #353535;
    }
    .div2{
        .div1;
        margin-top:100px;
    }

6、混合可带参数(个人理解为:定义了一个函数,调用改函数的时候传一个参数,根据参数来使用什么值)

    .border_2(@border-color2:red){ // 类似定义一个函数
        border:2px solid @border-color2;
    }
    .div3{
        width:@min-width;
        height:@min-height;
        margin-top:10px;
        .border_2(blue);  // 这里调用函数,传参数过去
    }

7、匹配模式:根据接收的参数,来使用哪个样式
如:7-1、元素的定位

    .position_rule(r,@bgColor:#0093dd){
        position:relative;
    }
    .position_rule(a,@bgColor:#0093dd){
            position:absolute;
    }
    .position_rule(f,@bgColor:#0093dd){
          position:fixed;
    }
    .position_rule(@_,@bgColor:#0093dd){
          width:200px;
          height:120px;
          background-color:@bgColor;
          left:160px;
          top:100px;
    }
    .position_div{
        .position_rule(f,purple);
    }

7-2、 画一个三角

          .triangle_rule(top,@w:5px,@c:red){
                border-width:@w;
                border-color:transparent transparent @c transparent;
                border-style:dashed dashed solid dashed;
          }
        .triangle_rule(bottom,@w:5px,@c:red){
                border-width:@w;
                border-color:@c transparent transparent transparent;
                border-style:dashed dashed solid dashed;
          }
        .triangle_rule(left,@w:5px,@c:red){
                border-width:@w;
                border-color:transparent @c transparent transparent;
                border-style:dashed dashed solid dashed;
          }
        .triangle_rule(right,@w:5px,@c:red){
                border-width:@w;
                border-color:transparent transparent transparent @c;
                border-style:dashed dashed solid dashed;
        }
      .triangle_rule(@_,@w:5px,@c:red){
              width:0;
              height:0;
              overflow:hidden;
              margin:10px auto;
      }
      .triangle{
            .triangle_rule2(right,20px);
      } 

Tip: @_ 是固定的格式,匹配方法下可以定义一些公用的样式

8、运算:+ - % / 变量可以进行运算,px可以省略不写,color 也是可以的,没必要
@test_sum_w:200px;
@test_sum_h:100px;

      .sums{
          // width:@test_sum_w;
          // height:@test_sum_h;
          // background-color:#001203;
           //不写px 也是可以的
           width:@test_sum_w+200px;
           height:@test_sum_h+100;
           background-color:#001203+120;
           margin:10px auto;        
      }

9、嵌套:这个非常好用实用,父子关系看起来比较明确。
Tip: 可以使用 & 来代表 父元素(上一层选择器)

    //index.html
        <div class="list-pro-help">
               <ul class="list-pro">
              <li><a href="#">Music-Name:<span>有种情怀叫赵雷</span></a></li>
              <li><a href="#">Music01:<span>未给姐姐的信</span></a></li>
              <li><a href="#">Music02:<span>吉姆餐厅</span></a></li>
              <li><a href="#">Music03:<span>三十岁的女人</span></a></li>
              </ul>
        </div>

        //index.less

        .list-pro-help{
              margin:10px;
            .list-pro{
                  width:400px;
                  margin:10px auto;
                  border:1px solid #ccc;
                  padding:10px 10px;
                  background:rgba(220,140,89,0.6);
            li{
                  border-bottom:1px dashed blue;
                  padding:10px 0px;
            }
            a{
                  text-decoration:none;
                  color:#353535;
                  &:hover{
            color:red;
                    text-decoration:underline;
            }
            }
            span{
                font-size:20px;
                color:green;
            }
          }
        }

10、@arguments变量:类似调用函数时,所接收到的所有实参arguments

            .box_rule(@s:1px,@t:solid,@c:#ccc){
            border:@arguments;
            }
            .box1{
          .box_rule();
              }

处理如:box-shadow等

          .box_rule(@shadow){
                box-shadow:@shadow;
            }
          h3{
                @help_rule:1px 1px 2px red;
                .box_rule(@help_rule);
                  border:1px solid @ccc;
                  width:200px;
                  hieght:120p;
           }

@help_rule 和 @shadow 是相等的,还有如:transition 、transform处理起来就简单了
11、避免编译:
如:css3种提供 calc() 方法 是让浏览器去计算

      .test02{
        width:calc(300px-30px); 
        }
   //这样写,进过来less编译后,会直接的输出结果,如何让他不要被编译呢
          //输出: .test02{width:270px}

    .test02{
      width:~'calc(300px-30px)'; //单/双 引号 都可以
    }

        //输出:.test02{width:calc(300px-30px);}

这样可以做到 不让less 去编译一些东西。
End:
less官网:http://less.bootcss.com
慕课网推荐:http://www.imooc.com/learn/102

    好了快学的也就这样多了,真的是第一次写博客,
    不喜勿哈...…^_^  ,希望能有点帮助吧,
    最近喜欢上了听民谣--赵雷还是挺不错的,
    个人网站在努力的备案中..
                                            form the Suns丶Boy ^_^

推荐阅读更多精彩内容