css预处理器 lass 的基础语法
begin enjoy👇

less技术

1.less简介

  • less是将代码语言中的一些编程理念引入到css语法中来,以提升css代码的灵活性、可维护性。

  • less技术包含了变量,函数,运算,甚至于语句,能够实现简单的逻辑判断。

  • less代码本身并不能被浏览器所识别并使用,而最终还是需要将less代码转换为css代码后才能使用,因此,less代码只是过渡代码,最终是为了生成css代码。

  • less官网更多资料可查询:http://lesscss.cn/

2.less引擎

less文件通过引入到页面中并指定rel类型为“stylesheet/less”。而所谓的“引擎”是用来将less语法转化成 css代码,这就如同其他模板语法中的模板引擎一样。可用的工具有:koala,node.js,grunt,gulp,webpack等。

除此以外 ,less官方也提供了编译的引擎“less.js” 可先将引擎文件下载 然后引入页面。接下来 通过less.watch()来实时监视less文件的效果:

事实上less.js引擎的编译过程是发送Ajax请求less文件的内容,然后解析其中的less语法 并转化成css代码。编译好的css代码 会以style标签的方式 插入到页面less文件的后面。

less.js引擎每隔一定的时间(大约500ms)发送Ajax请求less文件 以实时更新页面的样式:

3.less起步

1) 引入文件

1)less文件必须在less.js引擎之前引入 且指定rel为stylesheet/less

2)less文件必须在页面中的头部中引入才行,否则无效

3)为确保能正常获取到less文件内容,尽量将Ajax以同源形式请求

2) 配置选项

在less.js引擎加载之前,通过全局的less对象 设置以下less编译的各个配置项:

<script>
    less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>

3) 使用注释

less语法的注释同css注释一样,有单行注释“//注释内容”和多行注释“/注释内容/”。但只有多行注释 才会被编译到css代码中。单行注释在编译时会被忽略。

4) import

less支持@import的方式导入外部的样式文件(less或者css文件。文件路径参照引入的页面设置。但导入的css文件不被编译处理,只是作为css原本的导入语法出现。

less语法

4.定义变量

使用“@”声明变量,例如@clr。变量值遵循css语法规则使用“:”赋值。接下来在选择器中 通过变量名来引入一个值。

@clr : red;
body {
    background : @clr;
}

5) 变量“预加载”

less语法中变量编译时 会产生类似于js中函数那样的“预加载”现象,即变量名和值都会声明提升。

6) 变量作用域链

less编译结果来看,变量的作用域同js语法中“块级作用域链”很相似。它是以选择器路径中为作用域链(例如:div>main>body),路径中的每个节点都有自己的作用域。当某个节点需要一个变量值时 它会以当前位置为起点 沿着路径查找,如果有定义的变量则使用 ,否则报错!报错时 页面输出错误提示以及控制台打印一个包含了错误信息的对象。

7) 变量的使用

上面的例子着重于在CSS规则中使用变量来控制值,但是它们也可以在其他地方使用,比如选择器名称、属性名称、url和@import语句。此时在引用时变量时 需要加上{}

@my-selector : banner;
.@{my-selector} {
    width : 100%;
}//编译结果:
.banner {
    width : 100%;
}
@url : “../images/dot.png”
    h4 {
        background : url(@{url}) left center no-repeat;
}

5.嵌套样式

对于css中的层次选择器(路径选择器),在less语法中 可以使用嵌套的结构来定义,但需要注意此时变量的作用域问题。

注意,不同于css中“/”有特殊的语义,less中“+ - * /”都可以用。

6.混合样式

混合样式(mixin),是类似于编程中函数的一种语法。它是将已经定义好的一段类样式 应用到多个选择器,从而实现代码的重用。这里类名充当函数名,调用时只通过类名引用。类名有实有虚,既可以指向一个选择器 也可以是单一的名字 混入的方式有两种:

8) 单纯样式混入

9) 样式函数混入

样式函数的形式非常类似于编程函数,除了作为函数名的类外 还可以定义参数列表。参数列表以逗号分隔,默认值放在最后位置。

最终生成的css文件中,不会包含函数样式。

7.模式匹配

混入还可以通过模式匹配,类似于函数的重载:函数名相同 但参数类型和数量不同
代码形式如下所示:

//样式函数1:
.mixin(value1, @para){ ... }   //其中"value1"为固定值(字面值)
//样式函数2:
.mixin(value2, @para){ ... }   //其中"value1"为固定值(字面值)
//以下为两个样式:
.box1{ 
    .mixin(value1, #ccc); 
}   //能匹配第1项,就会应用第1个样式函数中的样式
.box2{
    .mixin(value2, #ddd); 
}   //能匹配第2项,就会应用第2个样式函数中的样式

这种方式可以实现类似编程语言中的switch判断的效果。

$v1 = “男”;
switch($v1){
    case “男”:
    。。。。
    break;
    case “女”:
    。。。。
    break;
    default:
    。。。
}

8.运算符与表达式

.mix1(@p1; @p2) when(@p1 >= XXX){ ... } //一个判断条件

.mix2(@p1; @p2) when(@p1 > XX1), (@p2 < XX2){...}//两个满足一个就行

.minx3(@p1; @p2) when(@p1>@p2){ ... } //可以直接对参数进行比较

逻辑与and:.mix4(@a) when(isnumber(@a) and @a>18 and @a<60){...}

逻辑非not:.mix5(@a)when not(@a>18){ ... }

9.内置函数

isnumber(),isstring() , iscolor(),iskeyword(),isurl(), ispixel(), ispercentage(), isem(), lightness()等等。


posted @ Zycin (非转载 来自个人学习资料整理)