网站报价明细,二级域名网站有哪些,山东专业的网站建设,福永论坛网站建设Less是Css预处理器之一#xff0c;分别有Sass、Less、Stylus这三个。 Lesshttps://lesscss.org/ Less是用JavaScript编写的#xff0c;事实上#xff0c;Less是一个JavaScript库#xff0c;他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数… Less是Css预处理器之一分别有Sass、Less、Stylus这三个。 Lesshttps://lesscss.org/ Less是用JavaScript编写的事实上Less是一个JavaScript库他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数缺点之一是它不支持函数。 Less的语法与Scss十分相似只是在声明变量时Less使用而不是$sign。 Sasshttps://www.sass.hk/guide/ Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量然后通过变量名来引用它们而无需重复书写这一属性值。 Stylushttps://www.stylus-lang.cn/ Stylus由Node.JS编写与JS堆栈完美匹配。Stylus神兽Sass的逻辑能力和Less的简单性的影响。与Sass或Less版本相比Stylus的一个优点就是它具有极其强大的内置功能并且能够处理繁重的计算。 Less笔记
JavaScript代码
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0,minimal-ui:iosmeta http-equivX-UA-Compatible contentieedgetitle学无止境,永远对学习保持一种敬畏的态度!/titlelink relstylesheet typetext/css href./css/01.css
/headbodydiv idwrapdiv classinner/divdiv classinner2/div/div
/body/html
Less样式代码
// less变量
c-pink: pink;
mgn: margin;
wrap: #wrap;// 混合
.juzhong(width: 10px, height: 10px, color: skyblue){width: width;height: height;background: color;// less中的嵌套规则// 注意点一定要加否则会编译成父子关系使用:表示平级:hover{background: c-pink;}
}* {padding: 0;{mgn}: 0;
}
/* 这是我想给用户看的注释 */
// 这是给程序员看的注释
{wrap} {width: 500px;height: 500px;margin: auto;display: flex;justify-content: center;align-items: center;border: 1px solid skyblue;.inner {.juzhong(100px , 100px, red);}.inner2 {.juzhong(color: gray);}
}// less中唯一有一点逻辑的地方变量的延迟加载看作用域
var: 0;
.wzh-1{var: 1;.wzh-2 {var: 2;three: var; // 3var: 3;}one: var; // 1
}
// less中的嵌套规则// 注释// 变量 开头
// c-pink: pink; color: c-pink;
// wrap: #wrap; {wrap} {}
// margin: margin; {margin}: auto;// 场景同一个大盒子下两个一模一样的小盒子小盒子代码重复如何复用 混合即可高效解决
// less普通混合 juzhong()
// 混合的样式会在css文件内显示// less不带输出混合 .juzhong()
// 混合的样式只在less文件内显示给混合名字后面加上小括号即可调用时也要加小括号// 带参数并且带默认值的混合 .juzhong(x, y) 俗称mixin
// 只需要在 .juzhong(width, height, color)
// 1、调用时需要接收形参
// 2、并且需要默认值// 命名参数混合
// 1、调用 .juzhong()函数时它需要传三个参数如果你只想要传参一个参数的话就需要给参数命名
// 2、命名参数这样使用: .juzhong(color: black) 这样既可如果不给参数命名它会将颜色的值赋值到width宽度上去// arguments变量 实参列表 具有length属性的对象叫做伪数组
// .juzhong(w, line, color) { border: arguments}// less计算 加减乘除 计算时只需要一方带单位即可
.wzh-1{ width: (100 100px)}// 避免编译像我们css中计算的一个方法calc
// 因为它是浏览器自带的方法它是会被自动识别并编译的
// 所以我们不需要再让less去编译它我们就可以使用 ~ 将calc计算包起来就会避免less编译这行计算样式
.lv{margin: 0;padding: ~calc(100 100px);
}
