css Less基础

维护css的弊端

CSS是一门非程序式语言,没有变量、函数、 SCOPE(作用域)等概念CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。不方便维护及扩展,不利于复用，没有很好的计算能力。非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CS代码项目。

less介绍

Less( Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预处理器。做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

它在CS的语法基础之上,引入了变量, Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。
less中文网址 Less: http://lesscss.cn/

常见的CSS预处理器:Sass、Less、 Stylus

Less是一门CSS预处理语言，它扩展了css的动态特性.

Less使用

首先新建一个后缀名为less的文件, 在这个文件里书写less语句

• less变量
• less编译
• less嵌套
• less运算

less变量

由于一些颜色经常被使用,可以赋值给变量

	@变量名:值;

变量名语法规范

以@开头
不能含有特殊字符
不能以数组开头
大小写敏感

less编译

本质上,Less包含套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件。

所以,我们需要把我们的less文件,编译生成为css文件,这样我们的htm页面才能使用。

编译less文件需要手动下载插件,下载后在写less文件的过程中,软件会自动生成编译后的css文件,用户仍需调用编译后的css文件而不是less文件.
案例:
编译前:

/*定义一个粉色变量*/
@color: pink;
@font14: 14px;
body {
  background-color: @color;
}
div {
  color: @color;
  font-size: @font14;
}
a {
  font-size: @font14;
}

编译后

/*定义一个粉色变量*/
body {
  background-color: #ffc0cb;
}
div {
  color: #ffc0cb;
  font-size: 14px;
}
a {
  font-size: 14px;
}

less嵌套

支持style的嵌套写法,在父元素里可以直接写子元素样式

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    a{
        color: red;
    }
}

如果遇见(交集伪类伪元素选择器)内层选择器的前面没有&符号,则它如果有&符号,它就被解析为父元素
案例:

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    a{
        color: red;
        &:hover {		//&表示不是a的后代
            color: blue;
        }
    }
}

less算数运算

颜色,变量都可以参加运算

运算符两边需要加空格

@border: 5px+5;
div {
  width: 200px - 10;
  height: 200 * 2px;
  border: @border solid red;
}

如果参与运算的两个数都有单位,以第一个数后的单位为准