less的学习-白红宇

less的学习

阅读量：5234 次

发布时间：2019-06-14

本文共 5267 字，大约阅读时间需要 17 分钟。

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

2.less中的两种注释

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

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

3.less编译工具

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

Winless:windows Codekit:Mac

4.less的正确使用

less通过link引入页面


     将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

你可能感兴趣的文章

Leetcode: Unique Binary Search Trees II

查看>>

C++ FFLIB 之FFDB：使用 Mysql&Sqlite 实现CRUD

PHPStorm2017设置字体与设置浏览器访问

查看>>

SQL查询总结 - wanglei

查看>>

安装cocoa pods时出现Operation not permitted - /usr/bin/xcodeproj的问题

查看>>

GIT笔记：将项目发布到码云

查看>>

JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

查看>>

JavaScript 鸭子模型

查看>>

SQL Server 如何查询表定义的列和索引信息