在浏览器中直接引入
// 接下来，下载less.js，并将其包含在页面元素中的<script></script>标记中<head>：<script src="less.js" type="text/javascript"></script>
// 接下来，下载less.js，并将其包含在页面元素中的<script></script>标记中<head>：
<script src="less.js" type="text/javascript"></script>
2.node
npm i less -S
3.基本特性
1.变量使用@符号 @width: 10px; 2.混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法.test(@w: 200, @h: 200, @bg: red) { width: @w/@vw; height: @h/@vw; background: @bg;} 在其他样式中引入 .xxx{ .test(@bg:green); }3.匹配 .test(C,@w: 200, @h: 200, @bg: red) { width: @w/@vw; height: @h/@vw; background: @bg; // @arguments：为传进来的参数200 200 red } .test(r,@w: 200, @h: 200, @bg: red){ background: @bg; } // 默认匹配 .test(@_) { margin-left: 20px; } .xxx { .test(r); }
1.变量使用@符号
@width: 10px;
2.混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
.test(@w: 200, @h: 200, @bg: red) {
width: @w/@vw;
height: @h/@vw;
background: @bg;
}
在其他样式中引入
.xxx{
.test(@bg:green);
3.匹配
.test(C,@w: 200, @h: 200, @bg: red) {
// @arguments：为传进来的参数200 200 red
.test(r,@w: 200, @h: 200, @bg: red){
// 默认匹配
.test(@_) {
margin-left: 20px;
.xxx {
.test(r);
安装
npm install -g sass
2.基本特性
1.变量使用$符号2.嵌套 .nav { ul { li {} } } 3.&符号获取上级选择器的名称 // img:hover .new-text .img{ background: $bg; &:hover .new-text { background: yellow; &-pl{ width: 70px; } } } 4.属性嵌套.funky { font: { family: fantasy; size: 30em; weight: bold; }}5.混合与less差不多 @mixin linesH($row: 2) {} @include linesH()
1.变量使用$符号
2.嵌套
.nav {
ul {
li {}
3.&符号获取上级选择器的名称
// img:hover .new-text
.img{
background: $bg;
&:hover .new-text {
background: yellow;
&-pl{
width: 70px;
4.属性嵌套
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
5.混合与less差不多
@mixin linesH($row: 2) {}
@include linesH()
px：绝对单位，⻚⾯按精确像素展示
em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了 font-size 按⾃身来计算
rem：相对单位, 相对根节点 html 的字体⼤⼩来计算
vw：相对单位：显示区域平分为 100 份
还未添加个人签名 2020.08.05 加入
还未添加个人简介
京公网安备 11010502039052号京公网安备 11010502039052号京公网安备 11010502039052号
评论