less--入门
2024-08-25 16:06:08
Less(Learner Style Sheets)是向后兼容css扩展语言。
变量(Variables)
@width: 10px;
@height: @width + 10px;
header{
width: @width;
height: @height;
}
编译后等同于：
header{
width: 10px;
height:20px;
}
混合(Mixins)
.bordered{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
a{
.bordered();
}
嵌套(Nesting)
#aa{
color: black;
#bb{
font-size: 20px;
}
.cc{
width: 300px;
}
}
#aa{
color: black;
#bb{
font-size: 20px;
}
.cc{
width: 300px;
&:hover{
height:300px;
}
}
}
适配屏幕(@supports、@media)
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
运算（Operations）
@color: #224488 / 2; //results in #112244 @var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
函数（Functions）
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle.button(); // can also be written as #bundle > .button
}
Maps
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
作用域(Scope)
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
@import "xx.css";
最新文章
- 记录DIV中滚动位置刷新页面位置保持不变
- 关于mysql数据库行级锁的使用(一)
- 高可用与负载均衡（1）之linux系统的数据链路层负载均衡
- Oracle分页查询语句
- Xfce 快捷键
- Android 混淆与混淆过滤
- Centos系统备份与恢复教程
- 【原创】深度神经网络(Deep Neural Network, DNN)
- 动态代理入门（jdk）
- 牢记负载均衡与HA，高性能是不同的方案。一般的CLUSTER只能实现其中的一种，而ORACLE的RAC可以有两种。
- [Swust OJ 771]--奶牛农场(几何题，画图就好)
- Python的内置函数open()的注意事项
- 团队作业8——第二次项目冲刺（Beta阶段）Day4--5.21
- Django学习日记03_模型_Fields
- 数据结构 之 并查集（Disjoint Set）
- linux服务器硬盘IO读写负载高来源定位 pt-ioprofile
- Pyenv部署
- Django Form表单组件
- SQL中exsit和in
- Ng第六课：逻辑回归(Logistic Regression)