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

Bejpse 2022-05-14 13:40:48 阅读数:720

下载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?

[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