2017年11月_MoLvSHan

原创移动端验证码效果的实现

效果如下图所示，代码如下，html代码： <div class="numberBox clearfix" onclick="judgeval();"> <input type="tel" id="userinfo" index='0' maxlength="1" onfocus="focusinput(this);" /&a

2017-11-15 11:01:44 2163

原创 less学习（十）—循环与合并

循环在 Less 中，mixin 可以被自己调用。当这种递归形式的 mixin 与 Guard Expressions 和 Pattern Matching 一起联合使用的话，就可以创造出各种迭代/循环结构。普通案例.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration

2017-11-14 15:19:36 850

原创 less学习（九）—关于Guards

Less Mixin Guards如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。下面列出了不同类型的mixins g

2017-11-14 14:57:05 516

原创 less学习（八）— 关于导入

导入指令@import 伪指令用于在代码中导入文件。它将LESS代码分布在不同的文件上，并允许轻松地维护代码的结构。您可以将 @import 语句放在代码中的任何位置。文件扩展名您可以使用 @import 语句，具体取决于不同的文件扩展名，例如:如果您使用 .css 扩展名，那么它将被视为CSS和 @import 语句保持不变。如果它包含任何其他扩展名，那么它将被视为L

2017-11-14 11:34:39 471

All variables defined in a mixin are visible and can be used in caller's scope (unless the caller defines its own variable with the same name)（所有在混合里定义的变都是可见的并且可以在调用混合的css规则集里使用，除非这个调用混合的css有它自己的相同名字的

2017-11-09 17:59:08 925

原创 less学习（六）— 关于带参数的Mixin

Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in.（当使用混合时，可以通过选择器块带变量参数。）.border-radius(@radius) { -webkit-border-radius: @radius; -moz-

2017-11-09 15:41:52 2609

原创 less学习（五）—关于Mixin

今天进入到Mixin（混合）的学习，经过前面几天的学习已经初步掌握了关于变量和关于Extend的一些语法和规则，如果有朋友觉得我写的实在渣的话，可以移步less官方文档自行学习。先上一个基本用法的例子.box1 { color: red;}.box3 { .box1();}编译为：/* line 1, http://localhost/about-less/styles.le

2017-11-08 09:17:22 545

原创 less学习（四）—关于Extend

官方文档是这么介绍Extend的Extend is a Less Pseudo-Class which merges the selector it is put on with ones that match what it references.简单翻译就是Extend是less的伪类选择器，这个伪类选择器会将引用它的选择器与匹配它的选择器合并（英语太渣，不知道翻译的是否准确，下

2017-11-06 15:13:22 621

原创 less学习（三）—关于变量

变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护。1、普通变量用法// Variables@link-color: #428bca; // sea blue@link-color-hover: darken(@link-color, 10%);// 用法a,.link { color: @link-color;}a:hover {

2017-11-06 11:28:58 447

原创 less学习（二）—简单基础

一、变量 This is color1@nice-blue: #5b83ad;@light-blue: @nice-blue + #111;.color1 { width: 200px; height: 200px; background-color: @light-blue;}渲染结果为：注意：由于变量只能定义一次，所以其本质就是常量二、混合（Mixin）

2017-11-03 13:58:57 434

原创 less学习（一）—安装使用

官方文档上是这样描述less的Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。本文采取的是客户端用法在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便

2017-11-03 10:32:49 366

MoLvSHan的博客