wp-single.php 修改不同语言下css_【第十一课】初尝CSS的预处理器

前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

---

一、这次将要执行的任务

用sass或less重写，并编译

---

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能？

SASS或LESS：它们的方法基本类似， 将类似CSS但是更为强大的输入语言，最终转换为CSS代码。

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案？

在Web开发中，CSS的使用是非常普遍的，但滥用的情况也是屡见不鲜，而使用less或sass重构代码，可以帮助开发者写出复用性更优的CSS文件

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成？

了解SASS/LESS的基本特性：可以试用变量，可以将选择器内嵌到其他等级，允许使用混合类型，支持简单的算术操作。

4.做这个任务设置了哪些具体步骤，为什么这么设计？

这个任务本身没有什么难度，但可以通过重构以前的代码来加深自己对代码规范代码更佳实践的理解。并且熟悉一种到两种CSS的预处理器，用更精简的语法表达更多的意思，提高工作效率。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料？

在写sass或less的过程中还是当做在写css，忘记使用它们的特性，这样就失去了使用预处理器的意义了。以及不要太过纠结于到底选择sass还是less，花1天时间去做选择不如花1天时间先随便学一门。

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订？

代码规范，没有BUG，响应不同分辨率，兼容现代浏览器如chrome、firefox、safari等，IE浏览器则需要兼容到IE10以上。

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间？

我们认为这个任务非常简单，主要在于学习预处理器语言，大概需要12个小时即可完成。对这方面本来就有基础或者是学习能力特别好的好人可能只需6个小时，而理解速度较慢的同学可能要花费24多个小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，应该没什么特别困难的地方，希望所有人都能完成任务。

---

三、学习任务之前要先学会哪些知识点

1.sass是什么

在学习sass之前首先来回顾一下css是什么，css是一门非程序的描述性语言，它没有变量没有函数没有作用域，需要大量书写看似毫无逻辑而且重复的代码，极其不方便维护和扩展，也难以复用。为了解决这些问题，出现了一些css的预编译语言，对css进行了扩充。

sass是css的预处理器，它提供了许多便利的写法方法，可以使用变量，常量，嵌套，函数，混合，继承等功能，让css的开发变得更加简单可维护。

直接写出来的sass文件其实就是普通的文本文件，以.sass或.scss作为文件后缀名，里面可以直接使用css语法以及sass特有的语法特性，完成后通常需要经过编译成合法的css文件以供浏览器使用。同样类似的工具还有less，stylus等等，通常这些东西都非常简单，我们只需要选择性的学习其一就足以应付未来的工作和学习，如果确实需要，那么再选择性的学习其他的也没任何难度，可以随时放心食用。

2.变量

有编程经验的人可能对变量并不陌生，只需要定义一个变量，然后为其赋值，就能四处复用它。这在css总意味着不用在重新写无数个一样的16进制颜色，要修改时只需要在变量定义的地方进行修改就可以全局修改，减少了少改漏改产生的问题。

变量的定义是以$符号开头，加上变量名，比如：

$text-warning: red;
$border-radius: 5px;


.tip {
    color: $text-warning;
    border: 1px solid $border-radius;
}

变量也可以通过加减乘除等运算符号进行计算，比如：

$font-base: 10px;


.article {
    font-size: $font-base * 2 - 4px;
    border-width: $font-base / 10;
}

变量还有一种特性就是可以使用#{}这个符号来将变量名插入到属性名或者选择器上：

$side: bottom;
$radius: 5px;


.leading-#{side} {
     margin-#{side}: 10px;
    border-radius: $radius;
}

另外值得注意的是：1、变量需要提前声明才能使用，因为编译是从上往下进行的，如果在还未声明变量的地方使用，会找不到这个变量。2、变量都是全局变量，如果在大括号内部定义的变量则属于局部变量。

3.嵌套

曾经有一个问题困扰过我一段时间，就是在写多媒体查询时的代码，究竟应该放在css文件中的什么位置上。以前我选择放在样式表的最后，为不同的屏幕宽度专门拿出一块区域来写这部分代码。但这样做的问题是在于，这些样式规则就和原始的规则分开来了，维护起来会比较烦人。

但还好后来有了sass，它的嵌套规则让我可以通过在原始规则中放媒体查询来解决这个问题，这样可以把它相关的所有规则放在一个地方，这样阅读和维护都变得更容易，不用上下反复查看了。

通常所用到的选择器嵌套是这样的，将新的选择器放到父级选择器当中，并且可以无限多级嵌套：

.nav {
    width: 100%;
    height: 2rem;
    ul {
        list-style: none;
    }
    li {
        float: left;
        a {
            color: gray;
        }
    }
}

如果想将多媒体查询部分放到其中：

.nav {
    width: 80%;
    height: 2rem;
    ul {
     list-style: none;
 }
    li {
     float: left;
     a {
      color: gray;
     }
    }
    @media only screen and (max-width: 798px) {
        width: 100%;
        height: 1.8rem;
        li a {
            color: black;
        }
    }
}

另外除了选择器之间可以嵌套外，属性也是可以嵌套的：

.box-border {
    border: {
        style: solid;
        left: {
            width: 1px;
            color: red;
        }
        right: {
            width: 3px;
            color: green;
        }
    }
}

4.继承

如果存在两个class，他们有一些不同但又有许多相似之处，以前的做法可能是把所有样式重复声明两次，但是有sass之后更好的做法是创建一个基础的class，然后在第二个class中用@extend继承它，同时还可以添加一些额外的样式，或者对某些样式进行重写。

比如我们之前学过bootstrap的按钮的构建思想，是对基础样式进行附加和重写，而现在想要定义自己的样式时就可以很方便地进行这一操作了。首先声明一个标准样式的class，然后继承这个样式，然后设置不同的主题色：

.btn {
    padding: 5px;
    border-radius: 5px;
    background: #eee;
    color: #999;
    outline: none;
}
.btn-cancle {
    @extend .btn;
    background: #fff;
    color: gray;
}

5.混合

当出现大段大段重用样式代码时，独立的变量就难以应付，这个时候可以通过sass的混合器@mixin 和 @include 实现大段样式的重用。在定义mixin时，需要在前面添加@富奥，使用时需要用@include来引用该@mixin：

@mixin boxs { 
    $side: top; 
    $radius: 5px; 
    $gap: 10px; 


    border-radius: $radius; 
    margin-#{side}: $gap;
} 
.article { 
    @include boxs; 
} 
.section { 
    @include boxs; 
} 

混合器还可以传入参数，并设置默认值：

@mixin boxs($side, $radius: 5px, $gap: 10px) {
    border-radius: $radius;
    margin-#{side}: $gap;
}
.article {
    @include boxs(top);
}
.section {
    @include boxs(bottom, 10px, 0px);
}

6.导入

导入规则可以从外部文件导入mixin混合器等等。

在sass中有一个命名惯例，被导入的样式文件名用下划线做前缀。导入的语法是@import “xxx”，这里的xxx不需要带文件后缀和下划线前缀。也就是说导入“_text.sass”或者“_text.scss”的时候，只需要写@import “text”就可以了：

@import “boxs”; 


.article {
    @include boxs(top);
}
.section {
    @include boxs(bottom, 10px, 0px);
}

7.控制语句

在sass中还有一些和编程语言一样的控制语句，通过一些条件来限制样式内容。如果有过编程经验的人对下面这几种语句一定相当熟悉，几乎不用学习只需要看一眼就知道是怎么使用的，当然我们这里还是看一眼它们的例子。

条件语句使用@if：

.nav { 
    @if $width/$item > 200 { 
        margin-right:0; 
    } 
    @if  $width/$item <= 200 { 
        margin-right:20px;
    }
} 

循环语句使用@for:

@for $i from 1 to 10 { 
    .box-#{i} { 
        height: $i * 10px; 
    } 
} 

还有@while:

$i: 1; 
@while $i < 10 { 
 .box-#{i} { 
        height: $i * 10px;
    }
    $i: $i + 1;
} 

以及@each:

@each $item in img1,img2,img-circle,img-square { 
    .icon-#{$item} { 
        background-image: url(“/images/#{$item}.jpg”); 
    } 
} 

---

四、开始动手做吧

1.（环境搭建）观察任务描述，揣摩开发要点（0.5小时） 
2.（环境搭建）配置本地nginx，本地启动服务器通过配置的域名访问新创建的页面（1小时） 
3.（知识学习）选择less或sass中的一门进行学习（10小时） 
4.（编码实战）使用less或sass重新写页面（2小时） 
5.（编码实战）写完后反复检查是否有遗漏可以提炼使用预处理器语言特性的地方（2小时） 
6.（代码重构）根据代码规范优化自己的代码（1小时） 
7.（环境搭建）上传到学员服务器（0.5小时） 
8.（代码调试）使用不同设备访问网址查看页面（0.5小时） 
9.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 
10.（思考答疑）写日报总结学到的知识点和难点是如何解决的，完成后提交审核（1小时） 
11.（JS前期准备）自己查找Http的相关概念，协议，端口，路径，参数，Header，Cookie，Request，Response，错误代码（2小时） 

---

五、验收自己的成果

1.写、维护、修改都在less文件中进行
2.自行找资料解决代码的编译问题
3.自适应布局
4.配置nginx能在pc和手机端访问

---

六、来做一次深度思考

1.如何使用less? 点击查看相关小课堂
2.如何使用sass? 点击查看相关小课堂
3.less和sass有什么区别？ 点击查看相关小课堂
4.如何使用gulp编辑less？ 点击查看相关小课堂

---

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来