>> 知识广场

LESS与CSS的区别,LESS是什么语言,这是一个LESS入门级的教程

分类：HTML,CSS 作者：myerob 标签：LESS CSS 区别 语言 入门 阅读：195 收藏
导读：
首先，我们得知道Less能干什么?Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。LESS是一个CSS预处理器，可以为网站…

首先，我们得知道Less能干什么?

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：(1)Less的语法 (2)Less预处理器。浏览器终究只认识CSS，所以Less文件需要经过Less预处理器编译成为CSS。

css：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

less与css区别总结：

1、Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。

2、less扩展了CSS语言，增加了变量、Mixin、函数等特性。

3、css可以被浏览器直接识别，less需要先编译为css。

例如LESS代码：

@width:300px;
@fonts:12px bold "宋体,Verdana";
.block-header{
    color:#5c5c5c;
    .elem-title{
        font:@fonts;
        width:@width;
    }
    .elem-content{
        width:@width;
        height:300px;
    }
}
.block-footer{
    font:@fonts;
    width:@width + 100px;
}

经过编译后的css是这样的：

.block-header {
  color: #5c5c5c;
}
.block-header .elem-title {
  font: 12px bold "宋体,Verdana";
  width: 300px;
}
.block-header .elem-content {
  width: 300px;
  height: 300px;
}
.block-footer {
  font: 12px bold "宋体,Verdana";
  width: 400px;
}

如何安装（主要是基于sublime编辑器）？

用less进行编译css，有很多途径，可以用nodejs。当然我们希望以最简单的方式来完成，比如：新建一个 test.less文件，按 ctrl +s 即编译成 test.css.

要实现我所描述的功能，你只需要下载一个sublime编辑器，

1）打开sublime：ctrl + shift + p

2）输入：LessToCss ，点击后即可安装

4）windows下，LessToCSS对lessc.cmd有依赖，请下载：

https://github.com/duncansmart/less.js-windows/releases后 将其路径（i.e: E:/Less）添加至系统环境变量中：

5)重启sublime.

6)新建一个文件：test.less 。把上面我写的复制进去，ctrl+s. 你能看到在你目录下自动生成了test.css.

注:默认 在 xx.less文件的同级目录下生成 xx.css，且自动压缩。

通过：Preference —— Package Settings —— Less2Css ——Setting Default 可以看默认配置：

{
  "lesscCommand": false,
  "lessBaseDir": "./",   
  "outputDir": "./",  
  "outputFile": "", //[example.css] if left blank uses same name of .less file
  "minify": true,   //默认压缩
  "minName": false,
  "autoCompile": true,
  "showErrorWithWindow": false,
  "main_file": false,
  "ignorePrefixedFiles": false
}

如果的dev环境中不想压缩，可以通过 Preference —— Package Settings —— Less2Css ——Setting User 增加：

{"minify": false}

语言特性基本介绍

1）变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

less源码：

@color: #4D926F;
#header {
    color: @color;
}
h2 {
    color: @color;
}

less编译后：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

2）混合（Mixins）：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

less源码（有了.rounded-corners这个函数，以后再也不用每个样式里面写那么多兼容了，每次只要.rounded-corners(8px)   .rounded-corners(10px).  Awesome）：

.rounded - corners(@radius: 5px) { 

    - webkit - border - radius: @radius; 

    - moz - border - radius: @radius; 

    - ms - border - radius: @radius; 

    - o - border - radius: @radius;
    border - radius: @radius;
}


#header {.rounded - corners;
}#footer {.rounded - corners(10px);
}

less编译后：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

3）嵌套：我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

less源码：

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

less编译后：

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

4）函数和运算：  运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

less源码：

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

less编译后：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

 

 

 

 

相关推荐