css3变量 和 less
less 简介
less是一门预处理语言，它是一个css的增强版，通过less可以编写更少的代码实现更大的样式
在less中添加了许多的新特性：像对变量的支持、对mixin的支持等等
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器是无法直接执行less代码的，要执行必须要将less转换为css，然后再由浏览器执行
css3 变量
.box1 {
width: 100px;
height: 200px;
background-color: #bfa;
}
效果：
而css3中是可以支持变量的，还有一些其他的函数
诸如:
- var(); 使用变量
而定义变量的规制是：--变量名: 值; - calc(); 计算函数
用变量和函数来实习上面的代码
html {
--color: #bfa;
--length: 100px;
}
.box1 {
width: var(--length);
height: calc(var(--length)*2);
background-color: var(--color);
}
less 语法
注释
-
// 双斜杠，单行注释，注释的内容不会被解析到css中，常用
-
/**/ css中的注释，内容会被注释到css中
// less中的单行注释，注释中的内容不会被解析到css中
/*
css中的注释，内容会被解析到css文件中
*/
变量
在变量中我们可以存储任意一个值
在我们需要时，可以任意的修改变量值
声明定义变量语法：@变量名: 变量值;
使用变量：
- 如果是直接使用则以
@变量名的形式使用即可 - 如果是间接使用，例如作为变量名、url一部分、属性名等等，规则就是
@{变量名} - 当变量发生重名时，会使用相同层级区块的变量
如果在同一层级 区块内，则会优先使用最近的变量，就近原则 - 在同一区域内，若要使用相同的属性值，可以使用
$属性名，eg：width: 100px; height: $width; - 变量的值也可以是一个变量
@a:200px;
@b:#bfa;
@c:box6;
.box5{
//使用变量是，如果是直接使用则以 @变量名 的形式使用即可
width: @a;
color:@b;
}
//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
width: @a;
background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
div{
// 变量发生重名时，会优先使用比较近的变量
@d:115px;
width: @d;
height: @e;
}
//可以在变量声明前就使用变量
@e:335px;
div{
width: 300px;
// 新版的语法
height: $width;
}
$
$ 就表示外层的父元素
.box1{ $:hover{...} }
子元素选择器 > ，.box1{ >.box3{...} }，当然像 + ~ , 等都是可以这样用的
() 混合函数
-
() 可以直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制，mixin 混合
.p3{ .p1(); } -
使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){ width:100px; } .p5{ .p4; }类p4在css中是不显示的，而p5是有.p4里内容的 -
混合函数 在混合函数中可以直接设置变量
// 定义混合函数，可以用形参和默认值 .test(@w:100px,@h:200px,@bg-color:red){ width: @w; height: @h; border: 1px solid @bg-color; } div{ // 调用混合函数，按顺序传递参数 // .test(200px,300px,#bfa); // 按名传递 // .test(@bg-color:red, @h:100px, @w:300px); .test(300px); }
匹配模式
.triangle(@_,@wwww,@ccccc){
width: 0px;
height: 0px;
overflow: hidden;
}
// 可以选择用谁，可以理解为重载
.triangle(L,@w,@c){
border-width: @w;
border-style:dashed solid dashed dashed;
border-color:transparent @c transparent transparent ;
}
.triangle(R,@w,@c){
border-width: @w;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent @c;
}
.triangle(T,@w,@c){
border-width: @w;
border-style:dashed dashed solid dashed;
border-color:transparent transparent @c transparent ;
}
.triangle(B,@w,@c){
border-width: @w;
border-style:solid dashed dashed dashed;
border-color:@c transparent transparent transparent ;
}
:extend()继承
:extend() 函数，对当前的选择器扩展指定选择器的样式（选择器分组）
功能和混合函数差不多，但性能更好
.p1 {
width: 100px;
}
.p1:hover {
background-color: #bfc;
}
.p2 {
// 继承函数里还可以加 all 关键字，可以继承所有的状态
&:extend(.p1 all);
height: 100px;
}
编译后
.p1,
.p2 {
width: 100px;
}
.p1:hover,
.p2:hover {
background-color: #bfc;
}
.p2 {
height: 100px;
}
运算 和 @import
在less中所有的数值都可以直接进行运算 + - * /
计算的一方带有单位也可以
width: 100px * 2; height: 100px + 100px;
避免编译
有些情况我们不想让less编译一些函数，就可以用 ~"内容" 来原封不动
.p {
width: ~"calc(100px*2)";
}
编译后
.p {
width: calc(100px*2);
}
其他的一些函数：
- average()，计算颜色的平均值
color: average(red,blue); - darken()，加深颜色
darken(#bfa,50%);
@import 导包
@import 导包，用来将其他的less引入到当前的less
@import "syntax.less";
