• Less小谈


    1.Less是什么?

            1.Less 是一门 CSS 预处理语言,就是css语言的超集,比css更丰满,它扩展了 CSS 语言,增加了变量、Mixin(混合语法)、函数等特性,使 CSS 更易维护和扩展。

            

            2.Less 可以运行在 Node 或浏览器端。可以直接把样式文件“style.css”直接改成“style.less”,能正常工作。如:<link rel="stylesheet" href="1.less">(成功了)

            3.浏览器端用法

                   需要一个脚本的支持,这个脚本我们把他叫做less.js(需要下载)

                   代码<link rel="stylesheet/less" type="text/css" href="styles.less" />

                  <script src="less.js" type="text/javascript"></script>

     

    2.Less有什么呢?

          1.变量

                       1.定义变量
                            @变量名:变量值

                     2.使用

                       代码如下:

                               @w:100px;

                                body{

                                       @w;

                                        }

               2.可以嵌套

                    代码如下:

                          如:body{

                                             100px;

                                                p{
                                             height:100px;
                                                  }
                                              }

                3.Minxin

                    Minxin其实也是一种嵌套,它充许你将一个类嵌入到另一个类中,而被嵌入的这个类也称为是一个变量。就是你可以用一个类定义CSS,然后把整个为当作一个变量来使用,嵌入到另一个类中当作它的属性。   

                      代码如下:              

                                      /* 定义一个类 */
                                    .r(@radius: 5px) {
                                              -moz-border-radius: @radius;
                                              -webkit-border-radius: @radius;
                                                border-radius: @radius;
                                           }
                                    /* 定义的类应用到另个一个类中 */
                                      #header {
                                         .r;
                                        }
                                       #footer {
                                       .r(10px);
                                          }

                     

                4.Import

                         我们可以在开发阶段将样式放到多个文件中,最后通过@import 的方式合并,还可以相互引用。
                                   // main.less
                                         @btnColor: red;
                                         @import url('_buttom.less');

                                         body{
                                          1024px;
                                             }

                                  // _buttom.less
                                       .btn{
                                        color: @btnColor;
                                           }

             5.函数
                           内置函数

                                   - lighten:将一个颜色变亮
                                   + lighten(#000, 10%); // #1a1a1a
                                    - darken:将一个颜色变暗
                                   + darken(#000, 10%); // #e6e6e6

           总结:以上是我个人理解的东西,如有错误,欢迎指出!

  • 相关阅读:
    ClickHouse 详解
    SparkStreaming(二)--SparkStreaming整合Kafka
    SparkStreaming(一)--核心概念及算子
    毕设进度-3月22日
    毕设进度-3月21日
    毕设进度-3月14日
    毕设进度-3月13日
    毕设进度-3月12日
    毕设进度-3月11日
    毕设进度-3月10日
  • 原文地址:https://www.cnblogs.com/zhuzhu88/p/6719320.html
Copyright © 2020-2023  润新知