zoukankan      html  css  js  c++  java
  • --外功篇-Less的学习日志-01-辅助理解Less--

    夏去秋来,星移斗转。

    小虾米在修炼一途中也听闻css之上还有更高深的虚招(样式处理),名为Less。

    然而只听闻其为“预处理样式”。片面之言,只是徒增疑惑罢了。

    今日得幸借得藏经阁古籍一观。初有感悟,聊胜于无,寥寥数笔,记录于下... ...

    在学习Less之前,我们都知道CSS,是一个很棒的样式处理技术。

    我们可以通过以下的代码轻松的对一个div进行样式定义:

    div{
      width: 20px;
      height: 20px;
      background-color: orange;          
    }

    但是,在我们的开发中经常会遇到这样的情况...

    HTML:

    <div></div>
    <div>
    <div class="black"></div>
    </div>

    CSS:

    div{
      width: 120px;
      height: 120px;
      background-color: orange;          
    }
    .black {
        width: 120px;
        height: 120px;
        background-color: blue;
    }

    频繁的使用相同的属性值设置。一个两个样式还可以轻松处理。

    可是一旦定义的样式多样化,定义元素增多,且样式值重复冗杂,在编写CSS样式时就会有很多无意的重复的工作,大大降低了开发效率。

    我们的前辈们很早就考虑到了这个问题,他们就想着,如果CSS能够定义“变量”、“函数”、“封装”、“运算”这些概念的话,会省很多事。

    因此,就有了“预处理”的概念。

    Less是向后兼容CSS的扩展语言,你可以在Less文件里面编写纯CSS代码也完全没有问题。

    Less向CSS的转换是通过JavaScript进行实现的。

    以上的CSS代码,你可以完全照搬进Less,你也可以像如下这样进行编写:

    @ 120px;
    @height: @width;
    
    div{
      width: @width;
      height: @height;
      background-color: orange;          
    }
    .black {
        width: @width;
        height: @height;
        background-color: blue;
    }

    这样处理是不是方便很多!

    Less的后续学习将陆续展开...

    离大侠再近一步!
  • 相关阅读:
    Python 操作 MySQL 的5种方式
    ffiddler抓取手机(app)https包
    Git远程操作详解(clone、remote、fetch、pull、push)
    Mysql学生课程表SQL面试集合
    Python获取list中指定元素的索引
    python找出字典中value最大值的几种方法
    python sort、sorted高级排序技巧
    JMeter之BeanShell常用内置对象
    Docker从容器拷贝文件到宿主机或从宿主机拷贝文件到容器
    编程必备基础知识|计算机组成原理篇(10):输入输出设备
  • 原文地址:https://www.cnblogs.com/Samo-Li/p/13625242.html
Copyright © 2011-2022 走看看