less、sass样式编程

less，sass都是 是css样式预处理器，写法方便，高效。

less

1、变量

通过@定义变量

@width: 100px;
@height: 100px;
.div {
	width: @width;
	height: @height;
}
属性变量，需要通过 {} 引用
@property: color
.div {
	// 变量插值
	@{property}: #fff;
	background-@{property}: #fff;
}

图片路径或地址公共部分变量
@imageRoot: '../image';
.div {
	background-image: url('@{imageRoot}/banner.png');
}

变量的变量 双@
@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

$prop您可以使用语法轻松地将属性视为变量。
.widget {
  color: #efefef;
  background-color: $color;
}

2、混合

抽出公共样式，封装成单独样式累

1、less
混合写法：把一个选择器的名放到另一个样式中
.class {
	text-align: center;
	font-size: 12px;
}
.div {
	width：100px;
	height: 100px;
	.class;
}
// 带参数
.color(@color) {
	color: @color;
}
.div {
	width: 100px;
	.color(#fff);
}
// 默认值参数
.color(@color: #fff) {
	color: @color
}
.div {
	width: 100px;
	.color();
	.color(#fff);
}
// 多参数
.border(@w: 10px, @style: solid, @color: #fff) {
	border: @w @style @color;
}
.div {
	.border(@w: 20px);
	.border(@w: 20px, @color: #000);
	.border(@w: 20px, @style: dotted, @color: #eee);
}
// 兼容多个浏览器样式
.class(@x: 0, @y: 0, @area: 5px, @color: #fff) {
	-webkit-box-shadow: @x @y @area @color;
	-moz-box-shadow: @x @y @area @color;
	-ms-box-shadow: @x @y @area @color;
	box-shadow: @x @y @area @color;
}
@arguments
.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
// 混合后面加括号不会编译到css中

3、 匹配模式

参数当做条件，根据不同的参数引入不同的样式
三角形
// 朝上
.triangle(top, @w, @color) {
 	border-width: @w;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
}
// 朝下
.triangle(bottom, @w, @color) {
 	border-width: @w;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
// 朝左
.triangle(left, @w, @color) {
 	border-width: @w;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}
// 朝右
.triangle(right, @w, @color) {
 	border-width: @w;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid;
}
// 公共样式，需要放到下面这个class里，第一个参数是固定的格式（@_），后面的参数与上面的保持一致。
.triangle(@_, @w, @color) {
	width: 0;
	height: 0;
	overflow: hidden;
}


.div1 {
	width: 0;
	height: 0;
	overflow: hidden;
	.triangle(top, 10px, red);
}

..div2 {
	width: 0;
	height: 0;
	overflow: hidden;
	.triangle(right, 10px, red);
}

4、 嵌套

div {
	width: 100px;
	height: 200px;
	p {
		border:1px solid red;
	}
	// & 代表所在当前元素
	& {
		border: 1px solid red;
	}
	// 伪类
	&:hvoer {
		color: red
	}
	&::before {
		content: ''
	}
}

5、 运算

运算符  +、-、*、/; 可以对任何数字、颜色或变量进行运算
+ - 默认单位换算
* / 不做单位换算
@w: 300px;
div {
	width: @w + 100;
}
// 颜色
@color: (#224488 / 2); // 除法必须放在括号里
background-color: #112244 + #111;
// calc() 计算变量和数学公式的值
@var: 50vh/2;
width: calc(50% + (@var - 20px)); 

6、转义

使用任意字符串作为属性或变量值或者不希望less进行编辑
如
div {
	filter: alpha(opacity: 50); // 在less下回报错
	改为
	filter: ~'alpha(opacity: 50)';
}
如
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
从 Less 3.5 开始，可以简写为
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

7、 映射

#colors {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
通过#声明，通过[]引用
注意 混合是 . ,映射是 #

Sass

1、变量

通过 $ 声明变量
$highlight-color: #F90;

中划线或下划线声明变量是相同
$link-color: blue;
a {
  color: $link_color;
}
通过添加 !global 将局部变量转化为全局变量
a {
  $link_color: red !global;
}

通过 #{} 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

2、嵌套

与less相似
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

属性嵌套
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

3、混合器

与less中的混合作用一样
混合器使用@mixin标识符定义,通过@include来使用这个混合器
// 定义
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  // 调用
  @include rounded-corners;
}

混合器传参
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}
或 通过指定参数名
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

4、继承

通过@extend实现
承是基于类的，承应该是建立在语义化的关系上
继承也可以继承一个html标签
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
继承 a 标签
.seriousError {
  @extend a;
  border-width: 3px;
}

less与sass的区别

1、Less在JS上运行，Sass在Ruby（一种简单快捷的面向对象（面向对象程序设计）脚本语言）上使用。

2、编写变量的方式不同。
Sass使用$，而Less使用@

3、在Less中，仅允许循环数值。
在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

4、Sass有Compass（搜索引擎），Less有Preboot（Preboot 是一套完整且灵活的 LESS 工具集）