CSS预编译语言——less初级入门
2017-05-08 本文已影响1056人
108N8
一、 什么是Less.css
Less.css是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
Less.css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
官网地址
二、 编译工具
- Koaloa编译：国人开发的LESS/SASS编译工具。
- Nodes.js库
- 浏览器端使用
三、 Less中的注释
- 可以使用CSS中的注释（//）—— 是会被编译**的，即在.css文件中可见
- 也可以用//注释 —— 不会被编译的，不会再.css中保留
//编译的时候会自动过滤掉
声明编码格式，防止乱码@charset "utf-8";
四、 变量
Less中声明变量用@开头
less中，想声明变量的话，一定要用@开头 例如:@变量名：值
@test_width:300px;
@test_height:300px;
.box{
width: @test_width;
height: @test_height;
background-color: red;
}
五、 混合 (Mixin)
混合(mixin)变量
例： .border{border:10px solid red;}
带参数的混合
.border-radius(@radius){css代码}
可设默认值
.border-radius(@radius:5px){css代码}
目的：以前写的（之前定义过的）样式拿过来重用
.border{
border:5px solid pink;
}
.box{
width: @test_width;
height: @test_height;
background-color: red;
.border;
}
.box2{
.box;//用.box的用样式
margin-left: 100px;
}
混合可带参数
.border_02(@border_width){
border: @border_width solid green;
}
.test_hunhe{
.border_02(30px);
}
混合_带默认值
.border_03(@border_width:10px){
border: @border_width solid yellow;
}
.test_hunhe_03{
.border_03();
}
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.radius_test{
width: 200px;
height: 200px;
background-color: yellow;
.border_radius(20px);
}
六、 匹配模式
相当于js中的if，但不完全是；得满足条件后才能匹配
.sanjiao{
width: 0;
height: 0;
overflow: hidden;//用来处理ie6最小高度问题
border-width: 10px;
border-color:transparent transparent red transparent;//上面红色
border-style: dashed solid dashed dashed;//在ie6下有个黑色的边，解决方案，哪个方向有颜色哪个方向是solid,其他的是dashed
}
匹配模式
.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;
}
无论选择谁都得带上我，即使不选啥
.triangle(@_,@w:5px,@c:#ccc){
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao_02{
.triangle(right,@w:50px);
}
匹配模式的定位
.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(r){
position: fixed;
}
七、 运算
任何数字、颜色或者变量都可以参与运算预算应该被包裹在括号中
@test_01:300px;
.test_01{
width: @test_01 + 20px;//只有有一个人带单位就可以
height: @test_01 - 20 * 5;
position: absolute;
left:(@test_01 + 20)*3;
color: #ccc - 10;//less会转化为255,然后输出
}
八、 嵌套规则
两种用法
&对伪类的使用 — hover或 focus
&对连接的使用— &_nav
正常我们写css的时候
.list{}
.list li{}
.list li a{}
.list li span{}
用了css之后我们就这样写
.list{
width: 600px;
list-style: none;
margin: 30px auto;
overflow: hidden;
li{
height: 30px;
line-height: 30px;
background-color: aqua;
margin-bottom: 5px;
/*a{
float: left;
}*/
//嵌套层数越多，匹配的次数就越多，尽量少嵌套一些东西
}
a{
float: left;
&:hover{
//&代表上一层选择器,&=a ;若父级是.title ,子级是.title_nav = &_nav
color: red;
background-color: blue;
}
}
span{
float: right;
}
}
九、 @arguments
@arguments包含了所有传递进来的参数。
如果你不想单独处理每一个参数的话就可以像这样写
原来的办法传参
.border_arg(@w:30px,@c:red,@xx:solid){
border: @w @c @xx;
}
现在的利用argguments
.border_arg(@w:30px,@c:red,@xx:solid){
border: @arguments;
}
.test_arguments{
.border_arg();
}
.test_arguments_2{
.border_arg(40px);
}
十、 避免编译
有的时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法
要输出这样的值我们可以在字符串前加上一个~
例如：width:~’calc(100% - 30px)’;
.test_03{
width: calc(300px - 20px);
}
.test_04{
width: ~'calc(300px - 20px)'; //想不让less算，让浏览器算 用在calc 或者滤镜
}
十一、 !important 关键字
回味所有混合所带来的样式，添上!important
调试的时候加，平时用的时候最好不要加
.test_important{
.border_radius() !important;
}
====
十二、 其他的常用东西
定义清浮动方式
.clearFix{
&:after{
content: "";
display: block;
clear: both;
}
zoom: 1;
}
.list{
.clearFix;
}
ie6下需要将img的border:none；
定义浮动
.fl(@fl:left){
float: @fl;
display: inline;//解决ie6下双边距
}
.fr(@fr:right){
float: @fr;
display: inline;
}
.list{
.clearFix();//这样的方式是为了区分less还是css
}
引入外部的文件(一些库或公共的)
.less文件引入
@import "base"; 默认后缀名是.less所以不用写
.css文件引入
@import(less) "a.css"; //注意(less)有空格，貌似我没用出来有待研究
