less预编译语言使用总结
以前就使用过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预编译语言使用总结的更多相关文章
- 【前端开发】优化代码之减少引入,css预编译语言的优点,stylus的使用
前言:我必须得承认在最最最开始的时候,我对于css的预编译是非常不以为然的,这是错误的.一般在页面编写过程中,我会将需要reset的css放在reset.css中,讲会需要重复用到的放置到public ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- LESS SCSS 预编译语言
前 言 JRedu LESS 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. LESS 为 Web 开发者带来了福音,它在 ...
- CSS预编译语言-LESS
LESS的作用 CSS层叠样式表,它是标记语言,不是编程语言:所有的预编译CSS语言(less/sass…)都是赋予了CSS的面向对象思想 LESS的编译 LESS叫做预编译CSS:写好的LESS代码 ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- css预编译语言sass——mixin的使用
以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 76 ...
- vue项目配置less预编译语言
当所有东西都 准备好之后 : 第一步: 安装less依赖,npm install less less-loader --save 第二步:找到webpack配置文件webpack.base.conf. ...
- CSS预编译器配置-------LESS Sass Stylus webstorm
预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
随机推荐
- 微信小程序 事件
事件详解 事件分类 事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列 ...
- python入门(二):数据类型和结构
Python3 中有六个标准的数据类型:tips:用type()函数或者是isinstance(x,int)来判断数据类型,然后for i in 来遍历集合1.Number(数字支持 int.floa ...
- django组件整合
session Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie Django默认支持Session ...
- fis3解决web网站缓存问题
为什么使用FIS3 项目上线一段时间后如果更新JS或CSS文件,而客户端已经对该文件缓存过了,那就有可能会无法及时更新而继续采用旧的JS或CSS文件,无法达到想要的效果. 处理类似情况最有效的解决方案 ...
- [LintCode] 两个排序数组的中位数
class Solution { public: /** * @param A: An integer array. * @param B: An integer array. * @return: ...
- sql---如何把sql查询出来的结果当做另一个sql的条件查询,1、语句2、with as
'; -- table2 的 name 作为 table1的条件 select * from table1 where name in (select name from table2) --如果有多 ...
- Sublime text找不到.so文件
在使用Sublime text打开一个android项目的时候,你会发现找不到.so文件. 解决方法: 点击Sublime text的Preferences,然后点击Settings,这时候出现设置的 ...
- AVCaptureInput和AVCaptureOutput子类
1.AVCaptureInput AVCaptureDeviceInput:用于从AVCaptureDevice对象捕获数据. AVCaptureScreenInput:从macOS屏幕上录制的一种捕 ...
- php 正则表达式二.基本语法
官方手册正则语法:http://php.net/manual/zh/reference.pcre.pattern.syntax.php 正则表达式在线测试工具:regexpal 正则表达式的匹配先后顺 ...
- hdu 3047 Zjnu Stadium 并查集高级应用
Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...