17--在rails中使用scss

在上节课我们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更简单点。

?

时间: 2024-11-09 15:07:31

17--在rails中使用scss的相关文章

RailsCast26 Hackers Love Mass Assignment rails中按params创建、更新model时存在的安全隐患

Mass assignment是rails中常用的将表单数据存储起来的一种方式.不幸的是,它的简洁性成了黑客攻击的目标.下面将解释为什么及如何解决. 上述表单为一个简单的注册表单.当用户填入name,点击提交时,一个新用户被创建.用户模型被如下定义: ruby create_table :users do |t| t.string :name t.boolean :admin, :default => false, :null => false end 当用户点击提交时,如下的action被执

Rails中如何避免N+1问题

N+1问题 N+1问题是数据库访问中最常见的一个性能问题,首先介绍一下什么是N+1问题: 举个例子,我们数据库中有两张表,一个是Customers,一个是Orders.Orders中含有一个外键customer_id,指向了Customers的主键id. 想要得到所有Customer以及其分别对应的Order,一种写法是 SELECT * FROM Customers; 对于每一个Customer: SELECT * FROM Orders WHERE Orders.customer_id =

理解ruby on rails中的ActiveRecord::Relation

ActiveRecord::Relation是rails3中添加的.rails2中的finders, named_scope, with_scope 等用法,在rails3统一为一种Relation用法. 以下是返回ActiveRecord::Relation的方法: bind create_with distinct eager_load extending from group having includes joins limit lock none offset order preloa

射频识别技术漫谈(17)——射频卡中数据的存储形式

无论什么样的智能卡,不管是接触式的还是非接触式的,存储数据都是一个必须具备的功能.即使是只有一个5字节卡号的ID64格式的卡片也不例外,只不过卡里面的内容在出厂时就被厂家写死了,用户只能读出而不能写入或改变其内容罢了. 数据在存储介质中的存储格式往往和存储介质的容量有很大关系.容量小的存储器如E2PROM,一般以二进制的位(bit)或字节(byte)为单位:容量大的存储介质如硬盘.U盘,一般以文件的形式存储数据,文件有各种类型,文件大小只要别超过物理存储总量,几乎不受限制. 射频卡通常面向特定的

rails 中加载自定义文件

rails默认生成lib文件夹,但是没有默认加载lib中的文件,可以在config/application.rb中配置如下代码,加载lib文件夹里面定义的module或者是class: config.autoload_paths += %W(#{config.root}/lib) 当然这种方法不只是可以加载lib文件,还可以加载其他自定义的文件夹. 注意的是这些自定义的文件的module或者class名一定要和文件名一直,比如class名为AppStore,那文件名一定要是app_store.r

rails中params[:id]与params["id"]分析

写这个帖子的缘由是因为在页面参数传到rails的controller时用params[:]和params[""]都可以取到值: ? 1 2 3 4 5 6 [1] pry(#<BooksController>)> params => {"action"=>"show", "controller"=>"books", "id"=>"382

rails中accepts_nested_attributes_for应用

Model: class Blog < ActiveRecord::Base has_many :strip_rules accepts_nested_attributes_for :strip_rules, allow_destroy: true end class StripRule < ActiveRecord::Base belongs_to :blog attr_accessible :rule, :blog_id end 要实现在新建和修改blog时可以添加/删除任意多个strip

rails 中model之间的 association (:inverse_of)

class Customer < ActiveRecord::Base has_many :orders end class Order < ActiveRecord::Base belongs_to :customer end 如上代码两个model在做如下查询的时候: c = Customer.first o = c.orders.first c.first_name == o.customer.first_name # true c.first_name = "other na

rails中一个窗体多个模型——fields_for

借助field_for可以生成表单来处理两个或更多模型对象的数据 先看一个官方的例子,一个表单中有person和permission两个模型,其中每个person包含一个permission <%= form_for(@person) do |person_form| %> First name: <%= person_form.text_field :first_name %> Last name: <%= person_form.text_field :last_name