关于CSS预处理器less的使用（未完待续）

简单明了，直接上教程：

下面我们先大体了解些我接下来讲的less的功能特性：

属性
嵌套
混合方法
继承
导入
函数
其他

1、属性

（1）、值变量

@dividerColor:#000;div{background: @dividerColor;
}

（2）、选择器变量

@footer: .footer;@{footer}{}

（3）、属性变量

@color:color;div{@{color}:#000;
}

（4）、url 变量

 @images:'../images' ;div{background:url('@{images}/img.png');
}

(5)、声明变量

结构: @name: { 属性: 值 ;};
使用：@name();

  @background: {background:red;};#main{@background();
}

(6)、变量运算

@width:300px;
@color:#222;
div{width:@width-20;height:@width-20*5;margin:(@width-20)*5;color:@color*2;background-color:@color + #111;
}

(7) 、变量作用域

就近原则

 @var: @a;@a: 100%;#wrap {width: @var;@a: 9%;}

(8) 、用变量去定义变量

 @fnord:  "I am fnord.";@var:    "fnord";#wrap::after{content: @@var; //将@var替换为其值 content:@fnord;}

嵌套

（1）、& 的妙用

& ：代表的上一层选择器的名字，此例便是header。

.big{.small{&:after{color:red;
}&_small{color:green;}
}
}

(2) 媒体查询

div{@media scress{@media (max-width:768px){width:100px;
}
@media tv{width:200px;
}
}}

唯一的缺点就是每一个元素都会编译出自己 @media 声明，并不会合并。

混合方法

(1)、无参数方法

.card { background: #f6f6f6;-webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);box-shadow: 0 1px 2px rgba(151, 151, 151, .58);}
#wrap{.card();}

(2)、默认参数方法

 .border(@a:10px,@b:50px,@c:30px,@color:#000){border:solid 1px @color;box-shadow: @arguments;//指代的是 全部参数}#main{.border(0px,5px,30px,red);//必须带着单位}

（3）、方法中的匹配模式

#main{.csser(left,50px,#999);
}
.csser(top，@width:20px,@color:#000){border-color:transparent transparent @color  transparent;
}

(4) 、方法的命名空间

      #card(){background: #723232;.d(@w:300px){width: @w;#a(@h:300px){height: @h;//可以使用上一层传进来的方法width: @w;}}}#wrap{#card > .d > #a(100px); // 父元素不能加 括号}#main{#card .d();}#con{//不得单独使用命名空间的方法//.d() 如果前面没有引入命名空间 #card ，将会报错#card; // 等价于 #card();.d(20px); //必须先引入 #card}

在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。
在引入命令空间时，如使用 > 选择器，父元素不能加括号。
不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。
子方法可以使用上一层传进来的方法
(5)、方法的条件筛选

    #card{// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行.border(@width,@color,@style) when (@width>100px) and(@color=#999){border:@style @color @width;}// not 运算符，相当于 非运算 !，条件为 不符合才会执行.background(@color) when not (@color>=#222){background:@color;}// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行.font(@size:20px) when (@size>50px) , (@size<100px){font-size: @size;}}#main{#card>.border(200px,#999,solid);#card .background(#111);#card > .font(40px);}

比较运算有： > >= = =< <。
= 代表的是等于
除去关键字 true 以外的值都被视为 false：

(6)、数量不定的参数

     .boxShadow(...){box-shadow: @arguments;}.textShadow(@a,...){text-shadow: @arguments;}#main{.boxShadow(1px,4px,30px,red);.textShadow(1px,4px,30px,red);}

(7)、方法使用important！

.border{border: solid 1px red;margin: 50px;}#main{.border() !important;}

关于CSS预处理器less的使用（未完待续）相关推荐

css预处理器——Less大全（看完不会切刁）
LessLessLess 前言 1. 历史发展(文章看起来正规一些,复制的) 2. Less 引入 3. Less 功能介绍 3.1 变量 (都需要+ @声明) 值变量选择器变量属性变量 url变 ...
单张图片上传预览【超简洁，未完待续】
http://www.cnblogs.com/ordinaryk/p/6277451.html 1.单张图片上传之前前端预览 <!DOCTYPE html PUBLIC "-//W3C ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
CSS预处理器sass和less
文章目录 CSS预处理器什么是CSS预处理器 Sass和LESS背景介绍 Sass背景介绍 LESS的背景介绍 Sass 安装Sass 下载Ruby安装文件安装Ruby 安装Sass 编译Sass ...
css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
初识css预处理器：Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
使用CSS预处理器Less
前天写了一篇文章,关于如何使用Harp来加快人的开发效率,在Mac系统和Linux系统上测试是没有问题的,但没有在Windows上测试,使用Windows的刚入门的前端工程师,安装Harp失败后,不知 ...
再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...

关于CSS预处理器less的使用（未完待续）

1、属性

嵌套

混合方法

关于CSS预处理器less的使用（未完待续）相关推荐

最新文章

热门文章