17--using Scss in Rails

In the last lesson we used coffeescript in rails, but this is related to the system's windows estimates, but we can start with each page to write the normal script tag. The following is the role of CSS style in web development, because we are just a simple HTML page code so the page is very humble, and in order to improve the user experience to beautify the page to use the CSS style, below we explain the general CSS use:

Let's take the sessions controller's new, landing page as an example:

We inserted the CSS code so that the form can be centered on the screen, that is, the class is the col-md-6 div large tag centered on the line, as normal script is also at the end of adding tags to write content:

You can see the logged in form that line is centered on the page:

Like the use of coffeescript, the rails framework, of course, has a more advanced encapsulation of CSS, similar in usage, Scss style files that are automatically generated for the corresponding controller we write the code in the style file so it works for the controller view (that is, the style code of the view page is separated out and written in the Scss file, and a controller can have more than one action with the view corresponding to it. As long as the style code of the multi-view file is written in the same scss file, the scaffolds.scss is the style file of the corresponding scaffold.

The file suffix is not css but scss, scss before we say sass:

Sass is sass is a more advanced package of CSS, it added a lot of CSS on the basis of the original features (such as nesting, variables, hybrid, selector inheritance, etc., such as traditional CSS can not define variables), using it can greatly improve efficiency, The server executes the SASS code to generate the CSS statement, that is, the final execution of the CSS code, and SCSS is the new syntax sass.

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

So what do we do? We opened the sessions Scss file as follows:

Delete the CSS code added to the page, we write the CSS code in the Scss file,

The red on the left of the IDE is a smart hint of color, not an error prompt.

As a result, the form is centered, and the child node form (Form_for is the more advanced package for rails on the form label, which is essentially the form label), the font color turns red:

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

The code is much more concise, and the parent-child node relationship can be clearly seen from the nested relationship. So scss basic use is so simple, more simple than coffeescript.

?

17--using Scss in Rails