Less语法整理


本人邮箱:kk306484328@163.com,欢迎交流讨论.
欢迎转载,转载请注明网址:http://www.cnblogs.com/kk-here/p/7601058.html
个人博客地址:http://www.cnblogs.com/kk-here/

这是本人整理的一些语法,基本上全了,至于进阶就是看你怎么组合怎么使用了;网上一些文章还谈到有js表达式,但是亲测无效,是他们随便拷贝的还是之前的版本存在过呢,这个问题我就不太清楚了.以下整理的内容都亲测有效,不放心的可以自己再测试一遍哈,有问题欢迎指正,谢谢查阅!


一,变量

基本使用

Less:

.@{selector} {
    width: 100px;
    height: 100px;
    @{property}: #000;
    background: url("@{bgImg}/test.png");

    &:after {
        display: block;
        content: @@var;
    }
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "你好啊";
@var: "name";

生成CSS:

.box {
    width: 100px;
    height: 100px;
    color: #000;
    background: url("../img/test.png");
}

.box:after {
    display: block;
    content: "你好啊";
}

字符串插值

@base-url: "http://abc.com";
background-image: url("@{base-url}/images/bg.png");

选择器插值

//Less
@name: blocked;
.@{name} {
    color: black;
}

//输出css
.blocked {
    color: black;
}

二,运算

任何数字、颜色或者变量都可以参与运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位,括号也同样允许使用,并且可以在复合属性中进行运算:

@var: 1px + 5;
width: (@var + 5) * 2;
border: (@width * 2) solid black;

三,Mixin混合

基本使用和extend

Less:

/*不加括号显示样式,生成并集选择器组合*/
.public {
  width: 100px;
  height: 100px;
}
.public() {
  /*加括号隐藏样式,生成在调用者里,代码重复*/
  width: 100px;
  height: 100px;
}
nav:extend(.public) {
  background-color: #f00;
}
div {
  &:extend(.public);
  background-color: #00f;
}
footer {
  .public;
  background-color: #cccccc;
}

生成CSS:

/*不加括号显示样式,生成并集选择器组合*/
.public,
nav,
div {
  width: 100px;
  height: 100px;
}
nav {
  background-color: #f00;
}
div {
  background-color: #00f;
}
footer {
  /*隐藏样式,生成在调用者里,代码重复*/
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

模式匹配

Less:

.mixin (dark, @color) {
  background-color: darken(@color, 10%);
}
.mixin (light, @color) {
  background-color: lighten(@color, 10%);
}
.mixin (show) {
  display: block;
}
.mixin (hide) {
  display: none;
}

div {
  width: 100px;
  height: 100px;
  .mixin(show);
  //.mixin(hide);
  .mixin(dark,red)
}

生成CSS:

div {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #cc0000;
}

命名空间

Less:

/*加括号隐藏了样式 .div命名空间*/
.div() {
  width: 200px;
  height: 200px;
  background-color: #000;

  div {
    width: 50px;
    height: 50px;
    background-color: #f00;
  }
  .color {
    color: skyblue;
  }
  &:hover{
    background-color: lighten(rgb(0, 0, 0), 20%);
  }
}
/*这样使用*/
nav {
  .div;
}
nav p {
  .div > .color;
}

生成CSS:

nav {
  width: 200px;
  height: 200px;
  background-color: #000;
}
nav div {
  width: 50px;
  height: 50px;
  background-color: #f00;
}
nav .color {
  color: skyblue;
}
nav:hover {
  background-color: #333333;
}
nav p {
  color: skyblue;
}

作用域

(类似于JS作用域链,一层一层网上找,找到为止)

Less:

@color: #ccc;
.box {
  @color: #eee;
  .gray {
    color: @color;
  }
}
.box2 {
  .gray {
    color: @color;
  }
}

生成CSS:

.box .gray {
  color: #eeeeee;
}
.box2 .gray {
  color: #cccccc;
}

!important

Less:

.box() {
  @color: #eee;
  background-color: #f00;
  width: 100px;
  height: 200px;
  .gray() {
    color: @color;
  }
}
nav {
  /*可以使继承到的混合集所有属性都添加!important*/
  .box !important;
  .box > .gray;
}

生成CSS:

nav {
  /*可以使继承到的混合集所有属性都添加!important*/
  background-color: #f00 !important;
  width: 100px !important;
  height: 200px !important;
  color: #eeeeee;
}

Parametric Mixins(参数混合)

Less:

/*可以设定参数,也可以同时设置默认值*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @property @duration @function @delay;
  -moz-transition: @property @duration @function @delay;
  -ms-transition: @property @duration @function @delay;
  -o-transition: @property @duration @function @delay;
  transition: @property @duration @function @delay;
}
/*等同于上式,Less中也有arguments*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
div1 {
  .transition;
}
div2 {
  .transition(@duration: 2s);
}
div3 {
  .transition(@duration: 3s;@property: width;)
}

生成CSS:

div1 {
  -webkit-transition: all 1s linear 0s;
  -moz-transition: all 1s linear 0s;
  -ms-transition: all 1s linear 0s;
  -o-transition: all 1s linear 0s;
  transition: all 1s linear 0s;
}
div2 {
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  -ms-transition: all 2s linear 0s;
  -o-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}
div3 {
  -webkit-transition: width 3s linear 0s;
  -moz-transition: width 3s linear 0s;
  -ms-transition: width 3s linear 0s;
  -o-transition: width 3s linear 0s;
  transition: width 3s linear 0s;
}

Less:

.test(@width:100px;@height:100px;) {
  width: @width;   //可以不需要执行体,只为了获得返回值
  @result: (@width + @height) / 2;
}

div {
  .test;   //call the mixin
  padding: @result;  //use the return value
}

生成CSS:

div {
  width: 100px;
  padding: 100px;
}

高级参数用法与 @rest 变量

.mixin (...) {        // 接受 0-N 个参数
.mixin () {           // 不接受任何参数
.mixin (@a: 1) {      // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) {    // 接受 1-N 个参数

//此外
.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
}

Mixin Guards(导引表达式/混合保护)

我们可以在mixin中设置条件;常用的条件运算符:>、>=、<、<=、=;我们设定的条件还可以使用IS函数:iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...


    //->LESS代码
    .mixin (@a) when (lightness(@a) >= 50%) {
      background-color: black;
    }

    .mixin (@a) when (lightness(@a) < 50%) {
      background-color: white;
    }

    .box1{
      .mixin(#ddd);
    }

    .box2{
      .mixin(#555);
    }

    //->编译为CSS的结果
    .box1 {
        background-color: black;
    }

    .box2 {
        background-color: white;
    }

when是在设置条件,除了像上面的写法外,我们还可以通过when设置多个条件,而且条件中可以使用is函数


    //->LESS代码:使用IS函数
    .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

    //->LESS代码:多条件,可以使用and或者逗号间隔
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... 

    //你可以使用关键词 and 在 guard 中加入额外的条件:
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    //或者,使用关键词 not 否定条件:
    .mixin (@b) when not (@b > 0) { ... }

我们还可以通过与&特性结合实现'if'类型的语句


    //->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色
    @my-option: true;
    & when (@my-option = true) {
      .box {
        color: white;
      }
    }

四,Loops(递归/循环)

在Less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard条件表达式,就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS

Less:

/*生成栅格系统*/
@media screen and (max-width: 768px){
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

生成CSS:

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }
  .column-sm-12 {  width: 100%;  }
}

五,Merge(兼并)

+代表以逗号分隔,+_代表多个之前以空格分隔

Less:

.mixin(){
  /*内阴影*/
  box-shadow+: inset 0 0 10px #555;
}
.scale(@num){
  transform+_: scale(@num);
}
div{
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 100px auto;
  .mixin;
  box-shadow+: 0 0 20px black;
  transform+_: translateX(100px);
  .scale(2);
}

生成CSS:

div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 100px auto;
  /*内阴影*/
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
  transform: translateX(100px) scale(2);
}

六,Parent Selectors

Less:

.box(){
  border-color: #f00;

  top {
    /*名称写死的后代选择*/
    width: 10px;
  }
  &:hover {
    background-color: #00f;
  }
  &.current {
    /*选择当前选择器并且class为current*/
    color: red;
  }
  &>top{
    /*名称写死的直接后代选择*/
    width: 11px;
  }
  &-top {
    /*根据选择器名称变化的直接选中*/
    background-color: #fff;
  }
  & &-top{
    /*根据选择器名称变化的后代选择*/
    width: 12px;
  }
  &>&-top{
    /*根据选择器名称变化的直接后代选择*/
    width: 13px;
  }
  &,&-top{
    /*根据选择器名称变化的并集选择*/
    height: 14px;
  }
  &-top+&-main{
    /*根据选择器名称变化的兄弟选择*/
    height: 15px;
  }
  &+&{
    /*根据选择器名称变化的兄弟选择*/
    height: 16px;
  }
}

nav {
  .box;
}

生成CSS:

nav {
  border-color: #f00;
}
nav top {
  width: 10px;
}
nav:hover {
  background-color: #00f;
}
nav.current {
  color: red;
}
nav > top {
  width: 11px;
}
nav-top {
  background-color: #fff;
}
nav nav-top {
  width: 12px;
}
nav > nav-top {
  width: 13px;
}
nav,
nav-top {
  height: 14px;
}
nav-top + nav-main {
  height: 15px;
}
nav+nav{
  height: 16px;
}

改变选择器顺序,下面的案例中,选择器.no-border-radius &会前置插入它的父选择器.header .menu,最后变成.no-border-radius .header .menu形式输出:

//->LESS代码
.header {
  .menu {
    border-radius: 5px;
    .parent & {
      /*增加权重?*/
      background-color: #f00;
    }
  }
}

//->输出的CSS
.header .menu {
  border-radius: 5px;
}
.parent .header .menu {
  /*增加权重?*/
  background-color: #f00;
}

七,Import Directives(导入指令)

从其他样式表中导入样式。

//->LESS代码
@import "public.less";  //默认把指定文件的less也编译
@import "header.less";  //默认把指定文件的less也编译

@import (reference) "public.less";  //设置仅导入指定文件的less但不编译

除了reference以外我们还可以配置一些其他的参数值:
inline:在输出中包含源文件但不加工它
less:将文件作为Less文件对象,无论是什么文件扩展名
css:将文件作为CSS文件对象,无论是什么文件扩展名
once:只包含文件一次(默认行为) multiple:包含文件多次

八,注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

九,内置函数

Less函数手册

优秀的CSS预处理----Less的更多相关文章

  1. CSS预处理器之Less详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS 预处理器 为什么要有 CSS 预处理器 CSS基本上是设计师的工 ...

  2. 分享15个优秀的 CSS 解决方案和工具

    CSS 代码是很难管理,尤其是在大型项目. 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素.冗余.膨胀和维护可以成为前端开发人员的一场噩梦.幸运的是我们有一些 CSS 工具来帮助开发 ...

  3. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  4. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  5. 你应该知道的9个优秀的CSS框架

    前端开发是一项非常繁琐的工作,你不仅需要拥有和别人不一样的审美观和设计观,而且需要了解诸如HTML.CSS.JavaScript等错综复杂的技术,因此选择一些优秀的CSS框架或许可以帮助你大大提高工作 ...

  6. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  7. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  8. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  9. CSS预处理语言

    CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...

随机推荐

  1. [日推荐] 『Streeter』极乐商店邀你一起来尬舞啊!-store.dreawer.com

    你听的舞蹈有哪些?Jazz?Poppin?Hiphop?现代舞?民族舞?... 今天推荐一款小程序『Streeter』,几乎包含所有舞蹈视频,偷偷学好了,邀请你来尬舞啊 Streeter 这个Logo ...

  2. Microsoft Azure Storage Exployer使用指南

    概述 Microsoft Azure Storage Exployer 是微软官方推荐的一款管理Azure Storage 客户端工具,客户使用完全免费.支持Windows.Mac和Linux.用户使 ...

  3. 线性代数-矩阵-【1】矩阵汇总 C和C++的实现

    矩阵的知识点之多足以写成一本线性代数. 在C++中,我们把矩阵封装成类.. 程序清单: Matrix.h//未完待续 #ifndef _MATRIX_H #define _MATRIX_H #incl ...

  4. 欠了好久的CRM帖子,双11来读。

    又一年双11了,觉得天猫双11越来越没特色了. 从折扣,音符旋律到红包,今年15年却找不出往年的热度,只是商家还是一样的急,备着活动目标计划,做着库存价格打标视觉设计这种苦逼的日子. 欠了好久的CRM ...

  5. QQ无法通过ISA2006&TMG2010代理收发图片问题解决

    近期公司有业务需求通过TMG访问QQ,但配置多次均无法通过QQ收发图片,文字输入正常. 目前已解决,供参考: 这个问题是SSL端口默认使用了443,但QQ的离线文件不使用这个端口.所以ISA会把QQ的 ...

  6. Ext:ComboBox实战

    var gsCombo = new Ext.form.ComboBox({ id:'combo', hiddenName:'value', fieldLabel:'下拉框', triggerActio ...

  7. Cognos报表调度与作业管理

    本文针对Cognos的报表调度和作业管理做案例分析.为了测试报表定时调度功能,本文将报表定时输出到指定的归档目录. 1. 测试环境 Cognos  V11.0 2. 设置档案文件根目录 Cognos报 ...

  8. 深度学习框架-caffe安装-Mac OSX 10.12

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...

  9. 日志log4j配置详情,日志log具体到你想不到

    一.Log4j简介Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局). 1.LoggersLoggers组件在此系统中被分为五个级别:DEBU ...

  10. 解决在linux环境下面不显示验证码的问题

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt235 解决在linux环境下面不显示验证码的问题1.tomcat      ...