less sass

标签：

一、less

  1. 注释

// 单行注释，不会作为最终输出
/* 
    多行注释，以原生CSS的/*注释....*/形式作为最终输出
 */
 2. 变量(Variable)

     Less中的变量有以下规则：

1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
2. 没有先定义后使用的规定；
3. 以最后定义的值为最终值；
4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5. 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6. 存在作用域，局部作用域优先级高于全局作用域。

 @color: color;
  @dialog: .dialog;
  @suffix: fix;
  // 空格将被忽略，若要保留空格则需要使用单引号或双引号
  @hi: ‘hello ‘;
  @dear: there  ;
      
  .dialog{
  　　// 用于 rule属性部件，必须使用"@{变量名}" 的形式
     background-@{color}: #888;
     // 用于 rule属性，必须使用"@{变量名}" 的形式
     @{color}: blue;
  }
  // 用于 选择器，必须使用"@{变量名}" 的形式
  @{dialog}{
     width: 200px;
  }
  @{dialog}::after{
     content: ‘: @{hi}@{dear}!‘;    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
  }
  @h: 1000px;
  // 用于 选择器部件，必须使用"@{变量名}" 的形式
  .ie-@{suffix}{
  　　@h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
     height: @h; // 用于 属性值，两种形式均可使用
     line-height: 30px;
  }
      
  // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
  // 2. 没有先定义后使用的规定；
  @dialog-border-color: #666;
  @dialog-border-width: 10px;
  @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

.dialog {
  background-color: #888;
  color: blue;
}
.dialog {
  width: 200px;
}
.dialog::after {
  content: ‘: hello there!‘;
}
.ie-fix {
  height: 30px;
  line-height: 30px;
}

二、SASS

1 变量

SASS允许使用变量，所有变量以$开头。

$blue : #1875e7;　
div {
　color : $blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}

2计算功能

SASS允许在代码中使用算式：

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

3 嵌套

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

SASS允许选择器嵌套。比如，下面的CSS代码：

.car .bwm {
　　　　color : red;
}

.car  {
     .bwm{
           color : red;
     }
}

less sass

标签：

原文地址：http://www.cnblogs.com/Jiangyi1988/p/4660219.html