引入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类型的值或其他变量的值；
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
