CSS的预编译——less语言基本语法教程（入门）

最新推荐文章于 2024-05-07 09:34:04 发布
最新推荐文章于 2024-05-07 09:34:04 发布
阅读量523 收藏 1
点赞数
分类专栏： LESS 文章标签： less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39680839/article/details/77678324
版权

less语言基本语法教程（入门）

一、CSS解析
css是一门标记性语言，语法简单，对使用者的要求也比较低。

缺点：1、对于css：使用css时需要书写大量的看似没有逻辑的代码，不方便维护和扩展，不利于复用；

           2、对于开发者：如果一个程序员缺乏对css的编写经验，那么想写出组织良好且易于维护的css代码是一件很困难的事情。

二、LESS简介

LESS 是一门 CSS 预处理语言，LESS在CSS的语法基础上增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，可以让我们用更少的代码做更多的事情。另外，LESS可以运行在 Node 或浏览器端。

官网地址：http://lesscss.org/  （英文网）

http://less.bootcss.com/ （中文网）

bootstrap官网中less教程： http://www.bootcss.com/p/lesscss/

三、LESS引入

1、客户端使用.less文件： 先要从 http://lesscss.org 下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

（1）<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

（2）引入手机端初始化.css(reset.css)

（3）用rem来写的话必须引入media-100.css和iconfont.css (media-100.css文件是封装好的css，两者属于可选)

（4）<link rel="stylesheet/less" type="text/css" href="styles.less">

注意 ：此处的rel属性值是“ stylesheet/less ”。

自己写的less源文件一定要在less.js引入之前引入 ，才能保证自己的less源文件正确编译解析。

（5）<script src="less.min.js" type="text/javascript"></script>

2.在开发工具中使用：主要是借助于LESS的编译器，将less源文件编译生成最终的css文件（ 推荐 ）

以HBulider开发工具为例：

（1）打开HBuilder--工具 -- 预编译器设置 - -新建 -- 文件后缀 .less--触发命令地址 (选择...找到.cmd的路径)--命令参数 %FileName% %FileBaseName%.min.js --- 智能完成/确定

（2）在项目里面新建less文件，写less时系统会自动编译成css文件（如果没有成功，关闭HBuilder，右键以管理员身份打开）

 

四、LESS的使用（CSS样式处理） 

1、变量：一次定义可以重复使用

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用，所以在做全局样式调整的时候我们只需要修改几行的代码就OK了。 

  // LESS

@color: #4D926F; （自己定义的变量）

#header {
  color: @color;
}
h2 {
  color: @color;
}
 

/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

  2、混入--Mixins：先申明一个类，然后在其它类中调用当前这个类  

        混合可以将一个定义好的classA引入到另一个classB中，从而简单的实现classB继承classA中的所有属性，我们还可以带参数调用，就像使用函数一样。

// LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
 

/* 生成的 CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}


3、继承

有类A用了一组样式，另外一个类B也想用这个样式，这样的话类B可以继承类A的样式：

// LESS
.base-style {
  font-size: 26px;
  font-weight: bold;
}  

第一种继承写法：
#header {
  .base-style();
  color:red;
}
第二种继承写法：
#header {
  &:extend(.base-style);
  color:red;
}
 

/* 生成的 CSS */
两种写法不同，编译后生成的CSS样式也不一样

第一种：
.base-style {
  font-size: 26px;
  font-weight: bold;
} 

#header {
 font-size: 26px;
 font-weight:bold;
 color:red;
}

第二种：
#header, .base-style {
  font-size:26px;
  font-weight:bold;
}
#header {
color: red;
}

 

4、嵌套规则

 

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来更加的清晰，

其中&符号的使用——如果你想写串联选择器而不是后代选择器，就可以用到&了，这点对伪类尤其有用，如：hover 和：focus。

 

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}



/* 生成的 CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

 

5、函数&运算

 

运算提供了加减乘除操作；我们可以做属性和颜色的运算，这样就可以实现属性值之间的复杂关系。

LESS中的函数——映射了JavaScript代码，还可以操作属性值。

 

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}



/* 生成的 CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

 

 

  

详细函数功能请参考：http://less.bootcss.com/functions/
详细函数功能请参考：http://less.bootcss.com/functions/

 

 

6、作用域

LESS中的作用域和其他编程语言相似，LESS会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查到，直到找到为止。

 


@var: red;


#page {
  @var: white;
  #header {
    color: @var; // white
  }


#footer {
  color: @var; // red  
}

 

 

Gemini仔仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端知识之CSS】CSS预处理语言
weixin_44337386的博客
05-18 2166
本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS预处理语言。
预编译器less
xun__xing的博客
08-27 942
预编译器less一、预编译器less1.基本原理2.LESS的安装和使用3.LESS的基本使用4.webpack中使用 一、预编译器less 1.基本原理 编写css时，受限于css语言本身，常常难以处理一些问题： 重复的样式值：例如常用颜色、常用尺寸 重复的代码段：例如绝对定位居中、清除浮动 重复的嵌套书写 由于官方迟迟不对css语言本身做出改进，一些第三方机构开始想办法来解决这些问题 其中一种方案，便是预编译器 预编译器的原理很简单，即使用一种更加优雅的方式来书写样式代码，通过一个编译器，将其转换为
Less的入门及使用—变量、嵌套规则、混合、运算、避免编译、继承(附代码演示)
王春燕的博客
04-15 2753
一、less简介 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 less的中文官网：
[前端开发工程师]工作小记——Less预编译语言
最新发布
rookie_126的博客
05-07 131
单位类型以最左侧操作数的单位类型为准（无效单位转换：px 到 cm 或 rad 到 %，无效则忽略单位）calc() 并不对数学表达式进行计算，但在嵌套函数中会计算变量和数学公式的值。，同一规则集中的其它元素的相对顺序保持不变。向后兼容，js将less转化为css。@ 规则可以与选择器以相同的方式进行。对数字、颜色或变量进行运算。注意：乘法和除法不作转换。
十分钟带你学会Less预编译器
漫漫前端路，进一寸有进一寸的欢喜
03-16 1725
CSS预编译器 Less 我们在书写css样式的时候经常会被权重给恶心到要吐血。所以预编译器应运而生。预编译器它就是使用一种更加优雅的方式来书写css代码，通过编译器，将其转换为可以被浏览器识别的传统css代码 目前，最流行的预编译器有LESS和SASS，由于它们两者特别相似，我们在这里介绍Less less官网：http://lesscss.org/ sass官网：https://sass-...
Css预处理之Less语法特性全指南
weixin_46104231的博客
11-25 1012
目录 认识less less初体验 less变量 变量插值 less选择器 less url less import less属性 Less 变量名称 延迟加载 less导入 less的命名空间和访问器 less拓展 拓展附加到选择器 拓展内部规则集 拓展嵌套选择器 less的嵌套规则 less混和 less不输出mixins mixins中的选择器 mixin的命名空间 less保护的命名空间 less混合参数 less mixins具有多个参数 less
动态的样式表lesscss:简单学习lesscss语法
09-25
下面是 LessCSS 的一些基本语法和特点： 变量 LessCSS 允许使用变量来存储值，这样可以使得代码更简洁易读。例如： ``` @color: #4D926F; #header { color: @color; } h2 { color: @color; } ``` 编译后的 CSS ...
postcss-less:用于解析LESS的PostCSS语法
05-13
要编译LESS，请使用LESS的官方工具集。 安装 使用npm： npm install postcss-less --save-dev 如果您发现此模块有用，请考虑。 用法 无postcss-less的最常见用法是将PostCSS转换直接应用于LESS源。 例如。 以LESS...
前端构建 Less入门(CSS预处理器)
11-30
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你...
less简单入门(CSS 预处理语言)
08-31
【Less 简单入门：理解CSS预处理语言的核心特性】 Less是一门强大的CSS预处理语言，它的出现极大地扩展了CSS的功能，使CSS代码变得更加简洁、可维护，并且支持主题的快速开发。通过引入变量、混合（mixin）、函数等...
学习CSS预处理器:Sass和less进行对比
09-25
CSS预处理器是开发者工具箱中的重要组成部分，它们弥补了CSS原生语法的不足，提供了诸如变量、嵌套规则、函数、混合（mixins）和条件语句等编程特性。Sass和Less是目前最广泛使用的两种CSS预处理器，各有其特点和...
python的作用域有哪几种_Python作用域
weixin_39897505的博客
11-20 221
在讲Python作用域前，先来分析一下如下一个函数：def multiplier(factor):def multiplyByFactor(number):return number * factorreturn multiplyByFactor当我们执行test=multiplier(10)的时候返回的并不是一个具体值而是如下这么一个函数：实际上这里我们可以看出执行这个函数之后返回的是一个函数，...
前端知识——css 之预处理器 less 语法
weixin_42771853的博客
04-04 518
在Less中，算术运算符 +、-、 * 、/ 可以对任何数字、颜色或变量进行运算。后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是。Sass的语法使用的是类似于Ruby的语法，映射是提取一组属性中的某个属性的方法。特殊符号：& 表示当前选择器的父级。Less提供了选择器的嵌套。@变量名: 变量值;混合是一种将一组属性。
Less的常用语法
weixin_46032850的博客
07-10 3743
less的语法 1.注释语法 1.1 /**/ (多行注释) 这种注释是css的注释,编译以后,会保留显示在css文件中. 1.2 // (单行注释) // 这种代码注释css并不识别,编译后会隐藏,不会显示在css文件中. 2.变量 在less中,可以使用变量,来统一设置一类可以重复使用的值,方便后期CSS代码维护. 2.1普通变量的使用 使用@符号定义变量, 语法: @变量名:变量值; 注意:变量值一定要符合CSS属性值的规范. 在CSS选择器中后面是用变量;如:属性的名称:@变量 // 定义变量
CSS预处理之less,sass
qq_46063669的博客
10-29 1498
less是css的增强版，通过less可以编写更少的代码，给开发人员带来遍历，并能够方便后期的维护。
详解css的预编译语言sass
weixin_43309143的博客
02-28 581
sass是css的预编译语言，比css更高更快更强 将sass语言写在后缀为 .sass 或者 .scss 的文件里面。 .sass文件 和 .scss 文件的区别 在.scss文件里面和写css语法基本一致 在.sass文件里面就没有大括号和分号，全部依靠缩进来维持关系 这两个文件被编译成css文件以后是一样的 sass工具编译 .sass 和 ...
css预编译器less的简单使用
lppklm的专栏
09-18 1125
├── index.php ├── less.js └── style.less index.php: style.less： @color: black; @width:50px; @height:50px; .box{     width:@width;     height:@height;     backgroun
less预编译css基础语法
loushengyue
03-29 352
序 作为一种 CSS 扩展, Less 不仅向后兼容 CSS, 它还使用现有的 CSS 语法新增了额外的特性. 这使得学习 Less 更轻松, 一旦有任何问题，可以随时退回使用标准的 CSS。 为什么要学习less，sass等预编译语言？ 因为高效，便捷，复用，利于维护…… 安装 一. 菜鸟方式 koala官网：http://koala-app.com/index-zh...
Css预编语言以及区别
闲聊的互联网
04-25 236
校验输入框内容基类 ZPTextAttribiteFild： /// placeHold 和 输入框的间距 @property (nonatomic, assign) CGFloat placeHoldSpaceFild; /// 输入框距离底部的间距 @property (nonatomic, assign) CGFloat fildSpaceBottom; /// 占位文字颜色 @property (nonatomic, strong) UIColor *placeholderTextColor;
sass less stylus预编译区别
05-16
Sass、Less和Stylus都是CSS预处理器，它们的作用是让CSS更加易于编写和维护。 Sass和Less都是基于Ruby和JavaScript的预处理器，而Stylus则是基于Node.js的预处理器。它们的预编译方式和语法有些许不同： 1. Sass：Sass使用缩进式语法，文件扩展名为.scss。它支持变量、嵌套规则、混合（类似于函数）、继承、运算和颜色函数等特性。 2. Less：Less同样使用缩进式语法，文件扩展名为.less。它支持变量、嵌套规则、混合、继承和运算等特性，但它的语法比Sass更加简单易懂。 3. Stylus：Stylus使用的是基于缩进和类似JavaScript的语法，文件扩展名为.styl。它支持变量、嵌套规则、混合、继承、运算、函数和插值等特性，而且它的语法比Sass和Less更加灵活。 总的来说，Sass、Less和Stylus都是非常优秀的预处理器，它们可以提高CSS的编写效率，让代码更加简洁易懂。选择哪种预处理器取决于个人喜好和项目需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值