Less学习笔记
Say Hello
Less is More, Than CSS
简单的学习了一下Less的基础,做一下小的笔记和总结。想要具体学习的可以去Less官网,Less老版官网
Less是什么?
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。
简单举例：
.box{
width:0;
height:0;
.box2;
}
.box2{
margin:0 1px;
}
.box3(@element:1px){
margin:0 @element;
}
.test{
.box3(30px);
}
.test1{
.box3();
}
编译后生成:
.box {
width: 0;
height: 0;
margin: 0 1px;
}
.box2 {
margin: 0 1px;
}
.test {
margin: 0 30px;
}
.test1 {
margin: 0 1px;
}
编译工具
1. Koala等
Download koala我这里使用是这个
2. Node.js
3. 浏览器使用
简单语法
1. 变量
定义方式:@elementname:value;
使用如:
@element:30px;
width:@element;
//或者如
@mySelector: banner;
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
2. 混合
.box2{
margin:0 1px;
}
.test(){
background-color:red;
}
.box{
width:0;
height:0;
.box2;
.test();
}
对上述代码来说,.box2和.test()的属性通过编译后，就可以混合在.box当中,但是区别是编译后的.css样式中不会出现.test();
同样，混合可带参数,参数可以默认值
/* .box(@element:value){
...
//value可选
}*/
.box3(@element:2px){
margin:0 @element;
}
.test{
.box3(30px);
}
.test1{
.box3();
}
在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important
3. 匹配模式
/*.triangle(@_,@w:5px,@c:#ccc){
width:0;
height: 0;
overflow: hidden;
}永远都会跟上，`@_`这是固定的,另外后面参数不能少*/
.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: solid dashed dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc)
{
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: solid dashed dashed dashed;
}
.triangle(@_,@w:5px,@c:#ccc){
width:0;
height: 0;
overflow: hidden;
}
.triangletest{
.triangle(top,,red);
}
则编译后的结果是:
.triangletest {
border-width: 5px;
border-color: transparent transparent #ff0000 transparent;
border-style: dashed dashed solid dashed;
width: 0;
height: 0;
overflow: hidden;
}
4. 嵌套规则
假设我们html中有如下的结构定义:
1 | <ul class="list"> |
那我们在css中定义样式可能是这样的:
.list{}
.list li{}
.list a{}
.list a:hover{}
.list span{}
但是在less中我们就可以使用嵌套定义的方法:
.list{
width:600px;
margin: 30px auto;
padding: 0;
list-style: none;
li{
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
}
a{
float:left;
//& 代表的是当前选择器的父亲选择器
&:hover{
color:red;
}
}
span{
float:right;
}
}
5. 运算
支持+,-,*,/基本运算
6. 作用域
Less 中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
7. 注释
/**/和//都是可以的，区别是//在css样式文件中不会保留
8. 避免编译
有时候要输出一些不正确的css语法或者使用一些less不认识的专有语法。
要输出这样的值我们可以在字符串前加一个~
width:~' calc(100%-35)'
9. @arguments变量和@rest变量
@arguments包含所有传递的参数
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
编译后为:
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}
如果你希望你的mixin接受数量不定的参数，你可以使用...。在变量名后面使用它，它会将这些参数分配给变量。
.mixin(...) { // matches 0-N arguments
.mixin() { // matches exactly 0 arguments
.mixin(@a: 1) { // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) { // matches 1-N arguments
此外:
.mixin(@a; @rest...) {
// @rest 会绑定到参数 @a 之后
// 而@arguments是绑定所有参数
}
就大概介绍这么多，感觉写基础是够用了，先试着写写。附函数手册