1. less是什么？有什么作用？如何使用less？其它CSS与编译器还有哪些？
- less是一种动态层叠样式表语言，可以对css样式表进行预编译，使代码更简洁，逻辑更明晰，易维护；
- 可以在客户端使用less，也可以在服务器端使用less，客户端直接引入less.js文件，并将写好的less文件用<link>标签引入，并启动本地服务器即可；另外在URL中加入
#!watch可以监听less的变化； - 其他编译器：Sass/Scss、Stylus，postcss等；
2. 写出less常见的语法，如变量、嵌套、混合等写法范例
-
变量
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用：- style.less：
@color: orange;
@px_10: 100px;
body {
background-color: @color;
}
.test {
width: @px_10;
height: @px_10;
color: @color;
background-color: cadetblue;
}
- index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js"></script>
</head>
<body>
<div class="test">test</div>
</body>
</html>
-
效果：
- 混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。- style.less
.rounded-corners (@raidus: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.test {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
可以用arguments简化：
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
- 嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。- style.less
@color1: orange;
@color2: green;
@parent_length: 100px;
@child_length: 50px;
.test {
background: @color1;
width: @parent_length;
height: @parent_length;
.child {
background: @color2;
width: @child_length;
height: @child_length;
}
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js"></script>
</head>
<body>
<div class="test">
<div class="child">
child
</div>
</div>
</body>
</html>
-
效果
如果想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
- 函数 & 运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，可以操作属性值。- style.less
@the-border: 1px;
@base-color: #333;
@red: #881122;
.test {
width: 100px;
height: 100px;
border-top: @the-border solid @red;
border-left: @the-border * 3 solid @base-color;
border-right: @the-border + 5px solid @base-color + blue;
background: @red + #4d5a23;
}
.child {
width: 50px;
height: 50px;
background: desaturate(@red, 20%);
}
-
效果
- 模式匹配和导引表达式
- 模式匹配：
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
现在，如果运行:
@switch: light;
.class {
.mixin(@switch, #888);
}
就会得到下列CSS:
.class {
color: #a2a2a2;
display: block;
}
原因是：
* 第一个混合定义并未被匹配，因为它只接受dark做为首参
* 第二个混合定义被成功匹配，因为它只接受light
* 第三个混合定义被成功匹配，因为它接受任意值
- 引导
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
导引序列使用逗号‘,’分割，当且仅当所有条件都符合时，才会被视为匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@b) when not (@b > 0) { ... }
如果想基于值的类型进行匹配，我们就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
常见检测函数：
* iscolor
* isnumber
* isstring
* iskeyword
* isurl
* ispixel
* ispercentage
* isem
- 字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
- 避免编译
在字符串前加上'~'符号
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
我们可以将要避免编译的值用 “”包含起来，输出结果为:
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
- JavaScript 表达式
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:
@var: `"hello".toUpperCase() + '!'`;
@var: "HELLO!";
- color函数 & Math函数
3. 什么是postcss？ 有哪些工具
- PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。
- PostCss是一个平台，为其插件提供一些API，其真正强大之处在于插件，可谓是“一把CSS开发的瑞士军刀”；
- 比较著名的工具就是autoprefixer，添加属性前缀；cssnext未来语法；precss可以使用Sass函数等。
本文归本人和饥人谷所有，如需转载请注明来源，谢谢
