• css预编辑器less的简单使用


    CSS预处理器

    CSS 预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

    通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。

    到目前为止,最常用的CSS预处理器有Sass、Less和Stylus。

    less的介绍

    less 是一款比较流行的预处理 CSS,支持变量、混合、函数、嵌套、循环等特点。

    less的使用

    安装依赖

    nom install --save-dev less less-loader
    

    在main.js中引入

    import less from 'less'
    
    Vue.use(less)
    

    注释

    less的注释有两种

    第一种:模版注视

    // 模板注释 这里的注释转换成CSS后将会删除
    

    因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后,这种注释会被删除(毕竟 css 不识别这种注释)。

    第二种:css注释语法

    /* CSS 注释语法 转换为CSS后让然保留 */
    

    总结:如果在less中写注释,我们推荐写第一种注释。除非是类似于版权等内容,就采用第二种注释。

    定义变量

    我们可以把重复使用或经常修改的值定义为变量,在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。

    在less文件中,定义一个变量,并使用

    @变量名: 变量值;        //格式
    
    @bgColor: #f5f5f5;      //格式举例
    
    // 引用变量
    body{
        background-color: @bgColor;
    }
    

    我们将上面的less文件编译成css文件后,会自动生成如下代码:

    body{
        background-color: #f5f5f5;
    }
    

    嵌套

    在css中经常用到的子代选择器,代码如下“:

    .container {
       1024px;
    }
    
    .container > .row {
      height: 100%;
    }
    
    .container > .row a {
      color: #f40;
    }
    
    .container > .row a:hover {
      color: #f50;
    }
    

    用 less 的嵌套语法来写这段代码,就比较简洁清晰:

    .container {
       @containerWidth;
    
      > .row {
        height: 100%;
        a {
          color: #f40;
    
          &:hover {
            color: #f50;
          }
    
        }
      }
    

    Mixin

    Mixin的作用是把重复的代码放到一个类当中,每次只要引用类名,就可以引用到里面的代码了,非常方便。

    在less文件中定义一个类:

    /* 定义一个类 */
    .roundedCorners(@radius: 5px) {
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
      border-radius: @radius;
    }
    

    其中,@radius为参数,5px为默认值,可以空。

    在less文件中使用上面定义的这个类:

    #header {
      .roundedCorners;
    }
    #footer {
      .roundedCorners(10px);
    }
    

    参数可以有多个,有多个参数时用分号隔开,调用时就是通过变量名称,而不是位置。

    .mixin(@radius:10px;@color:green;) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
      color:@color;
    }
    
    

    使用:

    #header{
        .mixin(@color:green);
      }
      .button{
          .mixin(@color:green);
      }
    

    less的内置函数

    percentage(百分比)

    .button {
      percentage(.5);
    }
    

    编译之后的css为:

    .button {
      50%;
    }
    

    混合

    抽取公共类,例如下面的css代码可以用less这样编写

    css代码如下:

          在css中的代码:
          #header a {
              color: #111;
              border-top: solid 1px #595959;
              border-bottom: solid 2px #595959;
          }
          #header span {
              height: 16px;
              border-top: solid 1px #595959;
              border-bottom: solid 2px #595959;
          }
          #header p {
              color: red;
              border-top: solid 1px #595959;
              border-bottom: solid 2px #595959;
          }
          .borde_style {
              border-top: solid 1px #595959;
              border-bottom: solid 2px #595959;
          }
    

    less文件中,我们可以定义一个公共的样式名borde_style,代码如下:

    .borde_style {
        border-top: solid 1px #595959;
        border-bottom: solid 2px #595959;
    }
    #header a {
        color: #111;
        .borde_style;
    }
    #header span {
        height: 16px;
        .borde_style;
    }
    #header p {
        color: red;
        .borde_style();
    }
    

    文件引入 Import

    在开发阶段,我们可以将不同的样式放到多个文件中,最后通过@import 的方式合并。意思就是,当出现多个 less 文件时,怎么引用它们。

    定义一个被引用的less文件,名为_button1.less:

    .btn{
      line-height: 100px;
      color: @btnColor;
    }
    

    在另一个less文件中引用:

    @btnColor: red;
    
    @import url(`_button1.less:');    //这里的路径写的是相对路径
    
    body{
       1024px;
    }
    

    编译之后的代码如下:

    .btn {
        line-height: 100px;
        color: red;
    }
    
    body {
         1024px;
    }
    

    总结:less的优势和劣势

    优势

    开发速度提升
    代码优化效率提高(对开发者而言)
    代码更通俗易懂(对开发者而言)
    代码更干净,优美
    维护简单便捷
    功能更多更强

    劣势

    舍弃用户体验来提高开发的效率
    舍弃网页打开速度换取开发效率提升
    需要多一个编译器来重新编译一次CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢

  • 相关阅读:
    用Rails.5.2+ Vue.js做 vue-todolist app
    vue-router
    Vue.js教程--基础2(事件处理 表单输入绑定
    Vue组件(知识)
    Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
    ActiveRecord Nested Atrributes 关联记录,对嵌套属性进行CURD
    (GoRails) 自动侦测用户的时区,使用javascript 的jszt库。
    (GoRails) 如何去掉form输入框头尾的空格;何时用callbacks,gem;
    JQ each
    JQ 更改li 颜色
  • 原文地址:https://www.cnblogs.com/wangyingblock/p/15234481.html
Copyright © 2020-2023  润新知