×
Sass 教程Sass 安装Sass 语法Sass 使用Sass 嵌套规则Sass 引用父选择器Sass 嵌套属性Sass CSS扩展Sass 占位符选择器Sass 多行注释插值法Sass 注释Sass 交互式shellSass 变量Sass 数据类型Sass 数字运算符Sass 颜色运算符Sass 字符串运算符Sass 布尔运算符Sass 操作符Sass 括号混合Sass 插值Sass 函数Sass SassScript & 符号Sass SassScript &符号Sass 变量默认值Sass 脚本Sass @import指令Sass @media指令Sass @extend指令Sass @at-root指令Sass @debug指令Sass @warn指令Sass @error指令Sass @规则和指令Sass if()函数Sass @if指令实例Sass @if指令实例Sass @else if指令Sass @else if指令Sass @if指令Sass @if指令Sass through关键字Sass through关键字Sass to关键字Sass to关键字Sass @for指令Sass @for指令Sass @each指令实例Sass @each指令实例Sass @each多重分配Sass @each多重分配Sass @each多重分配与映射Sass @each多重分配与映射Sass @each指令Sass @each指令Sass @while指令Sass @while指令Sass 控制指令& 表达式Sass 定义MixinSass 包含mixinSass Mixin参数Sass 传递内容块到MixinSass 混入指令Sass 函数指令Sass 输出样式扩展Sass

Sass的使用


SASS更强大和更稳定,可提供强大基本语言使用来扩展CSS。可以以三种不同的方式使用SASS:
  • 作为一个命令行工具
  • 作为一个Ruby模块
  • 作为一个插件机架启用框架

如果您在Windows上使用SASS,那么需要先安装Ruby。有关安装Ruby的更多信息,参考SASS安装 章节。

下表显示了用于执行SASS代码的命令:
S.N.
命令和说明
1 sass input.scss output.css
用来运行命令行SASS代码
2 sass --watch input.scss:output.css
它通知SASS监视文件,每当SASS文件更改时更新CSS
3 sass --watch app/sass:public/stylesheets
它用于监视整个目录,如果SASS包含在目录中许多文件

Rack/Rails/Merb插件

机架(Rack)是用于开发Web应用程序在Ruby中的Web服务器界面。有关机架的信息,访问该链接:这里 。

在Rails3版本可以使用config文件夹environment.rb文件。启用Rails的3SASS使用下面命令行:
config.gem "sass"
您可以使用以下行为Rails 3的Gemfile(及以上版本),如:
gem "sass"
Rails是使用Web标准,如用于的JSON,HTML,CSS和JavaScript到用户界面的一个开源Web框架。要使用Rails来工作,需要有Ruby的基本知识和面向对象编程。
如果要启用机架应用SASS,添加以下行到config.ru文件,该文件存在于应用程序的根目录下:
require 'sass/plugin/rack'
use Sass::Plugin::Rack
Merb是一个Web应用程序框架,它提供速度和模块化到Rails。
可以通过添加下面一行到 config/dependencies.rb 文件中,使 SASS 在 Merb 中启用:
dependency "merb-haml"

缓存

SASS缓存文件,如模板和泛音可以在不分析它们,除非它们已更改被重用。当模板被分成全都导入到一个大文件单独的文件这使得SASS文件编译更快,工作得甚至更好。如果删除缓存文件,它们下一次生成时将被重新编译。

选项

可以使用以下行在 environment.rb 或文件 config.ru 文件设置的 RailsRack 应用的选项:
Sass::Plugin.options[:style] = :compact
还可以通过使用下面一行设置Merb的init.rb文件选项:
Merb::Plugin.config[:sass][:style] = :compact
有在如下表所述可用SASS和SCSS一些选项:
S.N.
选项和说明
1 :style
显示输出的样式
2 :syntax
可以使用缩进语法SASS和CSS扩展语法
3 :property_syntax
属性使用缩进语法。如果它不正确,那么就会抛出一个错误。例如,考虑“background: #F5F5F5”,这里是一个属性名是background,而#F5F5F5是它的属性值。在属性名后,必须使用冒号。
4 :cache
加快了SASS文件的编译。它默认设置为true
5 :read_cache
只读SASS文件,如果缓存中没有设置和 read_cache 设置
6 :cache_store
可以被用来存储和通过将其设置到 Sass::CacheStores::Base 实例相应访问高速缓存的结果
7 :never_update
不应该更新CSS文件,如果模板文件的变化。默认情况下它设置为 false
8 :always_update
每当模板文件有变化它会更新CSS文件
9 :always_check
应检查每当服务器启动更新。它将重新编译并覆盖 CSS 文件,如果在 SASS 模板文件的更新
10 :poll
采用后端Sass::Plugin::Compiler#watch(模板和CSS文件更新)将其设置为true。
11 :full_exception
显示每当一个例外SASS代码生成 CSS 文件的错误描述。它显示发生源代码 CSS 文件的错误行号
12 :template_location
提供了应用程序的模板目录的路径
13 :css_location
提供了在应用程序中的CSS样式表的路径
14 :unix_newlines
通过将其设置为 true,写入文件时提供 Unix 样式的换行符
15 :filename
正在显示和用于报告错误的文件名的名称
16 :line
指定SASS模板的第一线和显示错误的行号
17 :load_paths
使用@import加载被包括指令的路径SASS模板
18 :filesystem_importer
它是用来导入从Sass::Importers::Basesub类来处理字符串加载路径文件系统中的文件
19 :sourcemap
产生指示浏览器找到SASS样式源代码映射。它使用三个值:
  • :auto包含相对URI。如果没有相对的URI,那么使用“file:”URI

  • :file使用“file:”在本地工作,而不是远程服务器上的URI

  • :inline包含在用于sourcemap源文本创建大sourcemap文件

20 :line_numbers
显示了通过将其设置为true来报告在CSS文件中的错误行号
21 :trace_selectors
当它被设置为true,它有助于追踪导入和混入选择器
22 :debug_info
它提供SASS文件的使用的行号和文件当它的调试信息被设置为true
23 :custom
在不同的应用程序提供数据给SASS函数
24 :quiet
通过将其设置为true,禁用警告

语法选择

您可以决定SASS模板,所使用的语法是使用SASS命令行工具。通过默认SASS使用缩进语法,这是一种替代基于SCSS的CSS语法。可以使用SCSS命令行程序,它类似于SASS程序,但默认情况下使用SCSS语法

编码

SASS使用样式表的字符编码通过指定以下CSS规范:
  • 首先,它会检查Unicode字节,接下来@charset声明,再进行Ruby字符串编码
  • 接下来如果没有设置,则认为字符编码为UTF-8
  • 通过使用@charset声明明确字符编码。只要使用“@charset编码名称”的样式表开磁,SASS将认为这是按给定字符编码。
  • 如果SASS输出文件中包含非ASCII字符,那么它将使用@charset 声明。

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)