动态样式语言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;
}