Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >给CSS加点料——Less(一)

给CSS加点料——Less(一)

作者头像
萌兔IT
发布于 2019-07-26 05:46:33
发布于 2019-07-26 05:46:33
50200
代码可运行
举报
文章被收录于专栏:萌兔it萌兔it
运行总次数:0
代码可运行

它是Leaner Style Sheets的缩写,是一门向后兼容的CSS扩展语言,我们今天就来看看他是个什么鬼!兔妞将从定义、安装、语言特性、函数、用法五个方面为大家进行分享哟~

Less是什么

LESS是一个CSS预处理器,可以为网站启用可自定义,可管理和可重用的样式表。LESS是一种动态样式表语言,扩展了CSS的功能。LESS也是跨浏览器友好。CSS预处理器是一种脚本语言,可扩展CSS并将其编译为常规CSS语法,以便可以通过Web浏览器读取。 它提供诸如变量,函数, mixins 和操作等功能,可以构建动态CSS。(不瞒大家说,这段是从官网抄的)

简单来说呢,就是它把CSS进行了扩展,然后呢CSS也可以写函数了,也可以定义变量了,能够更好的被管理了,重点是最后还能够编译回CSS。不知道这么说是不是完全准确,个人理解,大佬别打我。

安装

知道less是个啥东西了,我们就来谈谈安装吧~

1)因为我们需要在nodejs的环境中运行less,所以我们首先要安装nodejs,去nodejs官网下载nodejs,然后运行装程序安装nodejs。当在命令行输入node -v的时候出来版本号则是安装成功。

2)现在我们就可以通过npm安装less啦:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g less

即安装成功,还是推荐cnpm哦,想不起来是什么的同学,翻看以前的记录哦!

现在我们就可以愉快的使用less咯。

3)编写less文件

4)编译less文件:将style.less转译为style.css文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
lessc style.less style.css

5)通过下面的代码即可引用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link rel="stylesheet" href="style.css" type="text/css" />
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Less快速入门
Less快速入门 Web前端学习笔记之——Less快速入门 ---- 什么是Less Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。 实例: @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-
李郑
2018/03/01
7980
给CSS加点料——Less(s)
Hello 小伙伴们大家好,今天我们继续less的分享,上次说啥来着?大声说出来!变量!嵌套!今天说点啥?今天说运算、函数和混合。虽然上次我们已经用到了运算,这次就详细说一下咯!对了,这里说明一下,上次的代码在客户端引入css文件主要是为了为大家展示一下通过npm环境进行less编译的过程(生产环境也有很多就是这样用的),如果直接在客户端引入less文件也可以通过以下方式来引入:
萌兔IT
2019/07/30
5190
给CSS加点料——Less(s)
给CSS加点料——Less(二)
在CSS中不能够定义变量,所以在很多元素互相依赖大小时,倘若需要改其中一个大小,我们就要从头改到尾,为了减少这个困扰,less引出了变量的概念,我们可以将值的大小定义为变量,直接在各处引用变量即可,需要更改时,工作量就会大大减小了,同时也会避免因为落下了某几项而产生的问题。
萌兔IT
2019/07/26
7970
给CSS加点料——Less(二)
Less学习
1st less介绍: 什么是less? less是一个CSS预处理器,可以为网站启用可自定义、可管理、可重用的样式表。它是一种动态样式表语言(第一个版本是ruby写的),扩展了css的功能。 它可以
用户1149564
2018/01/11
8190
Less学习
less快速入门
我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护,但它本不应该这样的。
十月梦想
2018/08/29
7160
使用Less
在使用CSS过程中会遇到一个非常头疼的问题,因为CSS中没有像java/C++或者PHP等程序语言一样有有自己的变量、常量、条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,而且代码难以组织和维护,为了解决这个问题,引入了预处理CSS,预处理CSS可以像Java/C++或者PHP一样用变量,函数等语法描述CSS。
用户3880999
2023/04/13
1.9K0
使用Less
一文学会Less的使用
Less(Leaner Style Sheets 的缩写)是一门 CSS 扩展语言,也称为 CSS 预处理器。
言志志
2024/05/09
2361
一文学会Less的使用
Less 基础知识详解:深入了解 Less 如何编写样式
Less(Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。,它扩展了CSS(层叠样式表)的功能并提供了更灵活、更强大的样式定义和管理机制。通过使用 Less,开发人员可以编写可维护、可重用的样式代码,并以简洁的语法实现复杂的样式效果。本文将介绍 Less 的基本概念和特性,以及如何使用它来简化 CSS 开发过程。想要学习更多的知识,可访问 犀牛书 的 Less 中文文档。
物立
2023/06/20
7960
Less 基础知识详解:深入了解 Less 如何编写样式
从零开始学 Web 之 移动Web(八)Less
LESS 是一种动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单,本质上,LESS 包含一套自定义的语法及一个解析器。
Daotin
2018/08/31
1.1K0
从零开始学 Web 之 移动Web(八)Less
给CSS加点料——Less(四)
Hello小伙伴们,今天还是要接着分享less呢!其实less也没剩很多啦,今天就要结束了呢~今天要主要从Extend、Loops和Merge来为大家介绍~
萌兔IT
2019/07/30
4960
css和styl的区别
理解.css文件和.styl文件之间的共同点和区别需要对它们的特性、语法、工作流程等方面有深入的了解。让我们深入探讨这些方面,以便更全面地理解它们。
酒楼
2024/02/17
5230
如何封装不被嫌弃的组件SDK
你在一家小互联网公司做前端。最近公司发展势头不错,已经有了稳定的商业模式。老板决定尝试付费推广。
公众号@魔术师卡颂
2021/05/08
1K0
如何封装不被嫌弃的组件SDK
less 基础
Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器。
清出于兰
2020/10/26
1.5K0
less 基础
CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
根据给定的文章内容,撰写摘要总结。
张果
2018/01/04
2.5K0
CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
Less
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端
切图仔
2022/09/08
1.7K0
Less
移动开发-媒体查询布局
每种媒体类型都有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格,暂且了解三个,注意他们要加小括号包含
小城故事
2022/11/21
1.4K0
webpack实战——样式预处理
在目前的前端项目中,经常可以看到使用SASS和LESS来对CSS进行处理,那么在webpack中如何配置?
流眸
2020/08/27
9440
webpack实战——样式预处理
前端构建:Less入了个门
一、前言                                说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss、Sass、Stylus和Less。(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT)   众多CSS预处理器中Less的语法最接近原生CSS,因此相对来说更容易上手,假如有JS、C#等编程经验的话,其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记,以便日后查阅。   最好的入门教程——官网地
^_^肥仔John
2018/01/18
1.8K0
前端成神之路-移动web开发_rem布局
比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
海仔
2020/12/01
1.1K0
前端成神之路-移动web开发_rem布局
从语法、功能、社区和使用场景来比较 Sass 和 LESS
1:语法 原始的 Sass 采用的是缩进而不是大括号,后续的 Sass 版本与 LESS 一样使用与 CSS 类似的语法:
FGGIT
2024/12/20
2000
从语法、功能、社区和使用场景来比较 Sass 和 LESS
相关推荐
Less快速入门
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验