less的学习

1.什么是less:css的预编译器

2.less中的两种注释

 //:这种注释不会被编译到css文件中去

/**/:这种注释会被编译到css文件中

3.less编译工具

Koala:国人开发全平台的less编译工具

Winless:windows     Codekit:Mac

4.less的正确使用

less通过link引入页面 

<link rel="stylesheet" href="" style=“less”>
将less.js的文件的引入放到css文件之后

5.变量

变量:用@开头,冒号定义,分号隔开

变量的定义和引用:@var:green    color:@var  //color字体颜色为绿色

   变量作为选择器和属性,以及url的时候都是@{变量名}:  @my:width     .@{my}{@{my}:150px} //这里面第一个@{my}是作为class为width的选择器,第二个@{my}是作为属性width,设置该容器宽度为150px; 

    当@url:“http://baidu.com”   background:url("@{url}/img.jpg"); //设置背景图是http://baidu.com/img.jpg

要注意:变量的声明可以在引用之后;

    当变量被定义多次,只取当前作用域最后一个;

 6.混合minin:混合将相同的定义提取出来,然后在需要使用的地方添加提取名,在编译的时候就会被编译到每一个引用的地方

1.普通混合

编译前

.fn{
            color:red;
        }
        .tab1{
            .fn
        }
        .tab2{
            .fn
        }
View Code

编译后

.fn{
            color:red;
        }
        .tab1{
            color:red;
        }
        .tab2{
            color:red;
        }
View Code

2.不带输出的混合:就是.fn不会被编译到css中

 .fn(){
            color:red;
        }
        .tab1{
            .fn()
        }
        .tab2{
            .fn()
        }
View Code

其实就是给定义的类名后面加小括号

3.带参数的混合

.fn(@color){
            color:@color;
        }
        .tab1{
            .fn(red)
        }
        .tab2{
            .fn(green)
        }
View Code

4.带参数且有默认值的混合

.fn(@color:pink){
            color:@color;
        }
        .tab1{
            .fn(red)
        }
        .tab2{
            .fn()//此处会获取pink值
        }
View Code

5.带选择器的混合

编译前:

  .fn(){
           &:hover{
                color: red;
            }
        }
        .tab1{
             .fn()
        }
View Code

编译后:

  .tab1:hover{
            color: red;
        }
View Code

 6.多个参数的混合

.fn(@my;@my2:xxx)

注意.fn(1,2;)://@my值为1,2;@my2为xxx 分号的作用

当有多个参数,如果参数都是以逗号分隔,那么会依次赋给参数;如果既有逗号又有分号,则会将分号之前的逗号分隔的一系列值作为一个整体赋给一个参数。

7.当有多个相同命名的参数

8.混合中的命名参数:可以通过混合的命名参数赋值,而不一定要通过位置来赋值;

9.arguments

编译前:

 .fn(@1:solid,@2:red){
           border:1px arguments;
        }
        div{
            .fn()
        }
View Code

编译后:

 div{
            border:1px solid red;
        }
View Code

注意:arguments的顺序很重要,当一个值取他的默认值,他的变量依然要写,不能用“,空,”形式赋参数;

10.匹配模式

.border(all,@w:5px){
           border-radius: @w;
       }
       .border(top,@w:5px){
           border-top-left-radius: @w;
       }
        div{
            .border(all);
        }
View Code

这边调用的是all的方法

11.混合中的返回值

.average(@x,@y){
        @average(@x+@y)
       }
        div{
            .average(10,15);
            padding-left: @average;
        }
View Code

 7.嵌套

&运算的符

8.函数

9.命名空间

10.作用域:

  现在局部查找变量或混合,然后从父元素查找。。

11.引入

@import "文件路径"  //直接引入会把引入文件的样式原样输出到该文件中

参数:

@import (reference) "文件路径"   //会把引入文件的样式原样未用到的样式去除

inline //引入文件不可以进行加工,即不可在该文件中引用其他文件的变量等,它会将所有引入的文件都输出到编译文件中。

once //默认值 原样输出一次,并加工输出一次

less //无论什么文件,都以less进行操作

css //无论什么文件,都作为css文件,所以不可以操作

multiple //允许引入多次,引入多少次就会输出多少个相同样式

12.关键字

foo()!important  //会给函数里面所有的样式添加!important权重

 13.条件表达式

比较运算:

.mixin(@)when(lightness(@)>50%) //255/2

.mixin(@){color:@}

类型检查函数:

isColor/isNumber/isurl/iskeyword/isString..

单位检查函数:

ispixel/ispercentage/isem/isunit

14.循环

调用自身

15.合并属性

+合并以空格划分;

+_合并以逗号划分

 16.函数库

其他函数:

1.color()

2.convert(1s,ms)//从一个单位转化到另一个单位

长度单位:m、cm、mm、px,pc,pt,in;

时间单位:s,ms;

角度单位:rad(弧度),deg(角度),grad(梯度),turn(元);

3.data-uri()//koala不支持,要用winless  转为base64路径

4.default()//边界值,当其他条件不成立就使用这个函数

5.unit() //移除或者改变属性值的单位

字符串函数:

1.escape(“”)//将输入的url特殊字符进行编码转义

转义的字符:

不转义的字符:不罗列自行百度

2.e()/可用~“值”代替 //css转义,避免编译

3.%()//格式化一个字符串

%(“%a%a”,"microsoft","yahei")//占位符 =》(“"microsoft""yahei"”)

%(“%A%a”,"microsoft","yahei")//占位符 转义=》(“%22microsoft%22"yahei"”)

%d    %D同上

%(“%S %s ”,red,"yahei")//占位符除颜色值外均可 转义=》(“undefind yahei"”)  (可以清除转义后多的引号)

4.replace(“A,B,C..”,"A","B")//第一个参数为原来的文本,第二个是找到替换元素,第三个参数是替换成什么

长度相关函数:

1.length() //返回集合中值的条数

2.extract(@list,1)//返回集合中指定的索引的值

数学函数:

1.ceil()

2.floor()

3.percentage() //将浮点数转化为百分比 *100

4.round()

5.sqrt()//保持原有单位

6.abs()//绝对值,保持原有单位

7.sin() asin() cos() acos()  tan() atan()   //没有单位默认rad

8.pi() //返回π=》3.1415926

9.pow()// 乘方运算

10.mod(3px,2)//1px

11.max() min()

类型函数:

1.isnumber() isString iscolor iskeyword(关键字:任意字符) isurl ispixel isem ispercentage isunit(@a,em)(如果一个值是带指定单位的数字)

颜色值定义函数:

1.rgb()//通过十进制红绿蓝三种颜色创建不透明的颜色对象 0-255或者0%-100%

2.rgba()

3.argb()//创建十六进制#AARRGGBB  AE.NET 安卓里面的颜色

4.hsl()   //通过色相、饱和度、亮度创建不透明的颜色对象

5.hlsa() //色相、亮度、饱和度和透明度

6.hsv()//色相、饱和度、色调

7.hsva()//色相、饱和度、色调和透明度

颜色值通道提取函数:

1.hue() //提取hsl中的色相值

2.saturation() //提取hsl中的饱和度

3.lightness()  //提取hsl中的亮度

4.hsvhue() //提取hsv中的色相值

5.hsvsaturation() //提取hsv中的饱和度

6.hsvvalue() //提取hsv中的色调

7.red() green() blue()

8.alpha() //颜色对象的透明值

9.luma() //颜色对象的luma(亮度的百分比表示法)

10.luminance()//没有伽玛校正的亮度值

颜色值运算函数:

1.saturate()//增加饱和度   desaturate()

2.lighten()//增加亮度  darken()

3.fadein() //降低颜色的透明度  fadeout()

4.fade()//给颜色设置一定透明度

5.spin() //任意方向旋转色相角度

6.mix()//根据比例混合两种颜色,包括不透明度

7.greyscale()//完全移除颜色的饱和度和desaturate(@color,100%)效果相同

8.contrast()//选择两种颜色比较,得出那种对比度大选择对比度大的

颜色混合函数:

1.multiply()//分别将rgb三个值相乘再除以255,输出一个更深的颜色“变暗,正片叠底”

2.screen()//得到更亮的颜色,“变亮,滤色”

3.overlay()//深的更深,浅的更浅 注意:输出结果有第一个参数决定

4.softlight()//和overlay效果相当,但当是纯黑或纯白不会输出纯黑和纯白,相当于“柔光”

5.hardlight()//和overlay相当,但是是有第二个参数决定颜色的亮度和黑度“强光,点光,线性光,亮光”

6.difference()//第一个颜色值减去第二个(rgb分别减)得到更深的颜色。“差值,排除”

7.exclusion()//和6效果相当只是差值更小

8.average()//rgb取平均值

9.negation()//与6效果相反,输出更亮的值(效果相反不代表做加法)


原文地址:https://www.cnblogs.com/QIQIZAIXIAN/p/7440667.html