less 入门1

less 入门1 

less.html

<!DOCTYPE html>
<html lang="zh-cn">
<head >

    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>bootstrap</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="../styles/site.less">
    <!--[if lt IE 9]>
    <script src="../bootstrap/html5shiv.min.bootstrap"></script>
    <script src="../bootstrap/respond.min.bootstrap"></script>
    <![endif]-->
    <script src="../scripts/jquery-1.12.2.min.js" ></script>
    <script src="../scripts/less.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
    <h2 class="page-header">less 动态样式语言，可在客户端运行，也可借助node.js在服务器端运行</h2>
    <p>变量、继承，运算，函数</p>
    <p>less可以继承，即在页面多处引用同个样式时，可使用继承来解决</p>
    <h1 class="border">变量： @color:#abcdef;</h1>
    <div class="div1">h2{color:@color;}</div>
    <div class="div2"> 混合</div>
    <div class="div3"> .myStlye{}</div>
    <div class="div4"> H2{.myStyle}</div>
    <div class="div5">test5</div>
    <div class="div6">test6</div>
    <hr/>
    <div class="div7">
        this is div7
        <h1>h1</h1>
        <h2>this is h2<a href="#">view</a></h2>
    </div>
    <hr/>
    <!--<article>
        <h3>less入门<small>with webstorm</small></h3>
        <section>
            <p>less是一种动态样式语言</p>
            <aside>
                <a href="#">了解更多</a>
                <blockquote>
                    来自w3c标准
                    <cite><a href="http://w3c.com">w3c</a></cite>
                </blockquote>
            </aside>
        </section>
    </article>-->
    <div class="div8">
       任何数字、颜色 或者变量都可能参与运算
    </div>
    <div class="div9">
        命名中间  使用公司名
    </div>
    <div class="div10">
        作用域越小，优先级越高
    </div>

    day05 am 01.25.53
</div>
</body>
</html>

site.less

@color: red;
@gColor: green;
@myFavor: 'color';

h2 {
  color: @color;
}

p {
  color: @color+#111;
}

h1 {
  color: @@myFavor; /*先 @myFavor 找到 color 再@一次，找到@color */
}

//混合
.border {
  border: 1px solid @color;
}

.div1 {
  .border; // 直接引用其他样式  mixin 混合
  color: green;
}

//混合参数
.border2(@width:1px) {
  border: @width solid @gColor;
}

.border-radius(@radius:5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

//带参混合
.padding1(@top:15px,@right:10px,@bottom:25px) {
  // 15px 为默认值
  //多参数
  padding: @arguments; // 直接调用多参数
  padding-left: 8px;
}

.div2 {
  .border2;
  .border-radius(10px);
  .padding1; // 带参混合
}

//模式匹配（重载）
.mixin(dark,@c:@gColor) {
  //@c 是变量  @gColor是引用值
  color: darken(@c, 10%); // 调用函数  把 @c 颜色变深10%
}

.mixin(light,@c:@gColor) {
  color: lighten(@c, 10%); // 调用函数  把 @c 颜色变浅10%
}

.div3 {
  .mixin(dark); //效果不明显
}

@myColor: pink;
/*
.div4(@c:@myColor){  // @c 是形参  @myColor　是默认值
  color:@c;
}*/
//不能直接调用带参数的
.myStyle(@c:@myColor) {
  color: @c;
}

.div4 {
  .myStyle; //  .myStyle(); 加括号也可以
}

.myStyle2(@c) {
  color: @c;
}

.div5 {
  .myStyle2(blue); //  这里不需要双引号
}

//引导模式   不要引用 bootstrap 就有效果。。
/*
.mixin(@a) when(lightness(@a)>=50%){
  background-color: black;
}
.mixin(@a) when(lightness(@a)<=50%){
  background-color: white;
}

.div6{
  .mixin(#888);

}
*/
.div7{          // 各种嵌套
  color:red;
  h1{ color:@gColor;}
  h2{color:blue;
    a{color:pink; &:hover{color:#000;}}
  }
}

@base-font-size:10px;
@base-color:#888;
.div8{
  font-size: @base-font-size * 4;    //  直接 *
  color:@base-color /4;
  background-color: @base-color + #222;
}

//命名中间
#google{
  .h{
    background-color: red;
  }
}
#microsoft{
  .h{
    background-color: green;
  }
}
.div9{
  #google > .h;
}
@imgUrl:"../img";
.div10{
  background: url("@{imgUrl}/1.png") no-repeat;
  width:300px;
  height: 300px;
 
}

 

posted @ 2016-04-05 17:17  gyz418  阅读(140)  评论(0)    收藏  举报