通过koala软件来使用less

最新推荐文章于 2024-04-14 09:45:00 发布
最新推荐文章于 2024-04-14 09:45:00 发布
阅读量552 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_40697723/article/details/81428125
版权

一.准备过程

文件夹如图所示

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
	
</body>
</html>

我们在text.less文件中写好样式以后将文件夹拖到koala编译，这样它会自动在css文件夹中新建一个css文件，所以我们引入的必须是css文件。

二.less重点功能介绍

 

1.变量/variables

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
	<header>头部</header>
</body>
</html>

less代码：

body {
  padding: 0;
  margin: 0;
}

/*下面定义一个变量，less定义变量以@开头,后面跟着变量名*/
@header-height: 60px;

header {
  height: @header-height;
}

2.混入/Mixins

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
	<div class="left">1</div>
	<div class="right">2</div>
</body>
</html>

css代码：

body {
  padding: 0;
  margin: 0;
}

div {
  width: 100px;
  height: 100px;
  font-size: 25px;
}

/*下面写一个混入的样式*/
.fl {
  float: left;
}
.fr {
  float: right;
}

.left {
  .fl();
  background-color: red;
}

.right {
  .fr();
  background-color: green;
}

3.参数混合/Parametric Mixins

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
	<div>1</div>
</body>
</html>

less代码：

body {
  padding: 0;
  margin: 0;
}

div {
  width: 100px;
  height: 100px;
  font-size: 25px;
  background-color: green;
  margin: 10px auto;
}

/*下面写一个参数混合的样式*/
.border-radius(@radius) {
  border-radius: @radius;
}

div {
  .border-radius(15px);
}

4.参数逻辑条件混合/Mixin Guards

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
	<div class="one">第一个</div>
	<div class="two">第二个</div>
	<div class="three">第三个</div>
</body>
</html>

less代码：

body {
  padding: 0;
  margin: 0;
}

/*参数逻辑条件混合Mixin_Guards*/
#ft-size(@name) when(@name=small) {
  font-size: 10px;
}
#ft-size(@name) when(@name=medium) {
  font-size: 20px;
}
#ft-size(@name) when(@name=big) {
  font-size: 30px;
}

.one {
  #ft-size(small);
}

.two {
  #ft-size(medium);
}

.three {
  #ft-size(big);
}

5.嵌套规则/Nesting

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
    <header>
    	<div>
    		<div class="one">this is one</div>
    	</div>
    </header>
</body>
</html>

less代码：

body {
  padding: 0;
  margin: 0;
}

/*引用*/
header {
  width: 800px;
  height: 500px;
  border: 1px solid red;
  div {
		width: 400px;
		height: 100px;
		margin: 20px auto;
		border: 1px solid green;
		.one {
		  color: red;
		  font-size: 50px;
		  /*&指当前目录下，即header div .one*/
		  &:hover {
		    color:green;
		  }
		}
  }
}

 

 

 

 

 

 

 

 

 

hahalang-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
koala less
07-18
自动将less 文件转换为css文件
koala 考拉less
04-11
支持html ,动态生成css文件，实时变换css ，更方便代码迭代
less基础 - Koala的基本使用
zjsfdx的博客
10-27 945
1.LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。2.编译工具 koala编译 a.Koala b.国人开发的LESS/SASS编译工具 c.下载地址：http://koala-app.com/index-zh.html Node.js库编译 浏览器端使用编译 koala可以变成中文版的，首先进入koala，点击“齿轮”图标，设置成如下图所示即可，关闭Ko
Koala：将CSS转换成Less的熊猫宝贝！
最新发布
(ง •̀_•́)ง
04-14 557
不过别担心，有一只特别的熊猫宝贝，名叫Koala（考拉），它可以将CSS编译成更强大、更灵活的语言Less。本文将向你介绍Koala的功能和用法，让你轻松掌握这只可爱的熊猫宝贝。打开Koala后，你会看到一个简洁的界面和一个可爱的熊猫图标。点击界面下方的"编译"按钮，Koala会开始编译你的CSS文件，并将编译后的Less文件输出到指定目录。现在，你可以在Less文件中添加更多功能，如定义变量和嵌套规则，让你的CSS更加强大和灵活。然后，点击右侧的设置按钮，你会看到编译选项。首先，我们需要安装Koala。
【less】用koala编译
weixin_39415598的博客
11-24 180
用less的目的是为了更方便更痛快的编写css，但实质任然是css。所以最后需要将less转换成css，这个过程叫编译。 编译方法有很多种，这里先讲讲用koala这个软件来编译。 1、新建一个less文件（这里我用sublime编辑器） 订阅号：Rabbit_svip 2、打开koala，然后把less的父目录拉到koala里 ...
Koala---Less编译器
afei2530的博客
01-02 102
http://koala-app.com/index-zh.html 转载于:https://www.cnblogs.com/rocky-AGE-24/p/5095497.html
koala软件
12-26
koala软件
koala工具，less解压用
10-30
koala工具是一款强大的前端开发辅助软件，特别适合于处理预处理器语言如Less。Less是一种CSS预处理器，它扩展了CSS语法，提供了变量、嵌套规则、运算符等功能，让CSS编写更加简洁和易于维护。Koala不仅仅支持Less，...
1、koala软件的安装和使用--less教程
anphygvyti09102的博客
07-15 419
最近在学习less，感觉可以编译的CSS真是爽，懒人必备。 1、我这里使用到koala软件来编译less文件生成CSS。 附上百度网盘下载链接：下载链接 　　　　　　　 密码： heqj 最新版本：官网链接 如下图： 好了，不管你是用最新版本还是用我百度网盘的，第一步，先安装后并运行这个koala软件。选择设置，更改语言为简体中文，记得关闭软件重启字体更改...
koala之学习（less编译）
weixin_34023982的博客
10-09 144
今天学习用到了koala编译工具，主要用在less的编译上。 首先在koala官网http://koala-app.com/index-zh.html上下载安装最新版本的软件，我用的是koala_2.0.4版本的 下载后就可以进行安装，安装完后运行koala 刚开始时英文显示的，可以设置中文的 然后重启软件就可以显示中文了。 接下来就简单的介绍下怎么编译less...
koala。exe
12-26
解析编译less文件,这是一种解决浏览器不能识别less语言的方法
koala新版的
01-14
koala是一个前端预处理器语言图形编译工具，Koala Mac版支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
less编译工具
11-07
考拉软件，预处理文件的编译器，将less编译成css文件。
考拉-less转化为css的工具
02-05
将less转化为css，less代码写起来逻辑清晰，更容易写，考拉可以将less代码直接转化为css代码
less编译器考拉
12-23
在开发编译中把less转换为css,在开发过程中节约时间
使用Koala编译LESS文件
苹果咏的博客
08-24 2252
Less是一种动态样式语言，可以像编程那样编写css文件，十分便捷 可以去这个网站学习 为了避免执行Less.js带来速度慢问题，可以使用Koala这个软件直接编译Less文件 Koala可以去这个网站下载下载Koala 将less文件拖动到软件当中，右键该文件设置输出路劲，输出成css文件，邮编勾选自动编译，当你编写less文件时就会自动编译成css代码，你的网页中只要引用css文件即可，
Less -- 初见less（Less介绍 & 初次使用less & 使用考拉编译less & 盒子居中）
天行健 君子以自强不息，地势坤 君子以厚德载物。
09-06 563
1. 初见less 1.1 Less介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 Less中文网 1.2 初次使用less 1.2.1 没有使用less: wrap 和 inner在样式文件里面没有联系 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt
Sass教程五：koala 和在Vue里使用Sass
柒钥的博客
08-07 267
第三种，编译软件 Koala 附上官网地址： http://koala-app.com/ 这是一个小软件，在官网上下载安装就可以了，官网可以自动分辨是windows系统还是Mac系统，所以直接点击下载就可以了。 根据提示，直接把要编译的文件拖到软件里或者把整个文件夹拖到软件里就可以了 点击某个文件，右边就会弹出来一个菜单，勾选最上面的 Auto Complie就可以自动监听啦，然后下面有...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值