less的简单实用介绍
博客专区 > jywud 的博客 > 博客详情
less的简单实用介绍
jywud 发表于1年前
less的简单实用介绍
  • 发表于 1年前
  • 阅读 18
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: less,css预处理

 

less是css的预处理语言,作为 CSS 的一种扩展,不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。

编译方式

1.使用koala编译

Koala 是一款由国人开发的开源预处理语言图形编译工具,目前已经支持less,sass,compass,coffeescript,很好用。下载地址 http://koala-app.com/index-zh.html

2.使用nodejs

在Node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装:

npm install -g less

如果你使用Mac或者Linux,可能需要使用管理员身份安装:

sudo npm install -g less

编译

lessc styles.less

 常用方式介绍

1.变量

变量命名以@开头,例如

@myColor: #5B83AD;

 #header { color: @myColor; }

编译为:

#header { color: #5B83AD; }

2.混合(mixin)

不带参数的方式,例如

.myColor{color: #666}

#header{

    width:100px;

    height:100px;

    .myColor

混合也可以带参数,例如

.myColor(@color){color: @color}

#header{

    width:100px;

    height:100px;

    .myColor(#346)

混合也可以定义默认参数值,例如

如果调用不传参数的话,#666为默认值

.myColor(@color: #666){color: @color}

#header{

    width:100px;

    height:100px;

    .myColor()

 

3.嵌套规则

我们之前经常见到ul li的css样式

ul{list-style:none}

ul li{    

    height:30px;

}

ul a{

    color:#222;

ul a:hover{

    color:#777;

}

用less嵌套的话这样写,很好理解,其中&表示上一层元素,就是a

ul{

    list-style:none;

    li{        

        color:#222;

        height:30px;

    }

    a{

         color:#222;

        &:hover{

            color:#777;

        }

    }

}

 

4.运算

数字可以加减乘除,例如

@myFont:14px;

#d1{

    font-size:8px+@myFont

}

结果为

#d1{

    font-size:22px

}

颜色也可以运算,要先转化为10进制。

 

5.匹配模式

类似于js的条件运算

.test(top,@w:100px){   

   height:@w;

.test(bottom,@w:200px){   

    height:@w;

#header{

    .test(top,120px); //匹配第一个.test

 

6.@arguments

所有的参数

.my(@w:100px,@s:#222,@xx:solid){

    border:@arguments;

}

#header{.my();}

7.避免编译

使用 ~'............'

 

 

 

共有 人打赏支持
粉丝 3
博文 8
码字总数 11214
×
jywud
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: