less

概念

less 官网 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

基本的使用

嵌套写法
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

总览

1. 变量 @

变量是延迟加载的，不必在使用前声明。所以可以先使用，后定义。因此会出现后面定义的变量覆盖前面的变量

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

2. 可变插值

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

//编译后
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

3.混合（类似函数的使用）

.b-coloe {
    border: 4px solid red;
}
.box {
    .b-coloe();
    width: 100px;
    height: 200px;
    background-color: blue;
}
//编译后
.b-coloe {
  border: 4px solid red;
}
.box {
  border: 4px solid red;
  width: 100px;
  height: 200px;
  background-color: blue;
}

4.父选择器&

经典的清除浮动案例
.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
//编译后
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

5.嵌套的冒泡

思路：就近原则

 .component {
    width: 300px;
    @media (min-width: 768px) {
      width: 600px;
      @media  (min-resolution: 192dpi) {
        background-image: url(/img/retina2x.png);
      }
    }
   .box {
    @media (min-width: 1280px) {
        width: 800px;
      }
   }
  }
//编译后
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component .box {
    width: 800px;
  }
}

6.运算（符合数学运算）

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

calc() 特例为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。符号必须有空格

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

转义符，原样输出 ~"anything" 或 ~'anything'，可省略 ~

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
编译为：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

7.函数

简单使用
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

sass

概念

sass 中文官网 Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
特点完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能通过函数进行颜色值与属性值的运算提供控制指令 (control directives)等高级功能自定义输出格式
语法

1.嵌套写法，文件名要是.scss
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
2.缩进写法，这是最早的sass写法
#header 
  color: black;
  .navigation 
    font-size: 12px;
  
  .logo 
    width: 300px;

4.变量的定义

$符
$width: 5em;

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器

$color:red;
.box {
    //这里指.box
    &:hover {
        background-color: $color;
    }
    .son {
          width: 100px;
          height: 100px;
          background-color: burlywood;
          //这里指 .son
          &:hover {
              background-color: blueviolet;
          }
          p {color:$color;
			  //这里指 p
	          &:hover {
	              background-color: blueviolet;
	          }
			}
      }
    span {color: #000;}
    h3 {color: #c6c5c6;}
}

5. 属性嵌套 有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//编译为
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
 }

注释有 /**/ // 。 //是不会编译出来

SassScript

数据类型

数字1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2) 2.运算 2.1 数字运算 SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

除法需注意的地方

如果值，或值的一部分，是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
//编译为
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

函数 SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

p {
  color: hsl(0, 100%, 50%);
}

p {
  color: #ff0000; }

指令

@import 导入文件

注意 1.但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。 2. 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。

2.@media和在css中使用一样，如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
//编译为
.sidebar {
  width: 300px;
   }
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
      }
 }

3.@extend 继承样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
表示的是.error的样式被.seriousError继承了

混合指令（与JavaScript中的函数相似）

1. 定义 混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

简写为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，

    //定义
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

2.引用

1.定义之后，在父元素中引用编译
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
//编译后
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
  2.直接定义后编译（就像是函数的调用一样）
  @mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
//编译后
a {
  color: blue;
  background-color: red; }

函数指令

定义函数@function name($n){} 调用 name(5)

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
编译为

#sidebar {
  width: 240px; 
  }

less 与 sass的区别

区别

1.语法不同

sass有两种语法格式
 

 1. 以.scss为后缀名的嵌套写法
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//-----------编译后
nav {
  width: 100px;
  color: #F90;
}
 2. 最早的缩进语法
 nav 
    width:100px;
    height:100px;
 编译后也是一样的

less的语法格式嵌套写法
  #header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

2.变量的声明不同

sass使用 $
$highlight-color: #F90;

less使用 @
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

3.Mixin不同

sass的用法与JavaScript的函数是一样的，定义后直接使用 @include调用

  @mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
//编译后
a {
  color: blue;
  background-color: red; }

less就是定义一个类，然后直接当函数使用(less不提供定义函数)

.b-coloe {
    border: 4px solid red;
}
.box {
    .b-coloe();
    width: 100px;
    height: 200px;
    background-color: blue;
}
//编译后
.b-coloe {
  border: 4px solid red;
}
.box {
  border: 4px solid red;
  width: 100px;
  height: 200px;
  background-color: blue;
}

less，sass基本用法。不要只会嵌套写法了