LESS 入门

LESS 的介绍

学习网站：快速入门 | Less.js 中文文档
LESS « 一种动态样式语言

image.png

image.png

Less的安装

参考链接：http://less.bootcss.com/#using-less

image.png

image.png

//全局安装 less
cnpm install -g less

image.png

//查看 less 命令是否可用--查看所有的命令
less --help
//之后退出
q

image.png

image.png

image.png

image.png

Less的应用

image.png

Example1

在桌面新建一个 test.less 文件并进行编辑

@color: #4D926F;

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

在命令行中进入该目录下进行编译

image.png

cd Desktop
//这个命令是将 less 文件的源码进行编译，之后输出到命令行中  下图1
lessc test.less
//这个命令是将 less 文件的源码进行编译后在桌面生成一个 ok.css 的文件 下图2 & 3
lessc test.less > ok.css

image.png

image.png

image.png

image.png

Example2

1. 桌面新建一个 lesstest 的文件夹，将之前下载的 less.min.js 文件复制到该文件夹下

image.png

2. 将该文件夹拖拽至编辑器 sublime 中，新建一个 index.html 和 index.less 文件

image.png

3. 编辑文件

• index.html

Hello Less

image.png

Hello Less

• index.less

@color: #4D926F;

.test {
  color: @color;
}

4. 鼠标在 index.html 文件中右键选择 在浏览器中打开

image.png

• 需要注意的是这里直接运行的时候并没有任何的效果

  

  image.png

  • 而且在控制台也爆出了错误：

  Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
  跨源请求只支持协议方案：HTTP、数据、Chrome、Chrome扩展、HTTPS、Chrome扩展资源。

  • 报错原因：

  

  image.png

• 修复上面的报错：将桌面的整个 lesstest 文件夹复制到了 xampp 软件的 \htdocs 文件夹下

  

  image.png

  • 之后启动 Apache

  

  image.png

  • 再在浏览器中访问 lesstest 目录这一次成功了，页面中的文字也有了颜色的变化

  

  image.png

上面只是非常简单的示例，接下来深入了解

混合

image.png

1. 接下来还是在 sublime 中编辑桌面上的 lesstest 文件夹中的文件，把文件中之前写的代码都给注释掉

• 编辑 index.less 文件

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}   
#footer {
  .rounded-corners(10px);
}
div{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 20px;
}

• 编辑 index.html 文件

Hello Less--HEADER
Hello Less
Hello Less--FOOTER

2. 之后这里不再将文件夹放置到 htdocs 文件夹中，这次选择直接在命令行中将 index.less 文件编译成 css 文件

ls
lessc index.less > index.css

image.png

3. 然后再编辑 index.html

Hello Less--HEADER
Hello Less
Hello Less--FOOTER

image.png

4. 之后再在浏览器中打开页面

image.png

嵌套规则

image.png

1. 编辑文件，把文件中之前写的代码都给注释掉

• index.less

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

• index.html

    
SXC
    

        you are very happy
    

2. 之后再在命令行中编译 index.less 文件

lessc index.less > index.css

• 查看 index.css 文件

image.png

3. 刷新浏览器页面

image.png

函数 & 运算

image.png

1. 编辑文件
   index.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%);
}
div{
    width: 100px;
    height: 100px;
    background: orange;
    margin: 20px;
    border: 1px solid red;
}

• index.html 这里使用第二次的示例代码，将其解注释，将第三次修改的给注释掉

Hello Less--HEADER
Hello Less
Hello Less--FOOTER

2. 在控制台中编译 index.less 文件

lessc index.less > index.css

3. 之后再刷新浏览器页面

image.png

监视模式

image.png

image.png

other

image.png

image.png

image.png

image.png

http://www.bootcss.com/p/lesscss/#docs LESS 详细语法