代码改变世界

Less css自学记录（一）~在浏览器中打开

2015-06-15 15:44  妙笔生花  阅读(337)  评论(0)  编辑  收藏  举报

近期因工作需要，项目中运用Less css进行代码编写，从http://linder0209.github.io/web-guide/了解了一下编码规范及学习资料。

现以客户端用法为例，具体步骤如下：

第一步： 访问http://less.bootcss.com/，从客户端用法块 点击less.js

会下载一个 less.js-master.zip 文件，解压后目录如下：

注意：打开dist目录，其中包含less.js、less.min.js两个文件（根据项目需求，可选择压缩或未压缩文件）。

第二步： 本地新建html静态项目，将less.js 或 less.min.js 拷贝至对应目录。

以LessDemo 为例，其中LessDemo为项目名、base.less为less样式文件、less.js为上面目录中拷贝的js执行文件、lessIndex.html是访问主页。

AG1： base.less源码

@charset "utf-8";
body{
    margin: 0px;
    padding: 0px;
    background-color: #DFDFDF;
}
div{margin: 5px}
.clear{clear: both;}
//注释一，不会显示在编译后的Css文件中
/*注释二，会显示在编译后的Css文件中*/
/*变量遵循原则： 
*先定义后使用，格式为@name:value，
*其中name符合变量明明规则，value要带上单位。
*/
@width_200: 200px;
@height_300: 100px;
.div1{
    width: @width_200;
    height: @height_300;
    background-color: #53616D;
}

/*
混合情况：
1、 直接引用某个类的所有属性；
2、 引用带参数无默认值的类属性；
3、 引用带参数有默认值的类属性。
*/
//AG1: 直接引用
.box{width: 200px;height: 50px;float: left;}
.border{border: solid 5px #3ECAAF;}
.box1{
    .border; //直接引用，使用类名即可
    .box;
}
//AG2: 引用带参数无默认值的类属性
.border2(@border_width){
    border: solid @border_width #3ECAAF;
}
.box2{
    .box;
    .border2(10px); //无默认值，调用时 “定义名(参数值)”
}
//AG3: 引用带参数有默认值的类属性
.border3(@border_width: 7px,@bstyle:solid){
    border: @bstyle @border_width #3ECAAF;
}
.box3_1{
    .box;
    .border3();//有默认值，可不传参数
}
.box3_2{
    .box;
    .border3(9px,dotted);//有默认值，传参可以覆盖默认值
}
//Demo 圆角
.border_radius(@radius: 5px){
    -wekit-border-radius: @radius;
    -max-border-radius: @radius;
    border-radius: @radius;
}
.radius_test1{
    .box;
    .border();
    .border_radius();
}
.radius_test2{
    .box;
    .border();
    .border_radius(20px);
}
//应用背景: 三角
.sanjiao_demo{
    width: 0px;
    height: 0px;
    overflow: hidden;
    border-width: 10px;
    border-color: transparent transparent red transparent;
    border-style: dashed dashed solid dashed;//解决IE6黑边问题
}

/*
匹配模式下写三角：
仔细观察，top、bottom、@_这些是用于匹配执行哪个选择器的参数。
*/
.sanjiao(top,@w:5px,@c:#f00){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
.sanjiao(bottom,@w:5px,@c:#f00){
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: dashed dashed solid dashed;
}
.sanjiao(@_,@w:5px,@c:#f00){  
    width: 0px;  
    height: 0px;  
    overflow: hidden;  
}
.sanjiao_t1{  
    .sanjiao(top,20px);  
}
.sanjiao_t2{  
    .sanjiao(bottom,15px,blue);  
}
/*
匹配模式-定位
*/
.pos(r){position: relative;}
.pos(a){position: absolute;}
.pos(f){position: fixed;}
.pipei{
    .box;
    background-color: green;
    .pos(r);
}
/*
嵌套 ul li a, 基本格式：
.list{}
.list li{}
.list a{}
.list a:hover{}
.list span{}
*/
.list{
    width: 800px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    li{
    height: 30px;
    line-height: 30px;
    background-color: pink;
    margin-bottom:5px;
    }
    a{
    display: block;
    float: left;
    //&符号代表上一层选择器
    &:hover{
        color: red;
    }
    }
    span{
    display: block;
    float: right;
    }
}
/*
@arguments 变量
*/
.border_arg(@w: 30px,@c: red,@sty: solid){
    border: @arguments; //等价于border:@w @c @sty;
}
/*
避免编译和important
在使用LESS中，可能用到一些非正规或者不需要计算的内容是，前面加~符号
*/
//AG1: 避免编译
.test_no1{
     width: ~'calc(300px - 30px)';//特殊方法，需要浏览器去计算
}
.test_no2{
    width: calc(300px - 30px);
}
//AG2: important，为所有引用的属性加上important
.test_important{
    .border!important;
}

AG2：lessIndex.html源码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>LESS学习示例</title>
  <link rel="stylesheet/less" type="text/css" href="base.less" />
  <!-- 定义LESS对象，为Less.js设置参数-->
  <script>
     less = {
          env: 'development',
          async: false,
          fileAsync: false,
          poll: 1000,
          functions: {},
          dumpLineNumbers: "comments",
          relativeUrls: false,
          rootpath: '/'
      }
  </script>
  <script src="less.js" type="text/javascript"></script>
  <!-- 
    说明： 
        1、.less 文件应先于 less.js文件引入，这样才可保证less.css会执行为想要的样式；
        2、如果引入多个.less文件，每个独立less文件中的变量是互不影响的；
        3、less.js文件必须在</head>之前引入。
  -->
 </head>
 <body>
    <div class="div1"></div>  
    <div class="box1"></div>  
    <div class="box2"></div>  
    <div class="box3_1"></div>  
    <div class="box3_2"></div>  
  
    <div class="radius_test1"></div>  
    <div class="radius_test2"></div>  
    <div class="clear"></div>  
    <div class="sanjiao_demo"></div>  
    <div class="sanjiao_t1"></div>  
    <div class="sanjiao_t2"></div>  
    <hr>  
    <div class="box4"></div>  
    <ul class="list">  
        <li><a href="">这是一段文字</a><span>2014-11-26</span></li>  
        <li><a href="">这是一段文字</a><span>2014-11-26</span></li>  
        <li><a href="">这是一段文字</a><span>2014-11-26</span></li>  
        <li><a href="">这是一段文字</a><span>2014-11-26</span></li>  
        <li><a href="">这是一段文字</a><span>2014-11-26</span></li>  
        <li><a href="">这是一段文字</a><span>2014-11-26</span></li>  
    </ul>  
 </body>
</html>

备注：源代码可参考 http://blog.csdn.net/ys743276112/article/details/41510913

第三步： 配置IIS，访问该项目。

关于window7下IIS配置，请参考 http://www.jb51.net/article/29787.htm

@1、配置.less的MIME TYPE ： 点击MIME 类型，右侧点击添加：

文件扩展名： .less  MIME类型： text/css

@2、配置默认文档： 点击默认文档，右侧点击添加：

lessIndex.html

@3、配置访问IP、端口（自定义，如8088）

配置完成后，访问http://localhost:8088即可。