A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 懒,羊羊 中级黑马   /  2018-6-21 16:43  /  1231 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 懒,羊羊 于 2018-6-21 16:50 编辑

Less简介

     CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS/sass 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

(less css预处理器)

     本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

**less仅仅是写css的另一种方式,写出来的less文件浏览器也不识别,所以啊,我们写完了less文件,还需要通过less解析器解析成css,最终浏览器引入的还是css文件。**

LESS安装

> 安装less,需要先安装node,因为less环境是依赖与node环境的。

安装node

1. 下载node安装包(已经提供)
2. 双击安装(不大, 直接安装在C盘,方便查找)
3. 在cmd命令行中输入`node -v`以及`npm -v`查看是否安装成功

基本使用步骤

在**管理员模式**cmd命令行中输入以下代码:**需要联网**

[Shell] 纯文本查看 复制代码
npm install -g less 
  -g:全局安装,意味这装了一次,以后就可以直接用less

等待安装完成,然后输入以下命令

lessc -v   //查看less的版本

less的编译

> 如何把less文件变成css文件

### 使用lessc命令

[Bash shell] 纯文本查看 复制代码
lessc index.less index.html

**配合webstorm可以做到实时的编译**,

**需要安装node环境,需要安装lessc命令**

常用编辑器配置less

  webstorm配置less

    `文件`-->`设置`-->`工具`-->`File Watchers`-->`右侧绿色的+号`-->`less`

使用考拉

> koala是一个前端预处理器语言(less/sass)图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

使用步骤:

1. 把`less`文件夹拖进去
2. 会在当前目录生成一个`css`目录

优点:不用node环境,不用less环境,koala内置了。

Less语法

less初体验

新建一个less文件,输入以下代码:
[Scss] 纯文本查看 复制代码
@color:red;

p {

  color:@color;

}


可以看到,webstorm自动的帮我们生成了对应的css文件。
[CSS] 纯文本查看 复制代码
p {
  color:@color;
}

变量

**注释**

/*这个注释是CSS中的注释,因此会编译到css中*/
//这个注释,CSS中用不了,因此不会编译出来。

**变量**
[Scss] 纯文本查看 复制代码
@charset "UTF-8";

@wjs_color:#e92322;

body {

  background-color: @wjs_color;

}
div {

  width: 400px;

  height: 400px;

  border: 1px solid @wjs_color;

}

对应的css:
[CSS] 纯文本查看 复制代码
body {
  background-color: @wjs_color;
}
div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}


mixin混入
**混入样式类**

[Scss] 纯文本查看 复制代码
@charset "UTF-8";

//混入

.btn {

  width: 200px;

  height: 50px;

  background-color: #fff;

}
.btn_border {

  border: 1px solid #ccc;

}
.btn_danger {

  background-color: red;

}
.btn_block {

  display: block;

  width: 100%;
}
//混入其他类的样式。

.my_btn {

  .btn();

  .btn_block();

  .btn_border();

  .btn_danger();

}

编译后的css

[CSS] 纯文本查看 复制代码
@charset "UTF-8";
.btn {

  width: 200px;

  height: 50px;

  background-color: #fff;
}
.btn_border {

  border: 1px solid #ccc;

}

.btn_danger {

  background-color: red;

}

.btn_block {

  display: block;

  width: 100%;

}

.my_btn {

  width: 200px;

  height: 50px;

  background-color: #fff;

  display: block;

  width: 100%;

  border: 1px solid #ccc;

  background-color: red;

}


缺点:写了很多类,但是都编译到css文件中了,其实我们需要的仅仅是.my_btn这一个类。

嵌套

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

- 使用伪类的时候 可以使用`&` 表示自己

[Sass] 纯文本查看 复制代码
@charset "UTF-8";

.wjs_header {

  border-bottom: 1px solid #ccc;

}

.wjs_header .header_item {

  height: 40px;

  line-height: 40px;

  text-align: center;

  border-left: 1px solid #ccc;

}

.wjs_header .header_item:first-child {

  border-left: none;

}

导入

[Sass] 纯文本查看 复制代码
@charset "UTF-8";
@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";


模块化的思想,分模块进行管理这些less文件,最终只需要使用import将less引入到一起即可。




3 个回复

倒序浏览
奈斯
回复 使用道具 举报
奈斯
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马