对LESS与CSS的学习

对LESS与CSS的学习

LESS是一种动态语言，属于CSS预处理的一种，需要编译。LESS可以运行在各种语言和环境中，包括浏览器端/服务器端等。

浏览器端

可直接使用.less。首先下载less.js文件，然后在less源文件的HTML中加入代码：

<link rel="stylesheet/less" type="text/css" href="style.less">

less源文件的引入方式与标准CSS文件的引入方式一样：

<link rel="stylesheet/less" type="text/css" href="style.less">

服务器端：

LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件。如在Nodejs安装全局Less进行编译。

LESS的使用：

• 1.变量：

变量允许单独定义一系列通用的样式，然后在需要时去调用。
less源码：

//声明
@c-oroange:#ff6600;
@f18:font-size:18px;
//调用
.class{
background-color:@c-orange;
border:1px solid @c-orange;
font-size:@font-size;

编译后css：

.class{
background-color:#ff6600;
border:1px solid #ff6600;
font-size:18px;

• 2.嵌套

less源码：

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

编译后CSS：

#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;}

• 3,混合

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

.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);}

编译后的CSS:

#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;}

• 4.作用域
  less源码：

@var:red;
#page{
@var:white;
#header{
color:@var;//white
}
}
#footer{
color:@var;//red
}

• 5.javascript表达式：

@str:'"china".toUpperCase()+'!'';
.msg:before{
content:@str;//CHINA!
height:35px;
width:100px;
}

• 更多说明：

https://blog.csdn.net/sinat_27169251/article/details/49721751
https://blog.csdn.net/lidysun/article/details/52537770
http://www.1024i.com/demo/less/index.html