初学LESS

来源：互联网发布：电信运营商大数据应用编辑：程序博客网时间：2024/05/02 06:04

Less 是什么
a) Less 是一种动态样式语言，属于CSS预处理语言一种，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护
编译Less 的工具
下载网站 http://koala-app.com/index-zh.html
Less语言特性
a) 变量
i. 定义： @变量名：值

.width{    @wid:100px;    width:@wid;}

            编译后

.width {    width: 100px;}

b) 混合
i. 定义：一个class 去调另一个 class
ii. 用法：

.border{    background: red;}.div{    color: green;    .border }

            编译后

.border {  background: red;}.div {  color: green;  border: solid 5px pink;  background: red;}

c)  带参数混合（多参数直接用逗号隔开）        i.  使用定义一个带参数的属性集合，类似于js中的方法            无初始值的带参混合

.border-radius(@radius:20px){    border-radius: @radius;}.button{    .border-radius(6px);}

            编译后

.button {  border-radius: 6px;}

            有初始值的带参混合

.border-radius(@radius:20px){    border-radius: @radius;}.button{    .border-radius();}

            编译后

.button {  border-radius: 20px;}

d)  匹配模式        i.  定义 根据传递参数的不同 选择不同的css 类似于编程中的switch         ii. 使用

//上.triangle(top,@width:5px,@color:#ccc){    border-width: @width;    border-color: transparent transparent @color transparent;    border-style: dashed dashed solid dashed}//左.triangle(left,@width:5px,@color:#ccc){    border-width: @width;    border-color: transparent @color transparent transparent;    border-style: dashed solid dashed dashed}//右.triangle(right,@width:5px,@color:#ccc){    border-width: @width;    border-color: transparent transparent transparent @color;    border-style: dashed dashed dashed solid}//下.triangle(buttom,@width:5px,@color:#ccc){    border-width: @width;    border-color: @color transparent transparent transparent;    border-style: solid dashed dashed dashed}

        调用

.sanjiao{    .triangle(right,100px);//right 可以变化  根据传入的不同  调用不用的triangle方法}

        编译后生成

.sanjiao {  border-width: 100px;  border-color: transparent transparent transparent #cccccc;  border-style: dashed dashed dashed solid;}

        还有一种加上

//@_ 表示  不管选择哪一个  这个里面的代码都会带入.triangle(@_,@width:5px,@color:#ccc){    width: 0;    height: 0;    overflow: hidden;}

        @_ 表示不管选哪一个  都会加上这个样式        新生成的css

.sanjiao {  border-width: 100px;  border-color: transparent transparent transparent #cccccc;  border-style: dashed dashed dashed solid;  width: 0;  height: 0;  overflow: hidden;}

e)  嵌套   （& 表示父级的名字）        i.  定义 ： 顾名思义这里就是层级的意思        ii. 使用

//嵌套  & 代表上一个选择器.list{    width: 600px;    margin: 30px auto;    padding: 0;    list-style: none;    li{        height: 30px;        padding: 0 10px;        line-height: 30px;        background-color: pink;        margin-bottom: 5px;    }     a{        float: left;        &:hover{            color: red;        }    }    span{        float: right;    }}

        编译后

.list {  width: 600px;  margin: 30px auto;  padding: 0;  list-style: none;}.list li {  height: 30px;  padding: 0 10px;  line-height: 30px;  background-color: pink;  margin-bottom: 5px;}.list a {  float: left;}.list a:hover {  color: red;}.list span {  float: right;}

f)  避免编译 ：~ g)  导入文件 ：@import("xx")  默认less文件  @import (less) ("xx.css")h)  Less也可做运算

0 0