一个简单的LESS例子

1.什么是LESS?

        less(Leaner Style Sheets的缩写),它是css,只不过它比css多了一些像编程语言的语法,方便我们写代码。


一个简单的LESS例子_第1张图片

目录

    • 1.什么是LESS?
    • 2.less代码结构
    • 3.命令行编译less
    • 4.在html中使用less文件。
    • 5.vscode中使用less

2.less代码结构

@width: 400px; /* 声明一个变量,名为@width,值为400px*/
@height: 300px;

/*id 选择器*/
#header{
	width: @width;
	height: @height;
	background-color: blue;
}

        less代码初看是不是很像css!

3.命令行编译less

在命令行中,如何编译.less文件为.css文件?

  1. 下载并安装node.js
  2. 打开cmd命令行窗口,输入命令:npm install less -g
  3. 安装完成后就可以使用命令编译.less文件了!

编译.less源文件:

  1. 打开cmd命令行工具,输入命令:lessc style.less style.css
  2. 执行上一条命令之后,文件中就多了一个 "style.css" 文件。.less文件就编译成了.css文件,神奇吧!

一张图理解less,less.js,css
一个简单的LESS例子_第2张图片

less项目是使用javascript编写的,所以less的源文件就是less.js文件。

4.在html中使用less文件。

        如何在.html网页文件中使用.less文件呢??其实,它和.css文件相同,需要使用标签引入到html中。下面就开始测试在.html文件中使用.less文件中的代码。在test.html的头部引入了我们写的style.less文件,只不过link标签的rel属性为:“stylesheet/less”,测试代码也非常的简单!给id选择器header添加3个样式,如果这3个样式生效了,就说明我们写的less代码生效了!
styles.less文件:

@width: 400px;/*定义一个变量,变量名称为@width,变量的值为100px*/
@height: @width - 100px;
/*id选择器*/
#header{
        width: @width;
        height: @height;
        background-color: blue;
}

test.html文件:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="https://cdn.jsdelivr.net/npm/less" type="text/javascript">script>

head>
<body>
    <div id="header">div>
    
body>
html>

这样就在网页中引入了style.less文件!
使用浏览器打开test.html网页,发现一片空白,F12查看控制台报错没有,发现报了:
less@4:10 Access to XMLHttpRequest at ‘file:///C:/Users/17282/Blog/LESS%E7%AF%87/test/style.less’ from origin ‘null’ has been blocked by CORS policy:
已被CORS策略阻止,无法引入资源。
解决办法:vscode中安装Live Server插件

  1. 打开vscode,设置-->Extensions-->搜索:Live Server

一个简单的LESS例子_第3张图片
一个简单的LESS例子_第4张图片


安装好live server插件后,选择test.html,右键选择:Open with Live Server。

一个简单的LESS例子_第5张图片
这样我们写的less代码就生效了!!
一个简单的LESS例子_第6张图片

5.vscode中使用less

        在vsvode中使用less,需要安装插件:Easy Less。同理,按照上面Live Server的步骤安装即可。
less变量:

01-less常用语法.less

@mainColor: #C20C0C; /*定义一个储存颜色的变量: @mainColor*/

@smallFontSize: 12px; /*定义一个储存字号的变量: @smallFontSize*/
@normalFontSize: 14px;
@bigFontSize: 18px;

.box .para{
    color: @mainColor; /*使用变量:@mainColor*/
    font-size: @normalFontSize;
}

.box h1 .keyword{
    color: @mainColor;
    font-size: @bigFontSize;
}

.box p .link{
    color: @mainColor;
    font-size: @smallFontSize;
}

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet/less" href="./less/01-less常用语法.less">
    <script src="./js/less.js">script>
head>
<body>
    <div class="box">
        <p class="para">我是p标签p>
        <h1>我是h1标签<span class="keyword">关键字span>h1>
        <p>我是p标签 <a href="#" class="link">我是空的超链接a>p>
    div>
body>
html>

运行效果:
一个简单的LESS例子_第7张图片

你可能感兴趣的:(less,前端,css)