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. ［转］ubuntu 14.04 如何开启和关闭触控板

    转自:http://lxn348567248.blog.163.com/blog/static/1201759252014649443513/ 禁用触摸板的命令:  sudo rmmod psmous ...

  2. 【转】【编码】ANSI,ASCII,Unicode,UTF8之一

          不同的国家和地区制定了不同的标准,由此产生了 GB2312.GBK.GB18030.Big5.Shift_JIS 等各自的编码标准.这些使用多个字节来代表一个字符的各种汉字延伸编码方式,称 ...

  3. Centos安装firefox/chrome

    centos安装chrome:去官网下载chrome安装包(xxx.rpm),带软件安装工具的系统双击该xxx.rpm就能自动安装,或者sudo rpm -i xxx.rpm安装. centos卸载自 ...

  4. C#之常见数组编码错误

    摘抄自C#本质论(第四版,P55) 常见错误 错误描述 改正后的代码 int numbers[] 用于声明数组的方括号放在数据类型之后,而不是在变量标识符之后 int[] numbers; int[] ...

  5. frxReport 设计 (mtm)

    ► 设计  frxReport  frxReport 窗体上放一个  [frxReport] 的控件 双击 [frxReport]控件 进入设置模式 frxReport1.ShowReport() 方 ...

  6. 和我一起学python，初识python （life is short ,we need python）

    作者:tobecrazy  出处:http://www.cnblogs.com/tobecrazy 欢迎转载,转载请注明出处.thank you! 由于项目需要(并非因为life is short), ...

  7. selenium web driver 配合使用testng

    首先为eclipse添加testng插件 步骤如下:help->Install New SoftWare... 2. 添加testng链接,该链接可以在这里找到 For the Eclipse ...

  8. IE的if条件Hack（兼容性）

    1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉 2. 〈!--[if IE]〉 所有的IE可识别〈![endif]--〉 3. 〈!--[if IE 5 ...

  9. mysql 删除重复数据保留只保留一条

    SELECT * FROM (SELECT addTime FROM motorcade.car_msg_info GROUP BY addTime HAVING COUNT(addTime) > ...

  10. 【leetcode】Longest Consecutive Sequence（hard)☆

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...