less语法基础
引入less
-
语法
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>- 说明：
- less.js文件必须在引入的less文件之后
- 引入less文件事rel的值必须为
stylesheet/less
- 说明：
变量
变量声明
- less变量声明通过@+变量名，后面跟css类型的值或其他变量的值；
-
变量的使用
- 只需将变量名写在css属性后面即可
-
例：
@width:100px; div{ width:@widht; }
-
变量的值参与计算
- 变量可以直接与 加，减，乘，除运算
-
例：
@width:100px @width+100px ;结果为200px @width*2; 结果为200px
-
作用域（scope）
作用域是程序中的一个标准，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以调用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。 @color: #00c; /* 蓝色 */ #header { @color: #c00; /* 红色 */ border: 1px solid @color; /* 红色边框 */ } #footer { border: 1px solid @color; /*蓝色边框 */ }
声明类（函数）
-
类的声明通过 “.” +类名（参数列表）{css申明}
- 说明：
- “.”不能少必须加不能少
- 类名和css类名命名规则相同
- 参数列表和变量声明一样，可带默认值
- css申明可以用参数也可用常量值
-
例：
.myClass(@color:red,@length){ background-color:@color width:@length; height:@length; border：1px solid @color }
- 说明：
-
类（函数的调用）
- 直接在css声明中调用类名并传入参数即可
- 说明：
- “.”不能少
- 如果参数没有默认值则必须传入参数，如果都有默认值则可以不传入参数，直接写类名即可
-
例：
.myClass(@color:red ,@length:100px){ background-color:@color; width:@length; height:@length; border：1px solid @color } .div1{ .myClass(grenn,200px); } .div1{ .myClass; }
类声明的扩展
-
以使用@arguments来引用所有传入的变量
-
例：
.border(@a,@b,@color:blue){ border:@arguments; }
-
-
使用参数的控制位来控制相同的类输出不同的样式
.border(cool,@color){ border:2px solid @color; } .border(hot,@color){ border:1px solid @color } .border(@_,@ye){ color:@ye; } 调用： .con2{.border(hot,red)} .con1{.border(cool,blue)} 输出为：.con2(border:1px solid red;color:red) .con1{border:2px solid blue;color:blue} -
使用参数个数来控制输出那个类：
.border(@a){….} .border(@a,@b){...} 如果传入一个参数则调用第一个定义，传入2个则调用第二个定义 -
使用@arguments来引用所有传入的变量
.border(@a,@b,@color:blue){ border:@arguments; } -
条件语句判断：
-
可以在类函数定义时候使用条件判断
.border(@a) when (@a>10),(@a<3){ border:@a solid blue; } .con1{.border(5px)} 这里的条件是大于10或者小于3，所以调用不成立 .border(@a) when (@a>10) and (@a<15){ border:@a solid blue; } .con1{.border(12px)} 这里的条件是大于10并且小于15 ，调用成立，条件语句中那个px可以加也可以不加，判断都通过
-
-
以使用内置函数unit来增加或者取出单位
.border(@a) { border:unit(@a,px) solid red; } .con2{.border(5)} 输出 .con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5
混合（Mixin）
-
有时，我们会创建一些样式，目的是在样式中重复使用这些样式规则。没有人会阻止你在一个HTML中使用多少个class，但是你可以使用LESS，在样式表中完成。为了说明这一点，我粘贴了一些代码示例： .border { border-top: 1px dotted #333; }
article.post { background: #eee; .border; } ul.menu { background: #ccc; .border; }
选择器继承
-
下面这些是LESS中没有提供的。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：
.menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* 上面的规则和下面的规则是一样的效果 */ .menu, .footer { border: 1px solid #ddd; }
嵌套规则(Nested rules)
-
在CSS中嵌class和id是避免样式干扰或者被别的样式干扰的唯一方式。但是可能变得很乱。使用一个选择器，类似于"#site-body .post .post-header h2"是毫无用处，而且还占用大量没必要的空间。使用LESS,你可以嵌套ID、class以及元素标签。对于前面提到的例子，你可以这样写：
#site-body { … .post { … .post-header { … h2 { … } a { … &:visited { … } &:hover { … } } } } } 上面的代码最终效果和上面的一大串选择器效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，这个功能类似于javascript中的this。
命名空间（namespaces）
-
命名空间可以用于组织我们的CSS，从而提高到另一个层次，我们将一些公用的样式创建分组，然后在使用的时候直接调用。例如，如果我们创建了一个名为“default”的样式分组，我们就可以在使用到的时候直接从该组中调用。
#defaults { .nav_list () { list-style: none; margin: 0; padding: 0; } .button () { … } .quote () { … } } 然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。 nav ul { #defaults > .nav_list; }
注解
- 这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。
导入
- 导入也相当符合标准。标准的 @import ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import ‘reset.css’;)。
字符串插入
-
字符串也是可以用于变量中的，然后通过@{name}来调用。
@base_url = 'http://coding.smashingmagazine.com'; background-image: url("@{base_url}/images/background.png");
转义(Escaping)
-
有时候,你需要引入一个值,它是无效的CSS语法或者LESS不能识别。通常是一些IE的Hack。要避免抛出异常并破坏LESS，你将需要避开它们。
.class { filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; } /* 实际上会输出下面的代码: */ .class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); }
javascript的表达式
-
这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。
@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */ /* You can also use the previously mentioned interpolation: */ @string: 'howdy'; @var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */ /* Here we access part of the document */ @height = `document.body.clientHeight`;
LESS内置函数：
+ ceil(@number); // 向上取整
+ floor(@number); // 向下取整
+ percentage(@number); // 将浮点数转换为百分比，例如 0.5 -> 50%
+ round(number, [places: 0]); // 四舍五入取整
+ saturate(@color, 10%); // 饱和度增加 10%
+ desaturate(@color, 10%); // 饱和度降低 10%
+ lighten(@color, 10%); // 亮度增加 10%
+ darken(@color, 10%); // 亮度降低 10%
+ fadein(@color, 10%); // 透明度增加 10%
+ fadeout(@color, 10%); // 透明度降低 10%
less 和 sass的区别
-
LESS和Sass中的变量的唯一区别就是，LESS使用@，而Sass使用$。同时还有一些作用域上的差别，我们后面会介绍。
-
条件语句和控制
这是一个很强大的功能，也是LESS不支持的功能。使用Sass，你可以使用if{}else{}这样的条件语句，以及for{}循环语句，他甚至还支持and、or和not，以及<、>、<=、>=和==等操作符。 /* Sass中简单的if语句 */ @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; } /* Sass中简单的for循环语句*/ @for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } } -
作用域区别
作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。 -
输出格式
- 然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。
-
默认变量sass的默认变量仅需要在值后面加上!default即可。
//sass style //------------------------------- $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style //------------------------------- body{ line-height:1.5; } sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可 //sass style //------------------------------- $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style //------------------------------- body{ line-height:2; } -
特殊变量
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。 //sass style //------------------------------- $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style //------------------------------- .border-top{ border-top:1px solid #ccc; } body { font: 12px/1.5; } -
多值变量
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。 list list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可） 定义 //一维数据 $px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px); 使用 //sass style //------------------------------- $linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值 a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); } } //css style //------------------------------- a{ color:#08c; } a:hover{ color:#333; } map map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可） 定义 $heading: (h1: 2em, h2: 1.5em, h3: 1.2em); 使用 //sass style //------------------------------- $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css style //------------------------------- h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } -
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下： //sass style //------------------------------- .fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } } //css style //------------------------------- .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; } 当然这只是个属性嵌套的例子，如果实际这样使用，那估计得疯掉。 -
@at-root
sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。 普通跳出嵌套 //sass style //------------------------------- //没有跳出 .parent-1 { color:#f00; .child { width:100px; } } //单个选择器跳出 .parent-2 { color:#f00; @at-root .child { width:200px; } } //多个选择器跳出 .parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } } } //css style //------------------------------- .parent-1 { color: #f00; } .parent-1 .child { width: 100px; } .parent-2 { color: #f00; } .child { width: 200px; } .parent-3 { background: #f00; } .child1 { width: 300px; } .child2 { width: 400px; }
变量声明
- less变量声明通过@+变量名，后面跟css类型的值或其他变量的值；