css Less基础

CSS是一种无变量、函数、无变量的非程序语言 SCOPE(功能域)等概念CSS需要写大量看似不合逻辑的代码，CSS冗余度比较高。维护和扩展不方便，不利于重用，计算能力不好。对于非前端开发工程师来说，由于缺乏CSS编写经验，很难写出组织良好、维护方便的CS代码项目。

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包含自定义语法和解析器，用户根据这些语法定义自己的风格规则，最终通过解析器编译和生成相应的CSS文件。

因此，我们需要将我们的less文件编译成css文件，以便使用我们的htm页面。

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

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

编译后

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

支持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;        }    }}

颜色和变量都可以参与运算

操作符需要在两侧加空

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

参与计算的两个数字都有单位，以第一个数字后的单位为准