17--在rails中使用scss

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

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

17--在rails中使用scss_第1张图片

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

17--在rails中使用scss_第2张图片

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

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

17--在rails中使用scss_第3张图片

17--在rails中使用scss_第4张图片

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

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

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

17--在rails中使用scss_第5张图片

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

17--在rails中使用scss_第6张图片

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

17--在rails中使用scss_第7张图片

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

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

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

17--在rails中使用scss_第8张图片

 

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

 

你可能感兴趣的:(17--在rails中使用scss)