[前端开发工程师]工作小记——Less预编译语言

Less预编译语言

使用

• node.js：

  npm install -g less

• 浏览器:

  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
  

特点

向后兼容，js将less转化为css

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

//编译后

#header {
  width: 10px;
  height: 20px;
}

混合

//一个类样式可以在其他类样式中使用
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();//引用，不限制被引用类必须为class
}

.post a {
  color: red;
  .bordered();
}

嵌套

//模仿HTML组织结构，编写css
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

//可伪选择器与混合一同使用，&表示当前选择器的父级

@规则嵌套和冒泡

@ 规则可以与选择器以相同的方式进行嵌套，会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.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;
  }
}

//编译后
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

运算

使用 +、-、*、/ 对数字、颜色或变量进行运算

单位类型以最左侧操作数的单位类型为准（无效单位转换：px 到 cm 或 rad 到 %，无效则忽略单位）

注意：乘法和除法不作转换。

@conversion-1: 5cm + 10mm; // 结果是 6cm
@base: 2cm * 3mm; // 结果是 6cm

calc() 并不对数学表达式进行计算，但在嵌套函数中会计算变量和数学公式的值

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

转义

//目的：引入css或less无法识别的字符
//转义字符就是在字符串前面加上一个 ~ 符号，并将需要转义的字符串放在 "" 或 '' 中，例如 ~"xkd"。转义允许你使用任意字符串作为属性或变量值。

.box{
	width:100px;
	border:1px solid #000;
	border-radius:0px 25px 0 ~"/" 0 25px 25px 0px
	// border-radius属性中使用 / 设置属性值，/前是水平半径，后是垂直半径，less不支持使用/，需要转义
}

命名空间和访问符

//基于封装的目的，对混合进行分组
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

//如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。

映射

//将混合和规则集作为一组值的映射（map）使用
#colors() {
  primary: blue;
  secondary: green;
}
//加（）使该命名空间不输出在css文件中

.button {
  color: #colors[primary];//引用colors下的[选择要引用的值]
  border: 1px solid #colors[secondary];
}

//编译后的输出
.button {
  color: blue;
  border: 1px solid green;
}

作用域

//作用域：被访问的区域，变量值从本地开始查找，没有则向上一层一层继续查找，直到找到为止

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}