文档章节

less的简单实用介绍

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

 

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
博文 8
码字总数 11214
作品 0
南京
前端工程师
分布式集群管理软件--dister

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

johng_cn ⋅ 2017/09/21 ⋅ 0

Navicat Premium 中实用工具有哪些

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

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

php开源框架--CanPHP

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

单骑闯天下 ⋅ 2012/03/11 ⋅ 4

2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬 ⋅ 2012/11/29 ⋅ 6

10+ 方便实用的jQuery代码

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

Cleey ⋅ 2014/02/17 ⋅ 0

pillar/FilghtPHP

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

pillar ⋅ 2016/09/28 ⋅ 0

Android实用视图动画及工具系列之四:多状态CheckBox,可设置大小尺寸和设置不可用的复选框

实现效果 功能说明 大家都知道在Android5.0以前,Android自带的checkbox不可以通过width和height设置宽高,只能通过切多张图和设置android:scaleX="0.5",android:scaleY="0.5"来实现大小的缩...

jaikydota163 ⋅ 2016/08/02 ⋅ 0

最简单的Druid使用方式

Druid是一个JDBC组件, 首先是一个数据库连接池,属于阿里巴巴众多开源项目的一个。如果想看具体的介绍请看这里: 官网介绍:http://code.alibabatech.com/wiki/display/Druid/Home OSC介绍:...

hanzhankang ⋅ 2012/12/14 ⋅ 7

Android实用视图动画及工具系列之三:表情加载动画和失败加载动画,人物加载动画

实现效果 功能说明 网速慢时,加载网络数据时,界面怎么处理才美观?载入失败或网络丢包时,如何让界面显得更和谐?这一直是开发人员和美工人员不绝于耳的问题,为了达到功能和UI的完美交互,...

jaikydota163 ⋅ 2016/08/02 ⋅ 0

JSP中解决session超时跳转到登陆页面并跳出iframe框架或局部区域的方法

当session会话超时,页面请求被重新定位到了登陆界面。因大都采用Ajax动态局部请求,导致返回登陆页面被嵌套在系统界面的局部区域中,并非想要的效果。一般页面主体布局采用iframe框架进行分...

Arthur126 ⋅ 2015/10/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部