less
MoLvSHan
这个作者很懒,什么都没留下…
展开
-
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 · 629 阅读 · 0 评论 -
less学习(九)—关于Guards
Less Mixin Guards如果你想在表达式上匹配简单的值或参数数量,那么你可以使用Guards。 它与mixin声明相关联,并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护,并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句,并执行计算以指定匹配的mixin。下面列出了不同类型的mixins g原创 2017-11-14 14:57:05 · 523 阅读 · 0 评论 -
less学习(八)— 关于导入
导入指令@import 伪指令用于在代码中导入文件。 它将LESS代码分布在不同的文件上,并允许轻松地维护代码的结构。 您可以将 @import 语句放在代码中的任何位置。文件扩展名您可以使用 @import 语句,具体取决于不同的文件扩展名,例如:如果您使用 .css 扩展名,那么它将被视为CSS和 @import 语句保持不变。如果它包含任何其他扩展名,那么它将被视为L原创 2017-11-14 11:34:39 · 478 阅读 · 0 评论 -
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 · 442 阅读 · 0 评论 -
less学习(一)—安装使用
官方文档上是这样描述less的Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以通过 npm 在命令行上运行;在浏览器上作为脚本文件下载;或者集成在广大的第三方工具内。本文采取的是客户端用法在客户端使用 Less.js 是最容易的方式,并且在开发阶段很方便原创 2017-11-03 10:32:49 · 371 阅读 · 0 评论 -
less学习(七)—作为函数使用的Mixin
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 · 930 阅读 · 0 评论 -
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 · 2615 阅读 · 0 评论 -
less学习(五)—关于Mixin
今天进入到Mixin(混合)的学习,经过前面几天的学习已经初步掌握了关于变量和关于Extend的一些语法和规则,如果有朋友觉得我写的实在渣的话,可以移步less官方文档自行学习。先上一个基本用法的例子.box1 { color: red;}.box3 { .box1();}编译为:/* line 1, http://localhost/about-less/styles.le原创 2017-11-08 09:17:22 · 548 阅读 · 0 评论 -
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 · 453 阅读 · 0 评论 -
less学习(十)—循环与合并
循环在 Less 中,mixin 可以被自己调用。当这种递归形式的 mixin 与 Guard Expressions 和 Pattern Matching 一起联合使用的话,就可以创造出各种迭代/循环结构。普通案例.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration原创 2017-11-14 15:19:36 · 859 阅读 · 0 评论