say hello & intro
- Less is More,Than CSS-少即是多，比CSS
less介绍-say hello
Less是什么？
Less 类似于Jquery
- LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
- LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
Koala的基本使用
koala编译
- Koala
- 国人开发的LESS/SASS编译工具。
- 下载地址：http://koala-app.com/index-zh.html
Node.js库编译
- npm install -g less
- lessc test.less > test.css（注意less文件与css文件路径）
浏览器端编译
Less语法详解
Less注释
less代码
/*我是被编译的*/
//不会被编译
css代码
/*我是被编译的*/
变量
- less中想要声明变量的话 一定要用@开头 例如： @变量名：值；
less代码
//变量
@test_width:300px;
.body{
width:@test_width;
height:@test_width;
background-color: yellow;
.border;
left:100px;
}
css代码
.body {
width: 300px;
height: 300px;
background-color: yellow;
border: 5px solid pink;
left: 100px;
}
混合
混合(mixin)变量
例如：
.border{border:solid 10px red;}
带参数的混合
.border-radius (@radius) {css代码}
可设定默认值
border-radius(@radius:5px){css代码}
简单例子
less 代码
.body{
width:@test_width;
height:@test_width;
background-color: yellow;
.border;
left:100px;
}
//混合
.border{
border:5px solid pink;
}
css代码
.body {
width: 300px;
height: 300px;
background-color: yellow;
border: 5px solid pink;
left: 100px;
}
.border {
border: 5px solid pink;
}
复杂例子
less代码
//混合 - 可带参数的
.border_02(@border_width){
border: solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
//混合 - 默认带值
.border_03(@border_width:10px){
border:solid green @border_width;
}
.test_hunhe_03{
.border_03();
}
.test_hunhe_03{
.border_03(50px);
}
//混合的例子
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.radius_test{
width:100px;
height:40px;
background-color: green;
.border_radius();
}
.sanjiao{
.triangle(top,100px);
}
css代码
.test_hunhe {
border: solid yellow 30px;
}
.test_hunhe_03 {
border: solid green 10px;
}
.test_hunhe_03 {
border: solid green 50px;
}
.radius_test {
width: 100px;
height: 40px;
background-color: green;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.sanjiao {
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
匹配模式
- 相当于JS中的if(但不完全是)
- 满足条件后才能匹配
less代码
//匹配模式
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.sanjiao{
.triangle(top,100px);
}
//匹配模式 - 定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
.pipe{
width:200px;
height:200px;
background-color: green;
.pos(r);
}
css代码
.sanjiao {
border-width: 100px;
border-color: transparent transparent #ccc transparent;
border-style: dashed dashed solid dashed;
}
.pipe {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
运算
- 任何数字，颜色或者变量都可以参与运算，运算应该可以包裹在括号中。例如==：+ - * /==
less代码
//运算
@test_01:300px;
.box_02{
width:@test_01 + 20;
}
css代码
.box_02 {
width: 320px;
}
嵌套规则
- Less中最有意思的小东西
- 两种用法
（1）&对尾类使用
hover或者focus
（2）对连接的使用&-item
less代码
//嵌套规则
/*
.list{}
.list li{}
.list a{}
.list span{}
*/
.list{
width:600px;
margin:30px auto;
padding:0;
list-style:none;
li{
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
padding:0 10px;
}
a{
float:left;
//&代表他的上一层选择器
&:hover{
color:red;
}
}
span{
float:right;
}
}
css代码
/*
.list{}
.list li{}
.list a{}
.list span{}
*/
.list {
width: 600px;
margin: 30px auto;
padding: 0;
list-style: none;
}
.list li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
padding: 0 10px;
}
.list a {
float: left;
}
.list a:hover {
color: red;
}
.list span {
float: right;
}
@arguments变量
- @arguments包含了所有传递进来的参数
- 如果你不想单独处理每一个参数的话就可以像这样写：
less代码
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments; //相当于传入所有变量:border:@w @c @xx;
}
.test_arguments{
.border_arg(40px);
}
css代码
.test_arguments {
border: 40px red solid;
}
避免编译，！important以及总结
避免编译
- 有时候我们需要输出一些不正确的CSS语法或者使用一些Less不认识的专有语法。
- 要输出这样的值我们可以在字符串
前面加上一个~例如：width:~'calc(100%-35)'
less代码
//避免编译
.test_03{
width:~'calc(300px - 30px)';
}
css代码
.test_03 {
width: calc(300px - 30px);
}
!important关键字
- 会为所有混合所带来的样式，添加上!important
less代码
//!important
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.test_important{
.border_radius()!important;
}
css代码
.test_important {
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
简单实战项目
Snip20170721_54.png
更多
Less中文网站
如果看不懂英文的，可以访问less中文旧版网站
网友评论