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;

}

less 入门1的更多相关文章

  1. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  3. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  4. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  7. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  10. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. struts2将servlet对象注入到Action中

    在struts2框架中,可以通过IoC方式将servlet对象注入到Action中,通常需要Action实现以下接口: a. ServletRequestAware: 实现该接口的Action可以直接 ...

  2. faad解码aac

    // faad2.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include <cassert> #include <io ...

  3. 【GoLang】GoLang 错误处理 -- 使用 error is value 的思路处理，检查并处理error

    吐血推荐: https://dave.cheney.net/2016/04/27/dont-just-check-errors-handle-them-gracefully 参考资料: https:/ ...

  4. IO复用与select函数

    socket select函数的详细讲解 select函数详细用法解析      http://blog.chinaunix.net/uid-21411227-id-1826874.html linu ...

  5. c#之Insert字符串的三种写法

    1.Format Format(String, Object) 将指定字符串中的一个或多个格式项替换为指定对象的字符串表示形式. ex1:简单示例怎么应用 private void btnTest_C ...

  6. Unity关于用LoadLevelAdditiveAsync导致新场景的Navmesh数据不正确Loading条的实践

    为了解决用Application.LoadLevelAdditiveAsync 导致新场景的Navmesh数据不正确(我们用的是4.63),我们现在loading条做法是先切到Loading的场景,然 ...

  7. mybatis一对多查询

    18 <!-- 19 方式一:嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集 20 封装联表查询的数据(去除重复的数据) 21 select * from class c, teacher ...

  8. Linux 添加新硬盘 LVM操作（作用：新增硬盘的卷管理）

    1 查看当前系统硬盘及分区情况 (注:linux中SCSI的第1个硬盘/dev/sda,第2个硬盘/dev/sdb依此类推) 2 初始化分区sdb为物理卷pv pvcreate /dev/sdb  / ...

  9. objective-c可变字典

     1 #pragma mark *****************************字典********************************  2 //        字典:通过ke ...

  10. php Internal Server Error

    Internal Server Error The server encountered an internal error or misconfiguration and was unable to ...