文档章节

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

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

 

 

 

© 著作权归作者所有

共有 人打赏支持
jywud
粉丝 2
博文 10
码字总数 11214
作品 0
南京
前端工程师
分布式集群管理软件--dister

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

johng_cn
2017/09/21
407
0
Navicat Premium 中实用工具有哪些

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

Navicat数据库管理工具
2016/06/27
12
0
10+ 方便实用的jQuery代码

由chenglin博客整理发表,原文链接:http://www.chenglin.name/web/js-web/405.html 这里将为大家介绍十几个方便实用的jquery代码,大多简单上手,欢迎大家交流 平滑滚动到页面顶部 我们以一...

Cleey
2014/02/17
327
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

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04下载安装Google图解法

首先Ctrl + Alt + T打开终端,或者可以在在搜索框搜索终端。 (1)sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list.d/ ,(将下载源加入到系统的...

AI_SKI
29分钟前
0
0
spring could采坑 eureka开启验证后无法连接注册中心

com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server at com.netflix.discovery.shared.transport.decorator.RetryableEurekaHttpClie......

君千殇520
29分钟前
2
0
支付宝小程序下单支付接口:40004 ACQ.INVALID_PARAMETER

下面是支付宝下单接口 https://docs.open.alipay.com/api_1/alipay.trade.create/ 如果按官方文档的说明,并没有解释清楚buyer_id什么时候要传,只是说:特殊可选,啥叫特殊可选?!在调小程...

swingcoder
38分钟前
1
0
【Java】广州三本秋招经历

前言 只有光头才能变强 离上次发文章已经快两个月时间了,最近一直忙着秋招的事。今天是2018年10月22日,对于互联网行业来说,秋招就基本结束了。我这边的流程也走完了(不再笔试/面试了),所...

Java3y
40分钟前
3
0
在idea中启动多个SpringBoot项目

https://blog.csdn.net/forezp/article/details/76408139

灯下草虫鸣_
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部