共计 5621 个字符,预计需要花费 15 分钟才能阅读完成。
// less 中文 https://less.bootcss.com/
/* ****************************** 变量 variable ************************************* */
// 根底篇
@variable_width: 10px;
.variable_test {width: @variable_width;}
// 进阶篇
@variable_name: banner;
.@{variable_name} {
color: red;
// background: $color;// 新属性 v3.0.0
}
.variable_img {background:url("../@{variable_name}/icon.png");
}
/* ****************************** parent selector & **************************************/
// 根底篇
a {
color: red;
&:hover {color: blue;}
}
.button {
width: 20px;
&-ok {width: 40px;}
.pre & {width: 60px;}
}
// 进阶篇
.link {
&+& {
// .link+.link
color: red;
}
& & {
// .link .link
color: green;
}
&& {
// .link.link
color: blue;
}
&,
&ish {
// .link,.linkish
color: cyan;
}
}
.grand {
.parent {
// 这里的 & 代表 .grand .parent
&>& {
// .grand .parent>.grand .parent
color: red;
}
& & {
// .grand .parent .grand .parent
color: green;
}
&& {
// .grand .parent.grand .parent
color: blue;
}
&,
&ish {
// .grand .parent,.grand .parentish
color: cyan;
}
}
}
p,
a {
border-top: 2px dotted #366;
&+& {
// 编译后果
// p+p,
// p+a,
// a+p,
// a+a,
border-top: 0;
}
}
/* ****************************** :extend **************************************/
// :extend 有诸多应用形式,也有诸多限度
nav ul {&:extend(.inline); // .inline,nav ul {color: red;}
background: blue;
}
.inline {color: red;}
.cool {&:extend(.inline, .bucket);
}
pre:hover,
.some-class {&:extend(div pre);
// pre:hover:extend(div pre),.some-class:extend(div pre) {}}
[title=identifier] {color: blue;}
.noQuote:extend([title=identifier]) {// [title=identifier],.noQuoteP
}
.a.b.test,
.test.c {color: orange;}
.test {
&:hover {color: green;}
}
.replacement:extend(.test all) {// .a.b.test,.test.c,.a.b.replacement,.replacement.c {}
// .test:hover,.replacement:hover{}}
.bucket {color: blue;}
@{variable}:extend(.bucket) {}
@variable: .selector;
@media screen {
.selector {color: blue;}
@media (min-width: 1023px) {
.selector {color: blue;}
}
}
.topLevel:extend(.selector) {}
/* ****************************** Merge & **************************************/
.merge_mixin() {box-shadow+: inset 0 0 10px #555;}
.merge_myclass {.merge_mixin();
box-shadow+: 0 0 20px black;
}
.merge_trans() {transform+_: scale(2);
}
.merge_myclass {.merge_trans();
transform+_: rotate(15deg);
}
/* ****************************** mixin **************************************/
// 根底篇
.mixin_red {color: red;}
.mixin_theme {.mixin_red();
}
// 进阶篇
// ##、定义一个 mixin 类:
// 形式一:(会在 css 中输入)
// .red {
// color: red
// }
// 形式二:(不会在 css 中输入)
.mixin_blue() {color: blue;}
.my-hover-mixin() {
&:hover {border: 1px solid red;}
}
button {.my-hover-mixin();
}
// ##、命名空间: 应用 #()或者.(),不加 () 会在 css 中输入
// 调用:
// #mixin_parent>.child()
// #mixin_parent .child()
// #mixin_parent.child()
#mixin_parent() {
.child {font-size: 16px;}
}
.mixin_test {#mixin_parent.child()
}
// mixin 传参(分号和逗号都能够,保险起见应用分号)
.foo (@bg: #f5f5f5; @color: #900) {
background: @bg;
color: @color;
}
.unimportant {.foo();
}
// 将 mixin 用作 function:v3.5.0
// .average(@x, @y) {// @result: ((@x + @y) / 2);
// }
// div {// padding: .average(16px, 50px)[@result];
// }
// mixin 递归(>, >=, =, =<, <) 关键字 and not
.loop(@counter) when (@counter > 0) {.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {.loop(5)
}
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {.column-@{i} {width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
/* ****************************** insert 嵌套 **************************************/
// css 的写法
.insert_header {color: red}
.insert_header .logo {color: black}
// less 写法
.insert_header {
font-size: 14px;
.logo {color: black}
}
// 例如:革除浮动
.clearfix {
display: block;
zoom: 1;
&:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
// @media 嵌套规定
.component {@media(min-width:1000px) {font-size: 16px;}
@media(min-width:1200px) {font-size: 18px;}
}
/* ****************************** cal 运算 **************************************/
// 反对 +-*/ 四则运算,less 默认反对单位换算,个别状况以最左侧
@cal_add: 5cm + 10mm; // 后果是 6cm
@cal_substract: 2 - 3cm - 5mm; // 后果是 -1.5cm
@cal_mixCal: 2 + 5px - 3cm; // 后果是 4px
@cal_base: 5%;
@cal_multiply: @cal_base * 2; // 后果是 10%
@cal_other: @cal_base + @cal_multiply; // 后果是 15%
@cal_color: #224488 / 2; // 后果是 #112244
/* ****************************** transfer 本义 **************************************/
// ~"anything" 模式会被原样输入
@transfer_min768: ~"(min-width: 768px)";
// @min768: (min-width: 768px);//less3.5 开始反对简写
.element {
@media @transfer_min768 {font-size: 1.2rem;}
}
/* ****************************** fun 函数 **************************************/
@fun_base: #f04615;
@fun_width: 0.5;
.fun_class {width: percentage(@fun_width); // returns `50%`
color: saturate(@fun_base, 5%);
background-color: spin(lighten(@fun_base, 25%), 8);
// margin: if((2>1), 5px, 10px); //less3.x 才反对
}
// @fun_colors: blue, green, red;
// each(@fun_colors, {// .@{value} {// color: ~"@{value}";
// }
// });
// @fun_set: {
// one: blue;
// two: green;
// three: red;
// }
// .fun_set {
// each(@fun_set, {// @{key}-@{index}: @value;
// });
// }
/* ****************************** map 映射 **************************************/
#map_colors() {
primary: blue;
secondary: green;
}
.map_button {// color: #map_colors[primary]; //less3.x 开始反对
// border: 1px solid #map_colors[secondary]; //less3.x 开始反对
}
/* ****************************** scope 作用域 **************************************/
@scope_var: red;
#page {
@scope_var: white;
#header {color: @scope_var; // white}
}
/* ****************************** 导入 **************************************/
@import "./global.less";
/* ****************************** 应用 less **************************************/
/* node */
// npm i less
/* browser */
// <link rel="stylesheet/less" type="text/css" href="styles.less" />
// <script src="less.js" type="text/javascript"></script>
/* 批改变量
less.modifyVars({
'@buttonFace': '#5B83AD',
'@buttonText': '#D9EEF2'
});
*/
// ##、@arguments(备注:@arguments 跟传入的参数地位非亲非故)
// 示例:
// .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
// box-shadow: @arguments;
// }
// ##、@rest...(示意: 残余的参数)
// .pad(@top, @right, @rest...) {
// padding: @top @right @rest;
// }
// ##、雷同名字的 mixin
.mixin(@width) {width: @width;}
.mixin(@width, @height: 5) {
width: @width;
height: @height;
}
.ya {.mixin(10px);
}
// ##、迭代
// .loop(@width:1) when(@width<10) {// .loop((@width+1)); // 下一个迭代
// width: (@width*10px); // 每一个迭代内的 代码
// }
正文完