标签：引号 嵌套 两种 install rate red mat ext 逗号
less是一门CSS预处理语言。由于CSS本身并不是程序式语言，不方便维护和扩展，没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上，引入了变量、Mixin混入、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。
本质上，LESS包含一套自定义的语法及一个解析器，写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性，更不是用来取代CSS的，而是在现有的语法基础上，为CSS加入程序式语言的功能特性。所以，标准的CSS文件直接改成.less格式，LESS编译器可以完全识别。
link标签rel属性值一定要为stylesheet/less
<link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script>
npm install -g less 编译： lessc style.less style.css 编译并压缩文件： lessc --clean-css styles.less styles.min.css
需要配置webpack，webpack会帮你编译less文件，可以在js中Import进.less文件，像使用css那样使用less
var less = require(‘less‘);
less.render(‘.myclass { width: (1 + 1) }‘, function (e, output) {
console.log(output.css); // 输出 .myclass {width:2}
});
这里的变量指的是常量，只能定义一次。以@开头定义，使用时也要键入@
@color: #5B83AD;
@bgColor: @color + #111;
@width: 300px;
#wrap {
color: @color;
width: @width-20;
height: @width-20*5;
margin: (@width-20)*5;
background: @bgColor;
}
生成后的CSS：
#wrap {
color: #999;
width: 50%;
background: #6c94be;
}
让选择器变成动态的变量，使用时必须将变量名用花括号括起来
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
生成的CSS：
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
将某CSS属性名当做变量，与选择器变量一样，使用时需要{}
@borderStyle: border-style;
@Solid: solid;
#wrap{
@{borderStyle}: @Solid;//变量名 必须使用大括号包裹
}
编译后：
#wrap{
border-style:solid;
}
@images: "../img"; //需要加引号
body {
background: url("@{images}/dog.png"); //变量名 必须使用大括号包裹
}
编译后：
body {
background: url("../img/dog.png");
}
声明：@name:{属性:值};
使用：@name();
@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
编译后：
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
就近原则，与大多数编程语言的原则一样
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
编译后：
#wrap {
width: 9%;
}
&符：代表父选择器的名字
.boring {
display: inline-block;
&::after{
content:"Hello Less";
}
.class {
width: 100%;
}
&>.text{
height: 10px;
}
}
编译后：
.boring{
display: inline-block;
}
.boring::after{
content: "Hello Less";
}
.boring .class{
width: 100%;
}
.boring>.text{
height: 10px;
}
混入就是将一组CSS属性整体包含入另一个css类中去。提高复用性
.bordered {
&:hover {
color: red;
}
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card {
background: #f6f6f6;
.bordered; // .bordered()两种写法等价
}
编译后：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.bordered:hover {
color: red;
}
.card {
background: #f6f6f6;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card:hover {
color: red;
}
如果只是想创建一个mixin，并不想单独输出，可以这样用
.bordered(){
&:hover {
color: red;
}
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card {
background: #f6f6f6;
.bordered; // .bordered()两种写法等价
}
编译后：
.card {
background: #f6f6f6;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card:hover {
color: red;
}
注意的点：① 默认参数 ② 命名参数 ③ @arguments ④ @rest
.border-radius(@radius) {
border-radius: @radius;
}
.border(@a:10px, @b:50px, @c:30px, @color:#000) {
border:solid 1px @color;
box-shadow: @arguments; // 指代的是 全部参数
}
.bgColor(@color,@rest...){
width: @rest; // @rest参数可以获得后面违背获取的值。
background: @color;
}
#main {
.border(0px,5px,30px,red);
.border-radius(5px);
}
#main1 {
.border(@c: 20px,@color: red);
}
#main2 {
.border(10px);
}
#main3 {
.border;
}
和面向对象的多态很相似。当调用传参的时候，会根据参数进行匹配，找到匹配程度更高的，如果匹配程度相同，将全部选择，并存在样式覆盖。
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
div {
.mixin(#008000);
}
编译后：
div {
color-1: #008000; // "color-1"这种写法对CSS来说是不合法的，在这里只是展示哪些属性被用上了
color-2: #008000;
padding-2: 2;
}
不能单独使用命名空间的方法，必须先引入命名空间，才能使用其中的方法。
#card(){
background: #723232;
.d(@w:300px){
width: @w;
#a(@h:300px){
height: @h;//可以使用上一层传进来的方法
width: @w;
}
}
}
#wrap{
#card > .d > #a(100px); // 父元素不能加 括号
}
#main{
#card .d();
}
#con{
//不得单独使用命名空间的方法
//.d() 如果前面没有引入命名空间 #card ，将会报错
#card; // 等价于 #card();
.d(20px); //必须先引入 #card
}
编译后：
#wrap{
height:100px;
width:300px;
}
#main{
width:300px;
}
#con{
width:20px;
}
没有逻辑运算符与或非，但是有when not ,（逗号）分别相当于 && ! ||
比较运算符有： > >= = =< <。=代表的是等于。
#card{
// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not 运算符，相当于 非运算 !，条件为 不符合才会执行
.background(@color) when not (@color>=#222){
background:@color;
}
// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}
编译后：
#main{
border:solid #999 200px;
background:#111;
font-size:40px;
}
.border{
border: solid 1px red;
margin: 50px;
}
#main{
.border() !important;
}
编译后：
#main {
border: solid 1px red !important;
margin: 50px !important;
}
less并没有提供for循环功能，但是可以借助when实现。
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
编译后：
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
使用循环可以做成CSS网格类的示例：
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
编译后：
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
CSS中有的属性值是空格隔开，有的是逗号隔开。
①逗号隔开，在LESS中使用 +
.boxShadow() {
box-shadow+: inset 0 0 10px #555;
}
.main {
.boxShadow();
box-shadow+: 0 0 20px black;
}
/* 生成后的 CSS */
.main {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
②空格隔开，在LESS中使用 +_
/* Less */
.Animation() {
transform+_: scale(2);
}
.main {
.Animation();
transform+_: rotate(15deg);
}
/* 生成的 CSS */
.main {
transform: scale(2) rotate(15deg);
}
sadfasdfasdf
标签：引号 嵌套 两种 install rate red mat ext 逗号
原文地址：https://www.cnblogs.com/V587Chinese/p/11419587.html
