css3之LESS简单入门
CSS（层叠样式表）是一项出色的技术作为一门标记性语言，CSS 的先天性优点是语法相对简单，对使用者的要求较低，但它的致命弱点是需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。造成这一现象的很大原因在于CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。Less的出现，为Web开发者带来了福音，它是一门CSS预处理语言，引入了变量、运算、函数、继承等功能，为CSS语言赋予了动态语言的特性。Less大大简化了CSS的编写，并且降低了CSS的维护成本。就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
语法
1.注释
// 单行注释 不会编译到css中
/* 多行注释 会编译到css中 */2.变量
// 语法: @变量名: 值
@white: #fff;
@bgColor: #ccc;
@fontSize: 22px;
// 多值变量
@normalSize: 20px 30px 40px 50px;
body {
background-color:@bgColor;
}
main {
color: @bgColor;
background-color: @white;
font-size:@fontSize;
padding:@normalSize;
}
aside {
font-size:@fontSize;
margin:@normalSize;
}3.嵌套(尽量不要嵌套超过三层)
.container {
h1 {
font-size: 25px;
color: #e45456;
}
p {
font-size: 25px;
color: #3c7949;
}
.myclass {
h1 {
font-size: 25px;
color: #e45456;
}
p {
font-size: 25px;
color: #3c7949;
}
}
}- 父选择器符号(&) 直接子选则器符号(>).container { > h1 { font-size: 25px; color: #e45456; } > p { font-size: 25px; color: #3c7949; } .myclass { h1 { font-size: 25px; color: #e45456; } p { font-size: 25px; color: #3c7949; } } }
5.四则运算
.box {
width: 20px*3 + 10;
height: 30px/3-2;
}6.函数
.effect(@normal:yellow, @hover:orange, @visited:darkorange, @active:green) {
color: @normal;
&:hover {
color: @hover;
}
&:visited {
color: @visited;
}
&:active {
color: @active;
}
}
a {
// .effect(red,green,blue,black);
.effect()
}
.box {
.effect(pink,hotpink,lightpink,white);
}7.导入
不同的功能 要把这些代码放到不同的文件中
格式: @import "src"8.继承
aside {
font-size:24px;
margin:20px 30px 40px 50px;
border:1px solid #ccc;
}
main {
color:#ccc;
background-color:#fff;
// font-size:24px;
// padding:20px 30px 40px 50px;
&:extend(aside);
border:none;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/06/25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录