以前就使用过less和sass,其实很简单,就是很长时间不用,忘记语法了,现在来总结一片使用技巧

一、注释

less的注释不会被编译到css文件中,所以提倡多使用less中的注释:/**/

二、变量

less语言中也有自己的变量,定义变量@变量名:变量值,使用该变量时,直接@变量名,就是该变量值

@width: 300px;

body { background-color: white; }

.div1 { width: @width; }

三、混合(mixin)

混合可以将一个定义好的class A轻松引入到另一个class B中,从而简单实现class B继承class A中所有属性,还可以带参数地调用。

例如定义一个样式类.border,直接用到另一个样式类.box中,另一个样式类就很方便的具有了这个类的样式,很好的实现了css代码的复用;

再例如有一个.box2,它和.box有一些属性相同,那就直接继承.box再做特定的修改即可:

.border{

  border:1px solid black;

}

.box{

  .border;

}

.box2{

  .box;

  margin:20px;

}

混合(mixin):可带参数,以实现传入变量参数来用一个样式类生成各种不同的样式:

.border2(@border_width){   //定义变量参数

  border:@border_width solid black;

}

.box3{

  .border2(5px);//参数位置传入变量以控制不同的样式

}

.box4{

  .border2(10px);

}

混合(mixin)参数可带默认值(多个参数之间使用逗号隔开)

.border3(@border_width2:5px){

  border:@border_width2 solid black;

}

.box5{

.border3();

}

一些常见的兼容性写法就可以用混合封装起来进行简化:

.border_radius(@border_radius:2px){

border-radius:@border_radius;

-moz-border-radius:@border_radius;

}

四、模式匹配

有些情况想根据传入的参数来改变混合的默认呈现,比如:

下面通过less模式匹配,定义不同央视模式的三角(top模式和bottom模式),但无论哪种模式,@_(放在模式参数位置)定义的样式所有模式都公有

.triangle(@_,@w,@c){

  width:0;

  height:0;

  overflow:hidden;

}

.triangle(top,@w,@c){

  border-width:@w;

  border-color:transparent transparent @c transparent;

  borser-style:dashed dashed solid dashed;

}

.triangle(bottom,@w,@c){

  border-width:@w;

  border-color:transparent transparent @c transparent;

  borser-style:solid dashed dashed dashed;

}

.triangle2{

  .trangle(bottom,20px,red);

}

.triangle3{

  .trangle(top,30px,green);

}

五、运算(对变量进行加减乘除等)

@box_width:100px;

.box6{

  width:(@box_width-10)*2;

}

六、嵌套

可以在一个选择器中直接潜逃另一个选择器来实现继承,这样很大程度减少代码量,并且代码看起来结构更清晰:

.list1{

  width:600px;

  height:600px;

  li{//相当于在外边写.list1 li{}

    height:20px;

    a{

      float:left;

      &:hover{   //&代表上一层选择器,所以这样写相当于 .list1 a:hove{}

        color:red;

      }

    }

  }

}

七、@arguments

@arguments包含了所有传递进来的参数,如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow(@x:0;@y:0,@blur:1px,color:#000){

  box-shadow:@arguments;   //相当于()参数里的值放到了这

  -moz-box-shadow:@auguments;

  -webkit-box-shadow:@arguments;

}

.box-shaow(2px,5px);

八、避免编译

有时候需要输出一些不正确的css语法或者使用一些less不认识的专有语法

//要输出这样的值我们可以在字符串前加一个~

.class1{

  filer:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

完整的Less中文文档: 
http://www.bootcss.com/p/lesscss/

less预编译语言使用总结的更多相关文章

  1. 【前端开发】优化代码之减少引入,css预编译语言的优点,stylus的使用

    前言:我必须得承认在最最最开始的时候,我对于css的预编译是非常不以为然的,这是错误的.一般在页面编写过程中,我会将需要reset的css放在reset.css中,讲会需要重复用到的放置到public ...

  2. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  3. LESS SCSS 预编译语言

      前  言 JRedu LESS  是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. LESS 为 Web 开发者带来了福音,它在 ...

  4. CSS预编译语言-LESS

    LESS的作用 CSS层叠样式表,它是标记语言,不是编程语言:所有的预编译CSS语言(less/sass…)都是赋予了CSS的面向对象思想 LESS的编译 LESS叫做预编译CSS:写好的LESS代码 ...

  5. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  6. css预编译语言sass——mixin的使用

    以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 76 ...

  7. vue项目配置less预编译语言

    当所有东西都 准备好之后 : 第一步: 安装less依赖,npm install less less-loader --save 第二步:找到webpack配置文件webpack.base.conf. ...

  8. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

  9. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

随机推荐

  1. 微信小程序 事件

    事件详解 事件分类 事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列 ...

  2. python入门(二):数据类型和结构

    Python3 中有六个标准的数据类型:tips:用type()函数或者是isinstance(x,int)来判断数据类型,然后for i in 来遍历集合1.Number(数字支持 int.floa ...

  3. django组件整合

    session Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie Django默认支持Session ...

  4. fis3解决web网站缓存问题

    为什么使用FIS3 项目上线一段时间后如果更新JS或CSS文件,而客户端已经对该文件缓存过了,那就有可能会无法及时更新而继续采用旧的JS或CSS文件,无法达到想要的效果. 处理类似情况最有效的解决方案 ...

  5. [LintCode] 两个排序数组的中位数

    class Solution { public: /** * @param A: An integer array. * @param B: An integer array. * @return: ...

  6. sql---如何把sql查询出来的结果当做另一个sql的条件查询,1、语句2、with as

    '; -- table2 的 name 作为 table1的条件 select * from table1 where name in (select name from table2) --如果有多 ...

  7. Sublime text找不到.so文件

    在使用Sublime text打开一个android项目的时候,你会发现找不到.so文件. 解决方法: 点击Sublime text的Preferences,然后点击Settings,这时候出现设置的 ...

  8. AVCaptureInput和AVCaptureOutput子类

    1.AVCaptureInput AVCaptureDeviceInput:用于从AVCaptureDevice对象捕获数据. AVCaptureScreenInput:从macOS屏幕上录制的一种捕 ...

  9. php 正则表达式二.基本语法

    官方手册正则语法:http://php.net/manual/zh/reference.pcre.pattern.syntax.php 正则表达式在线测试工具:regexpal 正则表达式的匹配先后顺 ...

  10. hdu 3047 Zjnu Stadium 并查集高级应用

    Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...