Less小总结
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。
Less要CSS语法的基础上进行了扩展，主要包含：Variables，Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等
1.变量——Variables
Less中的变量有以下规则：
以@作为变量的起始标识，变量名由字母、数字、_和-组成
没有先定义后使用的规定；
以最后定义的值为最终值；
可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
存在作用域，局部作用域优先级高于全局作用域。
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
Less中的变量还具有计算功能
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
我们还可以定义一个变量名为变量,在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。后的@color可以覆盖前面的@color
@color: #253636;
@highlight: "color";
#header {color: @@highlight;}
混入——Mixins
混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一个类中当作他的属性；另外混入也像一个带有参数的functions.这样任何CSS的类或ID下的样式都可以当作变量，使用混入模式用来当作另一个元素的属性值。
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/
＃header {
.roundedCorners; //等同于.roundedCorners();
}
#footer {
.roundedCorners(10px);
}
还有一种方法就是给Mixins不定我任何参数，特别是在你想隐藏输出的CSS规则，但又想在别的规则中包含他的属性，使用这种不带参数的Mixins将非常有用的
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap; !important; //对pre引用内的都加上 !important
}
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
&:hover
{
color:red;
}
}
pre {
.wrap; //这里 也包含有pre的hover样式
}
.aa()
{
.inn
{
color:blue;
}
}
.cc
{
.aa > .inn; //可以这样引用，以下都是等价的
.aa > .inn();
//.aa.inn();
//.aa.inn
}
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
//输出：
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
//如果是.mixin(#008000,4);
//输出：
.some .selector div {
color-2: #008000;
padding-2: 4;
color-3: #008000;
padding-3: 4;
margin: 2 2 2 2;
}
上面这个不是太好理解，可以使用命名参数
.mixin(@color: black; @margin: 10px; @padding: 20px)
{
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
@argument在混合中有特殊的意义，它包含了所有的参数传递。这是有用的，如果你不想处理个别参数
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
//如下
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}
对于...的参数形式，表示不定个数的参数
.mixin(...) { // matches 0-N arguments
.mixin() { // matches exactly 0 arguments
.mixin(@a: 1) { // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) { // matches 1-N arguments
.mixin(@a; @rest) { //使用这个变量名后，将这些参数分配给变量。
还有一个@switch进行复合利用
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) { //匹配任意
display: block;
}
@switch:light;
.class
{
.mixin(@switch;#999);
}
//得到
.class {
color: #a2a2a2;
display: block;
}
作为函数的混合形式
.mixin() {
@width: 100%; //这个体只是用来定义变量，
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
//得到
.caller {
width: 100%;
height: 200px;
}
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
//得到
div {
padding: 33px;
}
导入less：标准的css必须提前导入再使用，但less不要求，可以在后面导入
.foo {
background: #900;
}
@import "dssd/.less";
less分支判断
.dd (@a) when (@a){}
.dd (@a) when (@a>=3){...}
.mixin (@a) when (@a > 10), (@a < -10) { ... }
.max (@a; @b) when (@a < @b) { width: @b }
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
default()函数只是剩余分支的情况
.mixin (@a) when (@a > 0) { ... }
.mixin (@a) when (default()) { ... } // 这里就是 when @a <= 0
when not进行反转
.mixin (@b) when not (@b > 0) { ... }
循环:珊格
.generate-columns(4);
.generate-columns(@n;@i:1) when (@i=<@n)
{
.column-@{i}
{
width:(@i*100%/@n);
}
.generate-columns(@n,(@i+1));
}
//得到
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
合并特性：性能够聚合多个属性从而形成一个用逗号分隔的单一属性
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
// 为了避免意外的合并，merge 需要在每个需要合并的属性名后面添加一个 + 以作标示
// 输出
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
父选择器&
a
{
color: blue;
&:hover {
color: green;
}
}
// 又如
.button
{
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
//又如
.link
{
& + & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
//等于于
.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link, .linkish {
color: cyan;
}
对于多个&
.grand
{
.parent
{
& > & {
color: red;
}
}
//等于于
.grand .parent > .grand .parent {
color: red;
}
多项组合
p,a
{
border:1px solid #222;
&+&
{
color:red;
}
}
//等价于
p,a
{
border:1px solid #222;
}
p+p
{
color:red;
}
p+a
{
color:red;
}
a+p
{
color:red;
}
a+a
{
color:red;
}
继承 &：extend()
.e:extend(.f) {}
.e:extend(.g) {}
//等价于
.e:extend(.f, .g) {}
对于
pre:hover,
.some-class {
&:extend(div pre);
}
//等价于
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
对于
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}
//输出
.thing1 {
display: inline-block;
font-size: 0;
}
.thing2 {
display: inline-block;
font-size: 0;
}
//而这还不是最简的
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
&：extend(.my-inline-block);
}
.thing2 {
&：extend(.my-inline-block);
}
//输出
.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
函数
1.杂项函数
1.color:将代表颜色的字符串转换为颜色值.color("#aaa")
2.将数字从一种单位转换到另一种单位
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm)
3.data-uri:将资源内联进样式表
data-uri('../data/image.jpg');
输出： url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
浏览器端输出： url('../data/image.jpg');
4.deafult()
.mixin(1) {x: 11}
.mixin(2) {y: 22}
.mixin(@x) when (default()) {z: @x}
5.unit:删除或更换单位。
unit(5, px) 输出 5px
unit(5em) 输出 5
2.字符串函数
1.escape:对字符串中的特殊字符做 URL-encoding 编码
这些字符不会被编码：,, /, ?, @, &, +, ', ~, ! and $。
被编码的字符是：\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。
2.%： 格式化占位符
3.replace：用一个字符串替换一段文本。
//字符串 要换的 新的 规则（正则）
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
3.列表函数
1.length:返回列表中元素的个数
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
2.extract:返回列表中指定位置的元素。
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
4.数学函数
1.ceil：向上取整。ceil(2.5)=3
2.floor:向下取整。floor(2.5)=2
3.percentage:将浮点数转换为百分比字符串。percentage(0.5)=50%
4.round:四舍五入取整。精度默认为0.round(1.67)=2 round(1.67, 1)=1.7
5.sqrt:计算一个数的平方根，并原样保持单位。sqrt(25cm)=5cm
6.abs:计算数字的绝对值，并原样保持单位。
7.sin:正弦函数。asin/cos/acos/tan/atan
8.pi:返回圆周率 π pi()=3.141592653589793
9.pow:设第一个参数为A，第二个参数为B，返回A的B次方。
10.mod:返回第一个参数对第二参数取余的结果。
11.min:返回一系列值中最小的那个。min(3px, 42px, 1px, 16px)=1px /max
5.类型函数
1.isnumber：如果待验证的值为数字则返回 true ，否则返回 false 。
isnumber(#ff0); // false
isnumber(blue); // false
isnumber("string"); // false
isnumber(1234); // true
isnumber(56px); // true
isnumber(7.8%); // true
isnumber(keyword); // false
isnumber(url(...)); // false
2.isstring:如果待验证的值是字符串则返回 true ，否则返回 false 。
isstring(#ff0); // false
isstring(blue); // false
isstring("string"); // true
isstring(1234); // false
isstring(56px); // false
isstring(7.8%); // false
isstring(keyword); // true
isstring(url(...)); // true
3.iscolor:如果待验证的值为颜色则返回 true ，否则返回 false 。
iscolor(#ff0); // true
iscolor(blue); // true
iscolor("string"); // false
iscolor(1234); // false
iscolor(56px); // false
iscolor(7.8%); // false
iscolor(keyword); // false
iscolor(url(...)); // false
4.iskeyword:如果待验证的值为关键字则返回 true ，否则返回 false 。
iskeyword(#ff0); // false
iskeyword(blue); // false
iskeyword("string"); // false
iskeyword(1234); // false
iskeyword(56px); // false
iskeyword(7.8%); // false
iskeyword(keyword); // true
iskeyword(url(...)); // false
5.isurl:如果待验证的值为 url 则返回 true ，否则返回 false 。
isurl(#ff0); // false
isurl(blue); // false
isurl("string"); // false
isurl(1234); // false
isurl(56px); // false
isurl(7.8%); // false
isurl(keyword); // false
isurl(url(...)); // true
6.ispixel:如果待验证的值为像素数则返回 true ，否则返回 false 。
ispixel(#ff0); // false
ispixel(blue); // false
ispixel("string"); // false
ispixel(1234); // false
ispixel(56px); // true
ispixel(7.8%); // false
ispixel(keyword); // false
ispixel(url(...)); // false
7.isem:如果待验证的值的单位是 em 则返回 true ，否则返回 false 。
isem(#ff0); // false
isem(blue); // false
isem("string"); // false
isem(1234); // false
isem(56px); // false
isem(7.8em); // true
isem(keyword); // false
isem(url(...)); // false
8.ispercentage:如果待验证的值为百分比则返回 true ，否则返回 false 。
ispercentage(#ff0); // false
ispercentage(blue); // false
ispercentage("string"); // false
ispercentage(1234); // false
ispercentage(56px); // false
ispercentage(7.%); // true
ispercentage(keyword); // false
ispercentage(url(...)); // false
9.isunit:如果待验证的值为指定单位的数字则返回 true ，否则返回 false 。
isunit(11px, px); // true isunit(2.2%, px); // false isunit(33px, rem); // false isunit(4rem, rem); // true isunit(56px, "%"); // false isunit(7.8%, '%'); // true isunit(1234, em); // false isunit(#ff0, pt); // false isunit("mm", mm); // false
6.颜色函数
1.rgb/rgba
2.rgnb:创建格式为 #AARRGGBB 的十六进制颜色值 (注意不是 #RRGGBBAA！)
argb(rgba(90, 23, 148, 0.5)),这种格式被用于 IE 、.NET 和 Android 的开发中
3.hsl/hsla:通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象
hsl(90, 100%, 50%),hsla(90, 100%, 50%, 0.5)
4.hsv/hsva:通过色相 (hue)、饱和度 (saturation)、色调 (value) 三种值 (HSV) 创建不透明的颜色对象。
hsv(90, 100%, 50%),hsva(90, 100%, 50%, 0.5)
5.red/green/blue：从颜色对象中提取颜色通道值
green(rgb(10, 20, 30))
6.alpha:从颜色对象中提取 alpha 通道值 alpha(rgba(10, 20, 30, 0.5))=0.5
7.saturate/desaturate:增加/减少颜色饱和度 saturate(hsl(90, 80%, 50%), 20%)=#80ff00
8.lighten/darken:增加/减少颜色亮度 lighten(hsl(90, 80%, 50%), 20%)=#b3f075
9.fadeout/fadein:增加/减少透明度fadein(hsla(90, 90%, 50%, 0.5), 10%)=hsla(90, 90%, 50%, 0.6)
10.fade:设置透明度fade(hsl(90, 90%, 50%), 10%)=hsla(90, 90%, 50%, 0.1)
11.spin:在任一方向旋转颜色的色调角 @c: spin(saturate(#aaaaaa, 10%), 10);
12.multiply：正片叠底 multiply(#ff6600, #cccccc);
13.screen：变色/滤色 screen(#ff6600, #666666);
14.overlay：叠加 overlay(#ff6600, #000000);
15.softlight：柔光 softlight(#ff6600, #333333);
16.hardlight:强光 hardlight(#ff6600, #666666);
17.difference：排除 difference(#ff6600, #333333);
18.average：分别对 RGB 的三种颜色值取平均值，然后输出结果。average(#ff6600, #ff0000);
