Less(01)---简介

Unit Four: Less(01)—简介

1. CSS预处器

什么是CSS预处器
- 用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
- 让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
- CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。
Sass、LESS和Stylus背景介绍
1. Sass背景介绍
  
  Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
  
  其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
  
  注：Sass官网地址：
2. LESS的背景介绍
  
  2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
  
  根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。
  
  注：LESS的官网：http://lesscss.org
3. Stylus背景介绍
  
  Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。
  
  Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
  
  注：Stylus官网：http://learnboost.github.com/stylus

2. Less

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

Less语法大体上和css语法一致，但是less中添加了许多对css的扩展。

所以浏览器无法直接执行less代码，要执行必须将less转换为css,然后再由浏览器执行。

安装
1. VS中安装插件easy less。
2. 在文件夹中新建文件style.less
3. 在文件中编辑，自动保存为css文件。

3. Less变量

结构化编写。

//双斜杠不会被解析到CSS中。
/*这个可以解析到CSS中。*/
  
body {
    width: 100px;
    height: 100px;
    background-color: tomato;
  
    div {
        height: 100px;
        width: 100px;
        background-color:olive;
        transition: all 2s;
    }
  
    div:hover {
        transform: rotateX(45deg);
    }
}

变量

变量可以存储一个变量值；并且可以在需要时，任意修改变量值。

如果直接使用变量，则以@变量名形式使用：

@variable: 500px;
@bg:#fac;
@time:2s;
    
.box{
    width: @variable;
    height: @variable;
    background-color:@bg;
    transition: all @time;
}

作为属性名、类名使用或者部分值使用，以@{变量名}的形式使用。

//将变量作为类名使用
@box:box;
.@{box}{
    width: @variable;
    height: @variable;
    background-color:@bg;
    transition: all @time;
}

变量发生重名时，会按等级包含关系进行优先使用。

$值可以重复引用使用值。

@variable: 500px;
@bg:#fac;
@time:2s;
@box:box;
.@{box}{
    width: @variable;
    height: 200px;
    background-color:@bg;
    color: $background-color;
    transition: all @time;
    //重复引用其他值。
    font-size:$height;
}

4. 父元素选择器

&父元素选择器

>子元素选择器

.box1{
    \\代表外部大括号，不会嵌套。
    &:hover{
        background-color: @bg;
    }
    >.box3{
        background-color: @bg;
    }
}

5. `extend`扩展

将类元素进行重复，并添加新的属性。

Input

.box1{
    \\代表外部大括号，不会嵌套。
    &:hover{
        background-color: @bg;
    }
    >.box3{
        background-color: @bg;
    }
}
  
.box2:extend(.box1>.box3){
    width: auto;
}

Output

.box1 > .box3,
.box2 {
  background-color: #fac;
}
.box2 {
  width: auto;
}

6. mixin 混合函数

利用函数对功能进行封装。

Input

.function(){
    width: 100px;
    height: 100px;
}
  
.box4{
    .function();
}

Output

.box4 {
  width: 100px;
  height: 100px;
}

变量函数

自定义函数，按顺序传递参数。

Input

//为混合函数设定函数，：后为默认值。
      
.test(@w: 100px, @h:500px, @cl:#fff) {
    width:@w;
    height:@h;
    background-color: @cl;
  }
      
.box5{
  .test(600px,800px)
}

Output

.box5 {
  width: 600px;
  height: 800px;
  background-color: #fff;
}

7. 数值计算

less中所有数值都可以直接进行运算。

8. 引入

@import "文件名"引入其他less文件到当前less中。

模块化编写。

Input

//引入代码
@import "style.less";
.box6{
    margin-top: @variable;
    width:100px *100px;
    height: 20px*2;
    background-color: @bg;
}

Output

//引入代码
/*这个可以解析到CSS中。*/
body {
  width: 100px;
  height: 100px;
  background-color: tomato;
}
.box {
  width: 500px;
  height: 200px;
  background-color: #fac;
  color: #fac;
  transition: all 2s;
  font-size: 200px;
}
div:hover {
  transform: rotateX(45deg);
}
\\代表外部大括号，不会嵌套。 .box1:hover {
  background-color: #fac;
}
.box1 > .box3,
.box2 {
  background-color: #fac;
}
.box2 {
  width: auto;
}
.box4 {
  width: 100px;
  height: 100px;
}
.box5 {
  width: 600px;
  height: 800px;
  background-color: #fff;
}
//引入代码截止
    
.box6 {
  margin-top: 500px;
  width: 10000px;
  height: 40px;
  background-color: #fac;
}
    

PREVIOUSInferential Statistics(06)-Describing Quantitative Association

NEXTHTML&CSS(12)---CSS(08)过渡&动画&缩放

Unit Four: Less(01)—简介

1. CSS预处器

什么是CSS预处器

Sass、LESS和Stylus背景介绍

2. Less

3. Less变量

变量

4. 父元素选择器

5. extend扩展

6. mixin 混合函数

变量函数

7. 数值计算

8. 引入

5. `extend`扩展