LESS学习笔记

最新推荐文章于 2024-08-07 16:13:39 发布
最新推荐文章于 2024-08-07 16:13:39 发布
阅读量201 收藏 1
点赞数
分类专栏： Tools 文章标签： visual studio less css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28003313/article/details/78122268
版权
这篇博客记录了使用Visual Studio Code进行LESS学习的过程，包括安装VS Code，安装easy less插件，配置实时刷新浏览器的环境，以及LESS的注释、变量、导入、属性变量、混合和嵌套等基础语法。
摘要由CSDN通过智能技术生成

·目前项目静态页较多，为了提高工作效率，果断入坑。

编译环境

  1. 下载安装visual studio code工具
    在扩展中装插件
    easy less
    easy sass
    view in browser（更新代码后浏览器实时刷新）
    注:安装好之后重新加载一次

  2. 下载node.js安装(编译环境,将所写的less和sass转换成css文件)

语法

  1. less注释

    /*css形式 的注释 在 less中依然保留*/

    注：less中注释 //在css文件中不显示 仅为less注释

  2. 变量

    • @符号定义变量

      @base: #f938ab;
.box {
       color: @base; /*变量引用*/}

    • @导入&

最低0.47元/天 解锁文章
AMee66
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Less使用详解（v3.9.0）—嵌套和父选择器&
weixin_33810302的博客
04-27 6139
该系列： Less(v3.9.0)使用详解——基本使用 Less(v3.9.0)使用详解——变量 Less(v3.9.0)使用详解——嵌套和父选择器& Less(v3.9.0)使用详解——extend(嵌套) 其他待更新... 嵌套 当css选择器存在父子关系时，可以像下面这样书写 #header { color: black; .navigation { font-siz...
附录9-less基础
potato123232的博客
07-19 910
less(LeanerStyleSheets)是CSS的扩展语言，也叫CSS预处理器，其余常见处理器还有Sass,Stylusless中文网址less语句在语句前面写//进行注释。
css的less预处理器学习小结
Laok0413的博客
04-27 1676
写在前面 由于时间原因，笔者在此仅整理一些最常见的less用法，并未涵盖所有的内容。以后如果在项目的过程中用到了其他的内容，还会再进行补充。 如果以下内容有疏漏错误的地方，还请各位读者指正。 1. 嵌套 nest 在原生的css中，如果我们要对父选择器下的子选择器进行单独的样式书写，必须要在父选择器的样式下，再把所有的类名全部重复一遍。 这样就会导致：代码冗杂，重复度高，可读性不强，层级关系不能很好的体现 所以less为我们提供了嵌套的写法，允许将子选择器的样式写在父选择器的花括号里，有了更强的可读性 下
九、less语法
gaoya7305的博客
07-04 330
多行注释，在less中写了的多行注释，保持less文件后，自动会在css中继承下来，单行注释不会。表示，p2有p1相同的width,height， 同时在为p2多扩展设置一个color。使用类选择器时，可以在选择器后面添加一个括号，这时我们实际上就创建了一个mixins。//如果我们确实不想传值，其实我们也可以在设置混合函数方法的时候给他们一个默认值。用的话： @变量名, 变量不仅可以存数字，颜色，也可以存类名。// 有了默认值，你可以不传，或者只传一个。优化这种写法，不让他在重复写一次。
学习使用less
qq_49171551的博客
10-06 516
一个父级元素有多个子级，想要使用其中一个的样式就可以使用命名空间 使用方法：父级选择器名子级选择器名（）在css中给子代设置样式的时候还要在前面写父级，但是less中可以将子级直接嵌套在父级。想要在哪里使用这个元素的样式就在哪里使用 “选择器（）”的方式使用。访问变量声明的一些属性，会现在当前作用域查找，找不到再向父级查找。例：@min:~'(min-width:786px)'1.绝对单位和相对单位运算，以第一个的运算符单位为准。例：#one{font-size:28px}
less基础详解
h907310116的博客
11-25 2万+
1.初识less less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。 和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代...
Less学习笔记
06-23
**Less学习笔记** 在Web开发领域，Less是一种流行的CSS预处理器，它扩展了CSS语言，引入了许多编程特性，如变量、嵌套规则、运算符、函数等，使得CSS的编写更加简洁、模块化和可维护。这篇笔记将深入探讨Less的基本...
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时，应重点理解并实践这些概念，以充分利用LESS的优势。
Linux学习笔记
10-29
### Linux学习笔记 #### 常用命令及命令选项注释 **1. `ls`：显示文件** - `-a`：查看所有文件，包括隐藏文件。 - `-l`：查看详细信息。 - `-h`：人性化显示。 - `-d`：查看目录属性。 示例： ```bash ls -d ...
jQuery学习笔记01
01-08
 它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。   1.3 jQuery流行程度  jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在...
比CSS强亿点点的大表哥——less!
m0_75195798的博客
11-15 689
好的，现在我们对less有了一个简单的了解，那么我们去实际操作一下，感受一下他比css强亿点点的地方。首先，我们先下载一个VSCode的插件——它可以帮助我们将less文件保存自动生成css文件。当然，我们在Html当中引用的还是css文件，而不是less文件（less文件不被浏览器所识别）。接下来，开始操作吧！一、less运算我们在less中可以进行运算，这个大家可以去动手试一下。老规矩，我们先上代码！大家看，左边是我们的less文件,右边是根据less生成的css文件。
Less - 选择器用法总结
weixin_30326745的博客
09-07 5041
前端写样式使用预处理语言开发，是最有效的和方便维护 @mixin 混合 @extend 扩展 mixin 可以声明函数 并且会返回新的样式组合，相当于样式组合工具可以声明多个重名的 mixin函数，参数可以不同，并且在调用的时候，会根据传入的参数个数匹配调用最合适的 mixin函数mixin 中可以使用 @if 关键字按照条件返回合适的样式mixin 语句可以声明函数或...
less中使用last-child选择器
娓娓道来
07-22 1万+
css： .search{ .time{ &:first-child{ margin-left: 0px !important; } &:nth-last-child(2){ margin-left: -12px !important; } } } html： <divclass="search"> <divclass="time"> ...
CSS 选择所有子元素添加样式
热门推荐
Kuroko's Development Notes
09-26 4万+
方法：&gt; * 以实际项目中less为例： .lk-toolbar { .el-input { width: 169px; margin-right: 10px; } &gt; * { margin-bottom: 20px; } } 上面代码成功实现了 .lk-toolbar 下一切子元素的 margin...
Less使用语法（详细）
weixin_44646763的博客
02-27 8849
一、变量 1、使用@符号声明变量 例子： less内容 @width:100px;//变量 @height:100px; @fsize:20px; .less{ width: @width;//变量作为css属性的值 height: @height; background-color: red; font-size: @fsize; } css效果： .less { width: 100px; height: 100px; bac
VScode安装easy less 插件并配置
qq_45742208的博客
12-17 8683
1、在扩展包中搜索easy less 并安装 2、安装后–>点击“管理”–>“扩展设置” 3、选择“在setting.json中编辑” 4、拉到底加入以下代码，文件名根据需要更改，这里以index举例。 5、然后重启vscode 6、在工作区项目文件中创建css文件夹，在css下面创建一个.less文件，如：index.less 7、然后在.less写样式代码，保存，就会在css文件下自动生成一个对应的index.css文件，就可以在html中引入使用啦！ 如果没有自动生成可以关
Easy LESS的基础使用
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-14 5343
vscode安装插件Easy LESS，用于实现编写less文件后生成css或者wxss文件 配置步骤： 在配置文件末尾或者其他位置加入以下代码 // Easy LESS配置 "less.compile": { "compress": false,//是否压缩 "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数 "out": true, // 是否输出css文件，false为不输出，千.
LESS CSS 语言特性
大爱无疆的博客
11-24 1103
作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。 变量 很容易理解： @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 输出： #header {
Visual Studio 和 VSCode 哪个好？
最新发布
08-07 1491
在选择编程工具时，Visual Studio（VS）和 Visual Studio Code（VSCode）是两个最常被提及的选项。两者都是微软推出的产品，各有其独特的功能和优势。本文将深入比较 Visual Studio 和 VSCode，帮助读者理解它们的异同，并根据具体需求做出最佳选择。
Linux基础学习笔记：命令行、帮助和文件管理
Linux学习笔记 Linux学习笔记是Linux操作系统的基本学习笔记，本笔记涵盖了最常用的命令和操作。 认识命令行 命令行是Linux操作系统的核心组件，通过命令行可以执行各种操作。认识命令行是Linux学习的基础。 * ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值