Less-CSS预处理语言快速入门

简介: Less-CSS预处理语言快速入门

Less css预处理语言

特性:变量、继承、运算、函数

http://lesscss.cn/

编译器

1、koala

http://koala-app.com/index-zh.html

https://github.com/oklai/koala

2、sublime插件

less       # 语法高亮
less2css   # 保存自动生成同名的css文件

需要安装node环境+node插件

npm install -g less

npm install -g less-plugin-clean-css

报错:

less2css error: `lessc` is not available

重启sublime

配置保存时不进行压缩

{
"minify": false
}

语法

1、注释

/**/  # css中的注释
// # 编译时会被自动过滤

2、变量

以@开头,例如:

@变量:值;


@text_with: 200px;

.box{
width: @text_with;
heigth: @text_with;
background-color: yellow;
}

编译结果


.box {
width: 200px;
height: 200px;
background-color: yellow;
}

3、混合

类似其他语言中的函数

.border{
border: solid 5px pink;
}

.box-border{
.border;
width: 200px;
height: 200px;
background-color: green;
}

编译结果

.border {
border: solid 5px pink;
}

.box-border {
border: solid 5px pink;
width: 200px;
height: 200px;
background-color: green;
}

4、混合带参数

.box{
width: 200px;
height: 200px;
background-color: yellow;
.border(green); // 混合
}

.border(@color){
border: solid 5px @color;
}

编译结果

.box {
width: 200px;
height: 200px;
background-color: yellow;
border: solid 5px green;
}

5、混合默认参数

.box{
width: 200px;
height: 200px;
background-color: yellow;
.border();
}

.border(@color: 10px){
border: solid 5px @color;
}

编译结果

.box {
width: 200px;
height: 200px;
background-color: yellow;
border: solid 5px 10px;
}

6、混合示例

.box{
width: 200px;
height: 200px;
background-color: green;
.border-radius()
}

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

编译结果

.box {
width: 200px;
height: 200px;
background-color: green;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

7、匹配模式

类似其他语言中的if语句

@charset "utf-8";

.box-line(top, @boder-width:5px){
border-top: solid @boder-width red;
}

.box-line(bottom, @boder-width:5px){
border-bottom: solid @boder-width red;
}

.box-line(left, @boder-width:5px){
border-left: solid @boder-width red;
}

.box-line(right, @boder-width:5px){
border-right: solid @boder-width red;
}

// 不管匹配到谁,以下样式都会被输出
.box-line(@_, @boder-width:5px){
background-color: green;
width: 200px;
height: 200px;
}

.box{
.box-line(right)
}

编译结果

@charset "utf-8";

.box {
border-right: solid 5px red;
background-color: green;
width: 200px;
height: 200px;
}

8、运算

支持 + - * /

@default-width: 20px;

.box{
width: @default-width + 20;
}

编译结果

.box {
width: 40px;
}

9、嵌套

.list{
list-style: none;
width: 500px;
margin: 30px auto;

li{
height: 20px;

}

a{
float: left;

// & 表示上一层选择器
&:hover{
color: red;
}

}

}

编译效果

.list {
list-style: none;
width: 500px;
margin: 30px auto;
}

.list li {
height: 20px;
}

.list a {
float: left;
}

.list a:hover {
color: red;
}

10、@arguments

获取所有参数

.box{
.border-color();
}

.border-color(@width: 30px, @color: red){
border: solid @arguments;
}

编译效果

.box {
border: solid 30px red;
}

11、避免编译

.box{
height: calc(20px + 10px);
// 避免编译
width: ~'calc(20px + 10px)';
}

编译效果

.box {
height: calc(20px + 10px);
width: calc(20px + 10px);
}

12、!important

.box{
height: 20px !important;
}

编译效果

.box {
height: 20px !important;
}

12、文件导入

hi.css

.hi{
height: 20px;
}

hello.less

.hello{
width: 20px
}

main.less


// 引入less文件
@import "hello";

// 引入 css文件
@import "hi.css";

// 引入 css文件 转为 less
@import (less) "hi.css";

编译效果

main.css

@import "hi.css";
.hello {
width: 20px;
}
.hi {
height: 20px;
}


            </div>
目录
相关文章
|
17天前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
17天前
|
存储 前端开发 编译器
对 CSS 预编语言的理解
【10月更文挑战第24天】在前端开发领域,CSS 预编语言是一种重要的工具和技术,它们为我们提供了更强大、更灵活和更高效的方式来编写和管理 CSS 代码。以下是对 CSS 预编语言的深入理解。
|
17天前
|
前端开发 开发者
如何快速掌握 CSS 预编语言
【10月更文挑战第24天】快速掌握 CSS 预编语言需要时间和耐心,不要急于求成。通过系统的学习、实践和不断积累经验,你将逐渐熟练掌握 CSS 预编语言,并能够在实际开发中灵活运用,提高开发效率和代码质量。
|
5月前
|
存储 前端开发 编译器
【CSS预处理语言】less快速入门
【CSS预处理语言】less快速入门
69 1
|
5月前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
5月前
|
前端开发
CSS快速入门
CSS快速入门
28 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。

热门文章

最新文章