LESS 原理，一款css的预处理程序Less的使用
2021-03-05 12:29
标签：box 服务 命名空间 方式 安装 客户 ext turn dht 安装与使用： 客户端不建议直接引用less.js，可通过编译为css引入，推荐编译工具koala。 定义变量用@ 混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 实现样式的继承关系,代码看起来层次分明,提高代码可维护性 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算... 有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在 LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止. 一个less文件头部引入另一个less文件 两种注释方式： //这是注释哦... /*这是注释*/ LESS 原理，一款css的预处理程序Less的使用 标签：box 服务 命名空间 方式 安装 客户 ext turn dht 原文地址：https://www.cnblogs.com/ypppt/p/12906240.html?Less一种动态样式语言,LESS将CSS赋予了动态语言的特性，如变量，继承，运算，函数...LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
//客户端引用
"stylesheet/less" type="text/css" href="styles.less">
//node服务端使用
npm install less
var less = require(‘less‘);//或者import less from ‘less‘
less.render(‘.class { width: 1 + 1 }‘, function (e, css) {
console.log(css);
});
//输出
.class {
width: 2;
}
变量
//less
@ly_width:100px;
.box {
width:@ly_width;
}
/*编译css*/
.box {
width:100px;
}
混合
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/*生成的 CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
嵌套规则
// LESS
#header {
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
* 生成的 CSS */
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
函数 & 运算
//less
@ly_width:100px;
.one {
width:@ly_widht + 100;
}
/*生成css*/
.one {
idth:200px;
}
match函数：
round(1.67); //returns `2`
eil(2.4); //returns `3`
floor(2.6); //returns `2`）
Color函数：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
命名空间
#bundle中定义一些属性集之后可以重复使用 #bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
//你只需要在 #header a中像这样引入 .button:
#header a {
color: orange;
#bundle > .button;
}
作用域
文件引用
@import "lib.less";
@import "lib";
注释