css预处理器

一. 为什么会出现css预处理器

CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品，于是css预处理器就作为css的扩展，出现在了前端技术中。

二.常见的css预处理器

发展至今，CSS预处理器的技术已经相当成熟，也涌现出了很多中不同的CSS预处理器语言。目前主流的有三种：Sass(Scss), Less, Stylus。

三.CSS预处理器的方便之处

–以Sass为例

–Sass主要的功能有：允许定义变量，允许CSS代码嵌套，函数功能，Mixin，继承等。 这些功能使得编写CSS更加贴合编程语言的习惯，使得CSS代码复用性更高，代码功能更加直观，也更加易于程序员的阅读与维护。

四.sass

它是一个通过转换scss 的 css文件，文件后缀名：.scss。

sass有两种语法形式

首先是scss，也就是我们这个后缀形式的语法，是最新的一种形式。这种格式在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器专属前缀语法，这种语法的样式表文件需要以 .scss 作为拓展名。

另一种，也是最早的语法，被称为缩进语法。它提供了一种更加简洁的方式来书写CSS。它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异。使用此种语法的样式表文件需要以 .sass 作为扩展名。

主要功能

• 可以使用变量、常量；

• 允许css代码嵌套；

• 混入Mixin；

• 继承；

• 循环语句等功能。

这些功能使得编写css更加贴合编程语言的习惯，从而更有效有弹性的写出CSS

1.变量（Variables）

变量的提供，可以避免由于设计师频繁更改某一全局属性（比如整体颜色风格），而引起的被动增加工作量问题。

变量的使用：以$开头，有全局变量和局部变量。

sass的变量必须是$开头，后面紧跟变量名，变量值和变量名之间需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

$bgColor: #ffffff; // 全局变量
div { 
  $width: 1000px; // 局部变量
  width: $width;
  background: $bgColor;
}

变量用在属性中

变量用在属性中，需要写在#{ }中，如下：

$posi: left;
div { 
  border-#{$posi}: 1px solid $color;
}

2.嵌套（Nesting）

Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，会更加直观。包括选择器嵌套，属性嵌套。

选择器嵌套

选择器嵌套：在一个选择器中嵌套另一个选择器来实现继承，增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器，示例如下：

scss

#top_btn{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

css：

#top_btn{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_btn li{
  float:left;
}
#top_btn a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_btn a:hover{
  color:#ddd;
}

属性嵌套

除了选择器可以嵌套，属性和伪类也可以嵌套。

属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

示例：

.main-container {   
	&-top {  // 选择器嵌套     
		background {      
 			color: red;   //属性嵌套    
 		 }    
  	&:hover {  // 伪类嵌套      
    		color: green;   
      }  
  }
 }

 3.混合（Mixins）

Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。

例如：某段CSS样式经常要用到多个元素中，在CSS预处理器语言中，可以为这些公用的CSS样式定义一个Mixin，然后在需要使用这些样式的地方直接调用定义好的Mixin。

这是一个非常有用的特性，Mixins 被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

声明的@mixin通过@include来调用。

无参数mixin：

@mixin center-block {   
	 margin-left:auto;    
	 margin-right:auto;}
	 .btn{    
	 @include center-block;
}

 css：

.btn{    
	margin-left:auto;    
	margin-right:auto;
}

 有参数mixin：

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，也可以给参数设置默认值。

scss：

@mixin theme($theme: red) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;//参数使用默认值
}
.alert {
  @include theme($theme: red);
}
.success {
  @include theme($theme: green);
}

4.继承（Extend/Inheritance）

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用继承就显得很有用。 

 sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，使用关键词@extend，后面紧跟需要继承的选择器。

占位符%，如果不被extend引用，它是不会被编译，也就是：不会占用css文件大小。这是和继承最大区别。

scss：

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 未被继承，不会打印出来
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

css：

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

5、控制指令 

1.if()三元运算符

表达式：if(expression, value1, value2)

p {
    color: if(1 + 1 = 2, green, yellow);
}

// compile:
p{
    color: green;
}

 2.@if条件语句

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

// 1.单@if
p {
    @if 1 + 1 == 2 {
        color: red;
    }
}
// compile:
p {
  color: red;
}


// 2.@if - @else
p {
    @if 1 + 1 != 2 {
        color: red;
    } @else {
        color: blue;
    }
}
// compile:
p {
  color: blue;
}


// 3.@if - @else if - @else

$age: 19;
p {
    @if $age == 18 {
        color: red;
    } @else if $age == 19 {
        color: blue;
    } @else {
        color: green;
    }
}
// compile:
p {
  color: blue;
}

3.@for循环语句

@for $var from <start> through <end>
@for $var from <start> to <end> 

through 和 to 的相同点与不同点：

• 相同点：两者均包含<start>的值
• 不同点：through包含<end>的值，但to不包含<end>的值

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

// compile:
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

 4.@while循环语句

表达式：@while expression

@while 指令重复输出格式直到表达式返回结果为 false。 

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
// compile:
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }

 5.@each循环语句

表达式：$var in $vars

$var 可以是任何变量名 

$vars 只能是Lists或者Maps

 scss:

$colors: red, violet, yellow, blue;
@each $color in $colors {
  .p_#{$color} {  
  background-color: #{$color}; 
  }
  }

css:

.p_red {
  background-color: red;
}

.p_violet {
  background-color: violet;
}

.p_yellow {
  background-color: yellow;
}

.p_blue {
  background-color: blue;
}

6、运算  

数字运算符：数字的加减乘除、取整等运算 (+, -, *, /, %)

关系运算符：< , > , <= , >=

相等运算符：==, !=

布尔运算符：支持布尔型的 and or 以及 not 运算

五.less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

 1.注释

/* 这是在编译过后css中仍然保留的注释 */

// 仅仅在less中可见的注释

2.变量 

 用 @ 去声明一个变量，变量的值可以是数字，颜色，或其他样式值

例如： @themeColor: #e9232e;

变量插值

变量也可以在其他地方使用，例如选择器名称、属性名称、URL 和@import语句，以@{}的方式。

选择器：

//less中

@my-selector: banner;

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



//css中

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

 网址：

@images: "../img";

body {
  color: #444;
  background: url(https://blog.csdn.net/"@{images}/white-sand.png");
}

属性：

//less

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}



//css

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

变量定义变量：

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}



//css

.section .element {
  color: green;
}

3.& (父选择器) 

&运算符表示嵌套规则的父选择器，最常用于将修改类或伪类应用于现有选择器时： 

a {
  color: blue;
  &:hover {
    color: green;
  }
}



//css

a {
  color: blue;
}

a:hover {
  color: green;
}

 4.混合（mixin ）

1.使用方法：可以混合使用类选择器和 id 选择器 

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}


//css

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

2.如果您想创建一个 mixin，但又不希望该 mixin 出现在您的 CSS 输出中，请在 mixin 定义之后放置括号。

.my-mixin {      //没带括号，会编译在css中
  color: black;   
}
.my-other-mixin() {   //带（），不会编译
  background: white;
}
.class {
  .my-mixin();
  .my-other-mixin();
}


//css

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

3.Mixins 也可以接受参数，这些参数是在混合时传递给选择器块的变量。

4.重载mixin

定义多个具有相同名称和参数数量的 mixin 是合法的。Less 将使用所有可以应用的属性。如果你使用带有一个参数的 mixin，例如.mixin(green);，那么所有带有一个强制参数的 mixin 的属性都将被使用：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color, @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color, @padding, @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}


//编译结果
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

 5.@arguments变量

@arguments在 mixin 中具有特殊含义，它包含调用 mixin 时传递的所有参数。如果您不想处理单个参数，这很有用：

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px, 5px);
}



//css

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

 6.递归混合

在 Less 中，mixin 可以调用自己，创建循环。

例：使用递归循环生成 CSS 网格类

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}



//css

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

 5.嵌套

// less： 
    ul {
        padding: 0;
        li {color: #e4e4e4;}
        a {text-decoration: none;}
    }
// css：
    ul {padding: 0;}
    ul li {color: #e4e4e4;}
    ul a {text-decoration: none;}

 六.后处理器之postcss

PostCSS本身是一个功能比较单一的工具，它提供了一种方式用JavaScript代码来处理CSS。利用postCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等。（这里我们在进行一个工程化的处理叫做postCSS，webpack也是用于进行工程化的处理打包等）

安装：

1.安装node环境   然后命令行窗口输入node -v查看node是否安装成功，成功的话会输入node的版本号

2.然后在命令行窗口输入nmp  install  postcss-cli  -g以安装postcss-cli

3.-o （用于将css工程化，如 postcss  src/demo.css  -o  dist/demo.css )、

  -w（事件监听，指转换前的css通过保存后，转换后的 css也会跟着改变，而不用时时刻刻去命令行窗口通过-o来进行转换。在工  程化的后面加上 -w即可，要退出的话ctrl+c按两下即可退出）

4.postcss.config.js（配置文件，配置我们要使用的插件）

PostCSS常用插件

autoprefixer:（指给浏览器自动添加前缀）

postcss-import：（将CSS进行合并操作）

cssnano：（对CSS进行代码压缩处理）    cnpm  i  插件名  

postcss-cssnext：（处理比较高级的CSS代码，即把CSS降级以适用低浏览器）

stylelint：（语法检测插件）

postcss-sprites：（自动生成精灵图即雪碧图）
 

实现与 SASS、LESS、Stylus 相同的功能

 通过插件：

• postcss-each

• postcss-for

• postcss-mixins

• postcss-extend

七.rem适配布局 

1.rem单位 

rem: (root em),rem是css中的一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,区别于em,em是相对于父标签元素 。

rem优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的控制整个页面的元素大小比例。

2.媒体查询（mediaQuery）

 Media Query能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

①用@media开头

②mediatype 媒体类型

③关键字 and not or only

④media feature 媒体特性 （用小括号包含）

@media 媒体类型 and （媒体特性）{

样式代码

}

媒体类型：

all：用于所有设备

print：用于打印机或者打印预览

screen：用于电脑屏幕，平板，智能手机等

媒体特性：每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

width：定义输出设备中页面可见区域的宽度

min-width：定义输出设备中页面最小可见区域的宽度 

max-width：定义输出设备中页面最大可见区域的宽度 

3.媒体查询+rem实现元素动态大小变化 

rem单位是跟着html来走的，有了rem，页面元素可以设置不同大小尺寸。

媒体查询可以根据不同设备宽度来修改样式。

两者结合就可以实现不同设备宽度，页面元素大小的动态变化。

4.rem适配方案 

1.less + 媒体查询 + rem

2.flexble.js + rem 

5.vh和vm

vw/vh是一个相对单位（类似于em,rem)

• vw：viewport width 视口宽度单位
• vh：viewport height 视口高度单位

 相对视口的尺寸计算结果

• 1vw = 1/100视口宽度
• 1vh = 1/100视口高度

注意：和百分比是有区别的，百分比时相对于父元素来说得，而vw和vh总是针对于视口来说的。 

虽然两个单位表示了两个方向作为参考依据，但是一般的时候使用的vw而不是使用vw和vh一起使用，因为在推动窗口的时候希望按比例缩放的

八.CSS动画 

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

css3动画分两步：创建动画，绑定动画

1.@keyframes 规则 

如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。 

通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成））

也可以使用百分比值，通过使用百分比，可以根据需要添加任意多个样式更改。 

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

2.animation属性

用于对动画进行捆绑。

animation-name 动画名称 

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

3.CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

属性详情及实例点这里 

4.动画简写属性

下例使用六种动画属性

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用简写的 animation 属性也可以实现与上例相同的动画效果：

div {
  animation: example 5s linear 2s infinite alternate;
}

 5.过渡属性实现动画效果

下表列出了所有 CSS 过渡属性：

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

 transition-property属性值:

• none -表示没有过渡属性
• all - 表示所有变化的属性都过渡
• 属性名 - 使用具体的属性名，多个属性名中间逗号分隔

transition-timing-function 属性值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

简写的 transition 属性： 

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}


//简写

div {
  transition: width 2s linear 1s;
}

 过渡 + 转换

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 2s linear 1s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

九.CSS之BEM命名规范 

1.什么是BEM 

BEM是Block（块）、Element（元素）、Modifier（修饰符）的简写，是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。使用BEM主要是为了将用户界面划分成独立的块，使开发更为简单和快速，有利于团队协作，方便维护。 

2.为什么要选择BEM 

很多新手在开始写网页时，在命名方面可能都比较随心所欲。但是在一个正式的项目中，会有很多开发人员同时进行开发，如果每个开发人员都用自己的一套命名，这样会造成命名的识别度和一致性成为很大的问题，还会造成命名污染。这时使用BEM命名方法就可以很好的解决这个问题。

当然使用BEM还有很多其他的好处，例如每个块之间都是独立的，因此不会遇到层叠带来的问题。且这些块可以多次重用，可以减少必须维护的css代码量等。

3.BEM命名规则 

• 块名称与元素名称之间用双下划线__分隔。
• 块名称与修饰符或元素与修饰符之间用双连字符--分隔。
• 命名一般使用小写字母。
• 单词之间可以使用-分隔。

例如：

.block{}
.block__element{}
.block--modifier{}
.block__element{}--modifier{}