动态样式语言less初识

资料参考与http://lesscss.cn/

Bootstrap--(less)下载安装配置

http://lesscss.cn

Less使用两种方法

(1)在客户端使用LESS--学习

编写 x.less文件

在HTML中引入x.less文件，同时再引入一个less.js 编译程序

客户端请求HTML,下载x.less及less.js文件

在客户端运行js文件把less编译css

会减慢客户端样式呈现速度

(2)在服务器端使用LESS---必须掌握

程序员编定 x.less

程序在开发电脑上安装less编译程序,执行它把x.less编译x.css

再编写html文件,引入编译得到x.css即可

客户端请示html文件，下载css文件

3.5:在自己的电脑上安装less编译环境

(1)下载并安装独立js解释器--Node.js

在命令行中执行 node -v 看到版本信息

(2)下载安装less编译程序   lessc

(3)启动js解释器,执行less编译程序，把指定x.less编译x.css

lessc e:/x.less e:/x.css

3.6:Less语法学习

(1)Less支持所有CSS语法

(2)Less支持多行/单行注释，但只有多行注释被编译到css

文件中--推荐单行注释

(3)Less支持"变量Variable"的概念

定义:@变量名:值;

使用:color:@变量名;

变量可以取值为任何全的样式值

(4) Less支持变量和常量的算术运算

+ - * / %

(5)Less支持在一个选择器中"混入Mixin",另一个选择器

定义的样式

选择器1{....}

选择器2{选择器1}

(6)Less在样式混入可以指定参数

选择器1(@参数1,@参数2..){

}

选择器2{选择器1(19px,"#fff")}

(7)Less支持嵌套

选择器1{

选择器2{

}

}

上述代码会被编译为

选择器1{}

选择器1 选择器2{}

(8)Less提供几个样式操作函数,如

ceil();

floor();

percentage(num)    把小数转换为百分比形式

darken(color,percentage) 把指定颜色变暗

lighten(color, percentage) 把指定颜色变亮

image-width(url)        返回指定图片宽度

image-height(url)        返回批定图片高度

(9)Less中可以使用 @import 实现文件包含-

可以把一个大项目所有需要less分开保存在不同源文件，

有利实现分开协作.

3.7:通过修改Bootstrap的less文件实现-定制

Bootstrap的定制主要为了达到三个目录

(1)瘦身:删除不需要的样式

只需要注释bootstrap.less不需@import

(2)粗粒度定制

只需要修改variables.less 中定义变量值即可

(3)细粒度定制

修改组件对应.less文件,如dropdown.less

练习1: 瘦身

练习2: 留下按钮->修改按钮颜色(危险色blue)

3.8:Bootstrap--jquery插件--轮播广告

<div class="carousel" data-ride="carousel">

<div class="carousel-inner">

<div class"item">img+.carousel-caption</div>

<div class"item active">img+.carousel-caption</div>

</div>

</div>

基本语法

定义变量

@sheetstyle：value；

@jdRed:#e4393c;

@thinBorder:3px;
@halfOpacity:0.2;
@baseFont:"SimeHei";
@baseSize:14px;
@normalBorderStyle:solid;
.box{
  background: rgba(22,40,60,@halfOpacity);
  border:@thinBorder @normalBorderStyle @jdRed;
}
//算术运算符
@md-width:970px;
@col-count:12;
.col-md-1{
  width: @md-width/@col-count;

}
.col-md-2{
  width: @md-width*2/@col-count;
  border:1px solid @jdRed;
}
//混入
.box5{
  padding: 30px;
  border: 4px solid #00AA88;
  margin-bottom: 20px;
}
.main{
//等同于把box5的样式复制一份给main
  .box5
}
.main{
  //可以在父选择器中写子选择器的样式，这种样式会被编译成 .main .point
  .point{background: red;}
}
//混入带参数
.well5(@pd,@bw,@mb:30px){//@md:30px 是es6的默认值
  padding:@pd;
  border: @bw solid #00CC00;
  margin-bottom: @mb;
}
.well{
  .well5(15px,2px);
  background: @jdRed;
  opacity: @halfOpacity;
}
//支持嵌套
.main{
  background: #E0E0E0;
  .affix{
    list-style: none;
    >li{
      display: inline-block;
      >a{
        text-decoration: none;
        &:hover{//&指向a
          color:palevioletred;
        }
      }
    }
  }
}
//函数
.col-md-6{
  width: floor(@md-width*6/@col-count);
}
.box9{
  color:@jdRed;
  background: lighten(@jdRed,20%);
  //高亮百分之几
}
.my-small{
  width: image-width("ad.png");
  height: image-height("ad.png");
  border:1px solid red;
}