随笔分类 - CSS的预处理器
摘要：1. 内置数学函数 基本使用 @width: ceil(10.001); .box{ width: @width; height: @width; background-color: red; } ceil方法表示向上取整 函数以及描述 实例 结果 ceil向上取整 ceil(10.001) 11
阅读全文
摘要：less提供了两种方式对css的属性进行合并，一种方式是用逗号隔开，一种方式是空格隔开，这两种方式也是遵循css的多个参数的语法规范 之前我们使用合并的方法 .mixin() { padding: 10px; } .box{ .mixin; width: 200px; height: 200px;
阅读全文
摘要：Guard翻译过来就是守卫的意思，在less中的作用就是给less的属性添加判断条件 less除了基本的计算还可以进行逻辑判断 使用when关键字来表示判断条件加载的逻辑，后面是判断条件依据 基本使用 .mixin(@width,@height) when (@width >= 100) { wid
阅读全文
摘要：基本使用 使用@import命令来进行导入 如果使用@import进行导入的时候，取决于不同的文件扩展名 基本使用 index.html <div class="box"> 123456789 </div> index.less @import "a"; @import "a.css"; .box{
阅读全文
摘要：Extend是Less的伪类，它通过:extend选择器来获取另一个选择器的内容 <div class="box"></div> <div class="box2"></div> .box{ height: 200px; background: red; } .box2{ width: 200px;
阅读全文
摘要：转义就是将浏览器不识别的带字符串的变量转义成不带字符串的浏览器识别的变量 案例： @bgc: "red"; .box{ width: 100px; height: 100px; margin-top: 10px; background-color: @bgc; } 在css中编译后的结果为： 上图中
阅读全文
摘要：算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。算术运算符在加、减或比较之前会进行单位换算 作加法时，可以进行单位的转换 @width: 10cm; @height: @width + 2cm; .box{ width: @width; height: @height; backgr
阅读全文
摘要：CSS预处理语言最大的魅力之一就是无限的嵌套 Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力 index.html <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> 三个
阅读全文
摘要：混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法 混合其实就是设置功能属性，把可复用的提取出来 第一种混合的使用方法 index.html <div class="box"></div> <div class="box2"></div> index.less .bor
阅读全文
摘要：变量 基本使用 index.html <div id="box"></div> index.less @width:100px; @height: @width+10px; .box{ width: @width; height: @height; background-color: orange;
阅读全文
摘要：什么是CSS的预处理器？ CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题。 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言 CSS的预处理器最大的好处就是，即便你不会写预处理器（less、sass等等）方
阅读全文
浙公网安备 33010602011771号