资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Less 的用法

Less 的用法

fredshare / 2745人阅读

摘要：是一个前端的框架自带一个包管理工具的安装官网在命令行检验是否安装成功切换到项目目录，初始化了一个文件安装与卸载包例子安装卸载安装淘宝镜像安装试一试你好在命令行中输入，如下用浏览器打开看一下效果吧的基本用法变量混合嵌套

1. node.js

node.js是一个前端的框架 自带一个包管理工具npm

  • node.js 的安装

官网：http://nodejs.cn/

  • 在命令行检验是否安装成功

  • 切换到项目目录，初始化了一个package.json文件

  • 安装与卸载jQuery包（例子）
    • 　　安装

    • 　　卸载

  • 安装淘宝镜像

2. 安装less

试一试：

test.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="style.css"/>
head>
<body>
<div id="box">
    <ul>
        <li>你好li>
        <li>helloli>
    ul>
div>
body>
html>

style.less

#box{
  width:200px;
  height:200px;
  background-color:blue;
  ul{
    color:white;
    li{
      line-height:50px;
    }
  }
}
  • 在命令行中输入lessc xxx.less xxx.css，如下：

  • 用浏览器打开test.html 看一下效果吧

3. less 的基本用法

https://less.bootcss.com/

  •  变量
@red:red;
@w:200px;
#big{
    width:@w;
    height:@w;
    background-color:@red;
    #small{
        width:@w;
        height:@w;
        background-color:@red;
    }
}
p{
    color:@red;
}
  • 混合
.bt{
    width:200px;
    height:200px;
    border-top:2px solid red;
    background-color:red;
}
#big{
    .bt;
    #small{
        .bt;
    }
}
  • 嵌套
#box{
    width:100%;
    height:60px;
    background-color:#ccc;
    h3{
        width:100%;
        height:20px;
        background-color:yellow;
    }
    ul{
        list-style:none;     
        li{
            height:40px;
            line-height:40px;
            float:left;
            padding:0 10px;
        }
    }
}
  • 运算
@color:#333;
#box{
    width:100%;
    height:60px;
    background-color:@color+#111;
}
  • calc()
@var:50vh/2;
#box{
    width:calc(50% + (@var - 20px));
}
  • 固定函数
@base:#f04615;
@width:0.5;
#box{
    width:percentage(@width);
    color:saturate(@base,5%);
    background-color:spin(lighten(@base,25%),8);
}
  • 注释
//单行注释//
/*多行
  注释*/
  • 引入其他less文件
@import "other.less";

 

GPU云服务器 云服务器 less less2 html使用less linux密令less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2291.html

相关文章

  • Less 日常用法

    摘要：日常用法你需要了解的和是两种预编译语言，其目的是为了更快更结构的编写文件，是一种强大的编译语言，能使用变量运算符判断方法等等。一般使用中，颜色是最常用的。其次是单位长度。单位可以自动识别，不用担心单位。 Less 日常用法 你需要了解的 less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，能使用 变量、运算符...

    graf 评论0 收藏0

  • Less 日常用法

    摘要：日常用法你需要了解的和是两种预编译语言，其目的是为了更快更结构的编写文件，是一种强大的编译语言，能使用变量运算符判断方法等等。一般使用中，颜色是最常用的。其次是单位长度。单位可以自动识别，不用担心单位。 Less 日常用法 你需要了解的 less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，能使用 变量、运算符...

    Yu_Huang 评论0 收藏0

  • Less 日常用法

    摘要：日常用法你需要了解的和是两种预编译语言，其目的是为了更快更结构的编写文件，是一种强大的编译语言，能使用变量运算符判断方法等等。一般使用中，颜色是最常用的。其次是单位长度。单位可以自动识别，不用担心单位。 Less 日常用法 你需要了解的 less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，能使用 变量、运算符...

    PingCAP 评论0 收藏0

  • LESS CSS使用及语法入门

    摘要：编译工具编译国人开发的编译工具下载地址库浏览器端使用的使用下载安装后，打开设置，更换语言为简体中文，然后重启。 1、Less是什么？ Less类似于jQuery LESCSS使用这个动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器...

    chaosx110 评论0 收藏0

发表评论

登陆后可评论

0条评论

fredshare

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<