css3变量 和 less

less 简介

less是一门预处理语言，它是一个css的增强版，通过less可以编写更少的代码实现更大的样式
在less中添加了许多的新特性：像对变量的支持、对mixin的支持等等
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器是无法直接执行less代码的，要执行必须要将less转换为css，然后再由浏览器执行

css3 变量

.box1 {
     100px;
    height: 200px;
    background-color: #bfa;
}

效果：

而css3中是可以支持变量的，还有一些其他的函数
诸如:

• var(); 使用变量
  而定义变量的规制是：--变量名: 值;
• calc(); 计算函数

用变量和函数来实习上面的代码

html {
    --color: #bfa;
    --length: 100px;
}

.box1 {
     var(--length);
    height: calc(var(--length)*2);
    background-color: var(--color);
}

less 语法

注释

• // 双斜杠，单行注释，注释的内容不会被解析到css中，常用

• /**/ css中的注释，内容会被注释到css中

// less中的单行注释，注释中的内容不会被解析到css中

/*
	css中的注释，内容会被解析到css文件中
*/

变量

在变量中我们可以存储任意一个值
在我们需要时，可以任意的修改变量值

声明定义变量语法：@变量名: 变量值;

使用变量：

• 如果是直接使用则以 @变量名 的形式使用即可
• 如果是间接使用，例如作为变量名、url一部分、属性名等等，规则就是 @{变量名}
• 当变量发生重名时，会使用相同层级区块的变量
  如果在同一层级 区块内，则会优先使用最近的变量，就近原则
• 在同一区域内，若要使用相同的属性值，可以使用 $属性名，eg： 100px; height: $width;
• 变量的值也可以是一个变量

@a:200px;
@b:#bfa;
@c:box6;

.box5{
    //使用变量是，如果是直接使用则以 @变量名 的形式使用即可
     @a;
    color:@b;
}

//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
     @a;
    background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:115px;
     @d;
    height: @e;
}

//可以在变量声明前就使用变量
@e:335px;

div{
     300px;
    // 新版的语法
    height: $width;
}

$

$ 就表示外层的父元素
.box1{ $:hover{...} }

子元素选择器 > ，.box1{ >.box3{...} }，当然像 + ~ , 等都是可以这样用的

() 混合函数

1. () 可以直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制，mixin 混合
   .p3{ .p1(); }

2. 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
   .p4(){ 100px; } .p5{ .p4; } 类p4在css中是不显示的，而p5是有.p4里内容的

3. 混合函数 在混合函数中可以直接设置变量

   // 定义混合函数，可以用形参和默认值
   .test(@w:100px,@h:200px,@bg-color:red){
        @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){
     0px;
    height: 0px;
    overflow: hidden; 
}

// 可以选择用谁，可以理解为重载

.triangle(L,@w,@c){
    border- @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent ;
}

.triangle(R,@w,@c){
    border- @w;
    border-style:dashed  dashed dashed solid;
    border-color:transparent  transparent transparent @c;
}

.triangle(T,@w,@c){
    border- @w;
    border-style:dashed  dashed  solid dashed;
    border-color:transparent  transparent @c transparent ;
}

.triangle(B,@w,@c){
    border- @w;
    border-style:solid dashed  dashed dashed;
    border-color:@c transparent  transparent transparent ;
}

:extend()继承

:extend() 函数，对当前的选择器扩展指定选择器的样式（选择器分组）
功能和混合函数差不多，但性能更好

.p1 {
	 100px;
}
.p1:hover {
    background-color: #bfc;
}

.p2 {
    // 继承函数里还可以加 all 关键字，可以继承所有的状态
    &:extend(.p1 all);
    height: 100px;
}

编译后

.p1,
.p2 {
   100px;
}
.p1:hover,
.p2:hover {
  background-color: #bfc;
}
.p2 {
  height: 100px;
}

运算 和 @import

在less中所有的数值都可以直接进行运算 + - * /
计算的一方带有单位也可以

100px * 2; height: 100px + 100px;

避免编译

有些情况我们不想让less编译一些函数，就可以用 ~"内容" 来原封不动

.p {
     ~"calc(100px*2)";
}

编译后

.p {
     calc(100px*2);
}

其他的一些函数：

1. average()，计算颜色的平均值
   color: average(red,blue);
2. darken()，加深颜色
   darken(#bfa,50%);

@import 导包

@import 导包，用来将其他的less引入到当前的less

@import "syntax.less";