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. C#基础语法实例荟萃

    匿名类 action = new UploadHandler(context, new UploadConfig() { AllowExtensions = Config.GetStringList( ...

  2. ganglia及ganglia-api相关介绍

    1, ganglia的安装: http://blog.topspeedsnail.com/archives/3049 2, ganglia-api项目地址 https://github.com/gua ...

  3. Git对象模型

    原文:http://gitbook.liuhui998.com/1_2.html 一.SHA 在git中,所有用来表示项目历史信息的文件,是通过一个40个字符的(40-digit)"对象名& ...

  4. MVC RadioButton

    本文介绍如何创建radiobutton. Step 1: 创建一个类用于获取所有的选项. public class Company { public string SelectedDepartment ...

  5. Java集合中List的用法

    List接口是Collection接口的子接口,List有一个重要的实现类--ArrayList类,List中的元素是有序排列的而且可重复,所以被称为是序列. List可以精确的控制每个元素的插入位置 ...

  6. linux学习之一些琐碎知识点

    一.python 问:django中project和app之间到底有什么不同? 答:他们的区别就是一个是配置,另一个是代码. 一个project包含很多个django app以及对它们的配置.技术上, ...

  7. JStorm集群的部署

    JStorm是一个类似Hadoop MapReduce的系统,不同的是JStorm是一套基于流水线的消息处理机制,是阿里基于Storm优化的版本,和Storm一样是一个分布式实时计算的系统,从开发角度 ...

  8. Storm集群的安装配置

    Storm集群的安装分为以下几步: 1.首先保证Zookeeper集群服务的正常运行以及必要组件的正确安装 2.释放压缩包 3.修改storm.yaml添加集群配置信息 4.使用storm脚本启动相应 ...

  9. MinGW平台 openjpeg-2.1.0 静态编译后未定义引用的解决方法

    undefined reference to __imp_opj_xxx keyword: ffmpeg,openjpeg,OPJ_EXPORTS,OPJ_STATIC,opj_version,__i ...

  10. Java for LeetCode 211 Add and Search Word - Data structure design

    Design a data structure that supports the following two operations: void addWord(word)bool search(wo ...