文档章节

less的简单实用介绍

jywud
 jywud
发布于 2016/06/26 23:38
字数 459
阅读 29
收藏 2

 

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.避免编译

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

 

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 私有
下一篇: nodejs学习
jywud
粉丝 2
博文 10
码字总数 11214
作品 0
南京
前端工程师
私信 提问
2012年度最新的7款导航菜单Jquery特效

网站悬浮快速导航Jquery特效 此Jquery特效是一款非常实用的功能,最近很多网友想要JquerySchool网站悬浮快速导航的特效,为了满足网友们,今天把它整理出来分享给网友们用,此功能原来来自网...

邓剑彬
2012/11/29
605
10
分布式集群管理软件--dister

dister dister的介绍 dister(Distribution Cluster)是一款轻量级高性能的分布式集群管理软件,实现了分布式软件架构中的常用核心组件,包括: 服务配置管理中心; 服务注册与发现; 服务健康检...

johng_cn
2017/09/21
407
0
php开源框架--CanPHP

CanPHP框架是一个简洁,实用,高效,遵循apache协议的php开源框架,以“简单、自由、包容”为理念,主要是为了简化和快速开发小型项目和开 源系统二次开发而诞生。它既可以完美的支持MVC模式...

单骑闯天下
2012/03/11
4.8K
4
pillar/FilghtPHP

框架介绍 本框架是在著名的FilghtPHP(国外)和Canphp(国内)基础上扩展的一个小框架,简化了开发流程,增加了MVC模式。 ####官网:http://www.easyes.com.cn FilghtPHP Flight是一个快速,简易...

pillar
2016/09/28
0
0
Navicat Premium 中实用工具有哪些

数据库管理工具的种类有很多,其中,Navicat Premium非常的受广大的用户喜欢。因为,它为了改善用户的体验,特地提供了数种实用工具。而且其本身还支持单一程序同时连接到 SQLite、MariaDB、...

Navicat数据库管理工具
2016/06/27
12
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 孤独到都和病毒发生了感情了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# 逃跑计划《一万次悲伤 (Live)》 《一万次悲伤 (Live)》- 逃跑计划 手机党少年们想听歌,请使劲儿戳(这里) 现在...

小小编辑
43分钟前
17
4
test

//// main.c// Test//// Created by 吕颖 on 2019/1/16.// Copyright © 2019年 carmen. All rights reserved.//#include <stdio.h>#include <stdlib.h>#include <t......

carmen-ly
今天
3
0
Android webview热门组件agentweb:4.0.2无法自适应的问题

Android webview热门组件agentweb:4.0.2无法自适应的问题 //设置自适应屏幕,两者合用mAgentWeb.getAgentWebSettings().getWebSettings().setUseWideViewPort(true); //将图片调整到适合w...

Gemini-Lin
今天
5
0
如何维护一个自己的 golang doc 服务

本文内容是如何维护一个golang 在线的doc 服务。 1 什么是godoc ? godoc 是 golang 官方提供的文档生成工具, 2 为什么要有godoc ? 我们经常遇到一个问题,就是代码和文档不一致,线上代码版...

鼎铭
今天
5
0
js中的对象创建的模式以及继承模式

对象创建模式: 工厂模式 构造函数模式 原型模式 继承模式 原型式继承 寄生式继承 构造函数 原型式和构造函数的组合式(缺点:运行两次超类类函数,积累函数的属性被挂载在原型对象上和实例对...

莫西摩西
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部