前端菜鸟必学！less使用基础讲解

概述
使用方法
语法简介
嵌套规则
实例

概述

less是动态的样式表语言,通过简单,明了的语法定义,使编写css 的工作变得非常简单,在实际项目开发中,大大提高了前端工程师的工作效率。

不过个人觉得less的编写过程较为复杂，若是在平时的小项目中大可不必使用它。但是在大型工程项目中可以实现高效的代码管理，所以less是前端工程师必学的内容之一。

使用方法

使用less语法将样式表达式写进格式为 .less 的文档中，再将less文档编译成css文档直接引入html中使用

编译文档我们需要一个 less 编译的工具：个人推荐使用（考拉）koala。

koala 的下载与安装: http://koala-app.com
使用方法十分简单，直接拖拽进去点击编译即可在原文档路径下生成一个css文档，这里不多做介绍。

语法简介

学习less需要有css的基础，原因可通过下文实例自行思考

less 的注释有两种方法/*   */ 和    //
前一种会在 css 文件中显示，后一种不会在 css 显示

嵌套规则

变量延迟加载：同级属性加载完后加载变量，从上往下加载。

@var: 0;
.class {@var: 1;.brass {@var: 2;three: @var;  //=3@var: 3;}one: @var;  //=1
}

定义一个变量，并为它赋上默认参数：

// 形参 实参 都可以写默认参数： @w：10px .box1(@w:100px,@h:100px,@c:pink){&:extend(.common all);width: @w;height: @h;background: @c;

实例

@zero:0;
@selector:wrap;
@url:"../img/zdy.jpg";
*{margin: @zero;padding: @zero;
}
//用属性名调用变量 要加中括号
#@{selector}{position: relative;width: 300px;height: 300px;border: 1px solid;margin: @zero auto;background: url("@{url}");
}

&可以提级，使变量与其父元素同级。

a{float: left;&:hover{/*&代表父级*/color: red;}
}

前端菜鸟必学！less使用基础讲解相关推荐

小白必学的爬虫基础（二）
爬虫基础知识网络爬虫爬虫可以解决的问题爬虫工程师的进阶之路搜索引擎搜索引擎的主要组成搜索引擎的工作流程搜索引擎的局限性聚焦爬虫爬虫准备工作 robots协议 sitemap–网站地图 ...
python基础知识整理-整理了27个新手必学的Python基础知识点
原标题:整理了27个新手必学的Python基础知识点 1.执行脚本的两种方式 Python a.py 直接调用Python解释器执行文件 chomd +x a.py ./a.py #修改a.py文件的 ...
div css标记,前端初学者必学的div加css标签
原标题:前端初学者必学的div加css标签今天给大家分享前端初学者必须要学习的标签,这些标签你都会了吗? DIV加css标签页头:header 登录条:loginBar 标志:logo 侧栏:si ...
学习Spring必学的Java基础知识
学习Spring必学的Java基础知识(1)----反射引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓"登高必自卑,涉远必自迩".以下几项Jav ...
linux菜鸟必学的60个命令,新手入门 Linux菜鸟必学的60个命令
linux常用命令介绍 Linux必学命令 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用 ...
linux菜鸟必学的60个命令,Last- Linux必学的60个命令
1.作用 last命令的作用是显示近期用户或终端的登录情况,它的使用权限是所有用户.通过last命令查看该程序的log,管理员可以获知谁曾经或企图连接系统. 2.格式 1ast[-n][-f file ...
web前端知识点太多_web前端入门必学的16个知识点，都来看一下吧
1.HTML常用标签语言是什么 .Web前端开发语言. HTML超文本标记语言 . 网页主体结构 .常用标签.超链接(a标签).Img图片标签 2.盒子模型初探Div盒子模型 .css样式. 简单 ...
【GIS人必学】零基础学习ArcGIS Python脚本开发训练营来了
Python作为一种高级程序设计语言,凭借其简洁.易读及可扩展性日渐成为程序设计领域备受推崇的语言.ArcGIS软件由于其面向地理问题的科学理念,不断创新的技术方法,已在国内外市场占据了主导地位.Py ...
Linux菜鸟必学的60个命令
Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想真正理解Linux系统, ...

前端菜鸟必学！less使用基础讲解

前端菜鸟必学！less使用基础讲解

概述

使用方法

语法简介

嵌套规则

实例

前端菜鸟必学！less使用基础讲解相关推荐

最新文章

热门文章