17--在rails中使用scss

Posted 2020-06-14

在上节课我们rails中使用coffeescript虽然有问题，但是这个跟系统是windows估计有关，不过我们可以先用每个页面去写普通的script标签就行了。下面讲解css样式在网页开发中的作用，因为我们前面只是简单的html页面代码所以页面就很简陋，而为了提高用户体验美化页面就用到了css样式，下面我们讲解一般的css使用：

我们以sessions控制器的new也就是登陆页面为例：

我们插入css代码使得表单能够在屏幕居中显示，也就是把class为col-md-6的div大标签居中就行，跟普通的script一样也是在末尾添加标签写入内容：

可以看到登陆的表单那行在页面居中了：

与使用coffeescript一样，Rails框架当然还有对css更高级的封装，用法原理类似，都是自动生成对应控制器的scss样式文件我们在该样式文件写入代码那么对于控制器视图就有效果（也就是把视图页的样式代码分离出来写在scss文件，并且一个控制器可以有多个有视图对应的action，那么多视图文件的样式代码只要写在同一个scss文件中就行），而scaffolds.scss是对应脚手架的样式文件。

文件后缀不是css而是scss，讲scss之前我们先来讲sass：

sass就是sass就是css的一种更高级封装，它在css基础上增加了很多css原来不具备的特性(比如嵌套、变量、混合、选择器继承等等，比如传统的css就不能定义变量)，使用它能大幅提高效率， 服务器执行时会将sass代码生成css语句，也就是说最终执行的还是css代码，而scss就是sass的新语法。

选择器继承就能大幅提高效率，比如选择器.col-md-6就是定位到视图中的标签节点，那么我们给它的下一级节点添加样式（里面的form_for就是它的下一级子节点）书写代码如下（需要每次将它的父节点.col-md-6写出来，多个子节点就要写多次，很麻烦），然后在里面添加css代码：
					

那么怎么办呢？我们打开sessions的scss文件如下：

删除页面添加的css代码，我们在scss文件里面写上css代码，

IDE左边红色是智能地提示颜色，不是错误提示。

结果如下，表单居中，且子节点form(form_for是rails对form标签的更高级封装，本质上就是form标签)的字体颜色变成红色：

可以看到可以把样式代码添加到scss文件中，不需要<style type="text/css">   </style>这样的标签去包围起来，但是我们刚才说了，添加子节点样式的时候还写出父节点.col-md-6还是很麻烦，所以rails中有更简洁的写法如下（既然是子节点那么直接嵌套父节点里面更快）：
				

这样代码就简洁多了，而且从嵌套关系也能很明白地看出父子节点关系。这样scss基本的使用就是这么简单，比coffeescript更简单点。

?