zoukankan      html  css  js  c++  java
  • 如何使用less预编译

    如何使用less预编译(安装并简单使用)

    • 需要安装node.js (node -v / npm -v)用于查看node/npm版本信息
    • 安装完node 打开终端运行npm i less -g
    • 在建有.less文件夹的位置打开终端 运行 lessc lessDemo.less cssDemo.css( lessc less文件路径/less文件名 css文件路径/css文件名 )//用于转换成css

    less语法

    注释

    • // 只会在less中显示
    • /**/ 会在编译好的css文件中显示

    变量

    • 在less中定义变量使用@符
        @bgcolor:red;
        .box{
           200px;
           height:200px;
           background:@bgcolor;
        }
    
    • 编译之后输出的css
         .box{
            200px;
            height:200px;
            background:red;
         }
    

    混合

    • 不带参数的混合
    .borders{
        border: 3px solid red;
    }
    .box{
         200px;
        height: 200px;
        background: pink;
        .borders
    }
    
    • 编译之后输出的css
    .box{
         200px;
        height: 200px;
        background: pink;
        border: 3px solid red;
    }
    
    • 带参数的混合
     //参数/变量名 必须以@开头
    .borders(@num){
        border: @num solid red;
    }
    .box{
         200px;
        height: 200px;
        background: pink;
        .borders(6px)
    }
    
    • 编译之后输出的css
    .box{
         200px;    
        height: 200px;
        background: pink;
        border: 6px solid red;
    }
    

    嵌套

    .box{
         200px;
        height: 200px;
        background: pink;
        border: 3px solid red;
        p{
            100px;
            height:100px;
            background:deeppink;
        }
    }
    

    引用

    • 在一个(one)less文件中只定义变量 在另外一个 (two) less文件中进行引用
     1. one.less文件
        @color:red;
        @bgcolor:skyblue;
        @fontSize:36px;
        @wid:200px;
        @hei:200px;
    
    2. two.less文件
    @import “./one.less”;(引入需要加分号)
    .box{
        @wid;
        height:@hei;
        background:@bgcolor;
    }
    
  • 相关阅读:
    IE9的css hack
    ie6 插入图片img png24 阴影
    clear:both; overflow:hidden
    ie6 背景图片 png24 阴影
    html 页面定位
    IE无法显示PNG
    行内元素 & 块元素
    div+css布局时的浏览器兼容问题
    删除源代码的管理信息(VSS)
    string path;
  • 原文地址:https://www.cnblogs.com/a-pupil/p/10893255.html
Copyright © 2011-2022 走看看