编程知识 cdmana.com

2022年5月7号Css预处理器(Less的下载与安装和简单的使用){Less的第一课}

目录

2022年5月7号Css预处理器(Less的下载与安装和简单的使用){Less的第一课}

第一部分node.js的安装。

第一步Less的安装之前先要安装Node.js文件:Less安装官网:http://nodejs.cn/download/。

第二步:进入网址会看到以下的页面。?

第三步:选择自己电脑适合的系统以及选择好64位/还是32位。

第四步:win+R键输入cmd===============>按下Enter

第五步:在运行窗口重输入:node -v? =============>按下Enter???判断nodes的版本

第五步:在运行窗口输入:基于nodejs在线安装Less,使用cmd命令" npm instal1 -g less =============>按下Enter第六步: lessc -v 判断是否安装成功?

操作如下:@1

@2?

[email protected]

[email protected]

第二部分:less的安装.这里的安装与软件有关====>本人讲述三个软件。我常用的是HuBlider-x.本人会详细介绍。

第一个软件:Visual Studio Code? less的安装。

?这个软件安装最简单然后可以测试。

第二个软件:IDEA less安装。IDEA是我的最爱,因为所以科学道理。

?第一步:Filler--------------------------->settings

第二步:?settings--------------------------------------->Plugins

第三步 plugins--------------------------------------->File Watchers.

第四步:settings---------------->Tools----------------------------->File Watchers.

?第五步:点击右边的加号:

?点击ok又可以了

第三个软件:HuBlider-x.这款软件值得拥有简单易学。中文安装不在介绍请看图解。

将自己的代码块修改如上代码块。

第三模块代码实操:建立了这个文件Demo-3.less文件 当我 按上CTRL+C会会生成对应的css文件

名称为Demo—3.css

?流程是这样:

开发者在less文件中编写CSS代码 利用less预处理的功能将less文件翻译成CSS文件?

然后在html文件中利用

调用css文件:代码如下

如何实现自己思考?


2022年5月7号Css预处理器(Less的下载与安装和简单的使用){Less的第一课}


第一部分node.js的安装。

第一步Less的安装之前先要安装Node.js文件:Less安装官网:http://nodejs.cn/download/。

第二步:进入网址会看到以下的页面。

本图片展示不了实在道歉


第三步:选择自己电脑适合的系统以及选择好64位/还是32位。


第四步:win+R键输入cmd===============>按下Enter

第五步:在运行窗口重输入:node -v =============>按下Enter判断nodes的版本

第五步:在运行窗口输入:基于nodejs在线安装Less,使用cmd命令" npm instal1 -g less =============>按下Enter
第六步: lessc -v 判断是否安装成功


操作如下:@1

@2

@3

@4


Microsoft Windows [版本 10.0.22000.613]
(c) Microsoft Corporation。保留所有权利。

C:UsersMZFAITHDREAM>node -v
v16.14.2

C:UsersMZFAITHDREAM> npm instal1 -g less
Unknown command: "instal1"

Did you mean this?
    npm install # Install a package

To see a list of supported npm commands, run:
  npm help

C:UsersMZFAITHDREAM>npm install -g less

changed 20 packages, and audited 21 packages in 6s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

C:UsersMZFAITHDREAM>lessc -v
lessc 4.1.2 (Less Compiler) [JavaScript]

C:UsersMZFAITHDREAM>

第二部分:less的安装.这里的安装与软件有关====>本人讲述三个软件。我常用的是HuBlider-x.本人会详细介绍。

第一个软件:Visual Studio Code less的安装。

这个软件安装最简单然后可以测试。

第二个软件:IDEA less安装。IDEA是我的最爱,因为所以科学道理。

第一步:Filler--------------------------->settings

第二步:settings--------------------------------------->Plugins

第三步 plugins--------------------------------------->File Watchers.

第四步:settings---------------->Tools----------------------------->File Watchers.

第五步:点击右边的加号:


点击ok又可以了

第三个软件:HuBlider-x.这款软件值得拥有简单易学。中文安装不在介绍请看图解。



将自己的代码块修改如上代码块。


{
	"name": "less",
	"id": "compile-less",
	"displayName": "%displayName%",
	"version": "1.0.5",
	"engines": {
		"HBuilderX": "^3.2.6"
	},
	"external": {
		"type": "node",
		"programPath": "${pluginPath}",
		"executable": "/node_modules/.bin/lessc",
		"programName": "less",
		"commands": [
			{
				"id": "LESS_COMPILE",
				"name": "%external.commands.name%",
				"command": [
					"${programPath}",
					"${file}",
					"${fileBasename}.css"
				],
				"extensions": "less",
				"key": "ctrl+s",
				"showInParentMenu": false,
				"onDidSaveExecution": true
			}
		]
	},
	"dependencies": {
		"less": "3.9.0"
	},
	"extensionDependencies": [
		"npm"
	],
	"description": "%description%"
}

第三模块代码实操:建立了这个文件Demo-3.less文件 当我 按上CTRL+C会会生成对应的css文件

名称为Demo—3.css


流程是这样:

开发者在less文件中编写CSS代码 利用less预处理的功能将less文件翻译成CSS文件

然后在html文件中利用<link rel=“stylesheet” type=“text/css”/ href=“css/Demo-3.css”>
调用css文件:代码如下


div {
  color: red;
  height: 200px;
  background-color: black;
  margin: 2px;
}
p {
  font-size: 100px/50rem;
}
span {
  color: #ffffff/2;
  font-size: 200px/2rem;
  /* 鼠标经过色彩变红 */
  /* 为啥没有效果 */
  /* 为啥又有了效果 伪类选择器 */
}
span :hover {
  color: green;
}
span:hover {
  color: red;
  background-color: black;
}
span :after {
  background-color: yellow;
}
span::after {
  background: yellow;
}
span:after {
  content: "123456789abcdefj";
}
img {
  width: 40px;
}
input {
  width: 300px -50;
  color: blue;
}
input::placeholder {
  color: red;
}
ul {
  display: block;
  height: 200px;
  width: 200px;
  background-color: antiquewhite;
  color: black;
  font-weight: 500px;
}
ul {
  /* 鼠标经过色彩变红 */
}
ul:hover {
  color: red;
  background-color: black;
}
ul:before {
  display: block;
  right: 200px;
  content: "<a>我是a标签</a>";
  height: 300px;
  background-color: cadetblue;
  width: 300px;
}


div {
  color: red;
  height: 200px;
  background-color: black;
  margin: 2px;
}
p {
  font-size: 2px;
}
span {
  color: #808080;
  font-size: 100px;
  /* 鼠标经过色彩变红 */
  /* 为啥没有效果 */
  /* 为啥又有了效果 伪类选择器 */
}
span :hover {
  color: green;
}
span:hover {
  color: red;
  background-color: black;
}
span :after {
  background-color: yellow;
}
span::after {
  background: yellow;
}
span:after {
  content: "123456789abcdefj";
}
img {
  width: 40px;
}
input {
  width: 300px -50;
  color: blue;
}
input::placeholder {
  color: red;
}
ul {
  display: block;
  height: 200px;
  width: 200px;
  background-color: antiquewhite;
  color: black;
  font-weight: 500px;
}
ul {
  /* 鼠标经过色彩变红 */
}
ul:hover {
  color: red;
  background-color: black;
}
ul:before {
  display: block;
  right: 200px;
  content: "<a>我是a标签</a>";
  height: 300px;
  background-color: cadetblue;
  width: 300px;
}

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	
	<link rel="stylesheet" type="text/css"/ href="css/Demo-3.css">
</head>
<body>
	<div>我是div中lesss的插件内容</div>
	<div>我是div中lesss的插件内容</div>
	<p>我是div中lesss的插件内容</p>
</body>
</html>

如何实现自己思考?

版权声明
本文为[Bejpse]所创,转载请带上原文链接,感谢
https://blog.csdn.net/Bejpse/article/details/124761848

Scroll to Top