Sass(Syntactically Awesome Stylesheets)——概述(待续)
Sass(Syntactically Awesome Stylesheets)
Sass 是成熟、稳定、强大的 CSS 扩展语言。
特征
兼容 CSS 语法
Sass 完全兼容个版本的 CSS 语法。我们对语法兼容严格把控,你可以放心的使用任何现有的 CSS 库。
功能丰富
Sass 比其他 CSS 扩展语言具有更多的功能和特性。SASS 一直被追赶,从未被超越。
成熟
Sass 历经核心团队 7 年打磨。
久经考验
一次又一次的证明,SASS 是业界的首选 CSS 扩展语言。
社区
数家企业和数百开发者在为 Sass 提供支持。
前端框架的基石
无数前端框架由 Sass 构建: Compass,Bourbon, 和 Susy 等等。
Pre-processing
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.
Variables
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $
symbol to make something a variable.
Here's an example:
When the Sass is processed, it takes the variables we define for the $font-stack
and $primary-color
and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
Nesting
When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's navigation:
You'll notice that the ul
, li
, and a
selectors are nested inside the nav
selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this:
Partials
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss
. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the @import
directive.
Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import
in CSS it creates another HTTP request. Sass builds on top of the current CSS @import
but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
Let's say you have a couple of Sass files, _reset.scss
and base.scss
. We want to import _reset.scss
into base.scss
.
Notice we're using @import 'reset';
in the base.scss
file. When you import a file you don't need to include the file extension .scss
Sass is smart and will figure it out for you. When you generate the CSS you'll get:
Mixins
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-radius
.
To create a mixin you use the @mixin
directive and give it a name. We've named our mixin border-radius
. We're also using the variable $radius
inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include
followed by the name of the mixin. When your CSS is generated it'll look like this:
Extend/Inheritance
This is one of the most useful features of Sass. Using @extend
lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.
:markdown What the above code does is allow you to take the CSS properties in .message
and apply them to .success
, .error
, & .warning
. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like:
Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +
, -
, *
, /
, and %
. In our example we're going to do some simple math to calculate widths for an aside
& article
.
We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:
Sass (Syntactically Awesome StyleSheets)
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。
特色
- 完全兼容 CSS3
- 在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)
- 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
- 函数库控制指令之类的高级功能
- 良好的格式,可对输出格式进行定制
- 支持 Firebug
语法
Sass 有两种语法。
第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,这份参考资料使用的就是此语法。 也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外,SCSS 理解大多数 CSS hacks 以及浏览器专属语法,例如IE 古老的 filter
语法。 这种语种语法的样式表文件需要以 .scss
扩展名。
第二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式。 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I 而且也不使用分号,而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读,书写也更快速。 缩排语法具有 Sass 的所有特色功能, 虽然有些语法上稍有差异; 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以 .sass
作为扩展名。
任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert
命令行工具,就可以将一种语法转换为另一种语法:
# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss # 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass
使用 Sass
Sass 有三种使用方式: 命令行工具、独立的 Ruby 模块,以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。 所有这些方式的第一步都是安装 Sass gem:
gem install sass
如果你使用的是 Windows, 就需要先安装 Ruby。
如果要在命令行中运行 Sass ,只要输入
sass input.scss output.css
你还可以命令 Sass 监视文件的改动并更新 CSS :
sass --watch input.scss:output.css
如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录:
sass --watch app/sass:public/stylesheets
使用 sass --help
可以列出完整的帮助文档。
在 Ruby 代码中使用 Sass 是非常容易的。 安装 Sass gem 之后,你可以执行 require "sass"
, 然后就可以像这样使用 {Sass::Engine} :
engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"
Rack/Rails/Merb 插件
如果需要在 Rails 3 之前的版本中启用 Sass,可以把这一行加到 environment.rb
中:
config.gem "sass"
对于 Rails 3,则是把这一行加到 Gemfile 中:
gem "sass"
要在 Merb 中启用 Sass,需要把这一行加到 config/dependencies.rb
中:
dependency "merb-haml"
在 Rack 应用中启用 Sass,需要在 config.ru
中添加:
require 'sass/plugin/rack'
use Sass::Plugin::Rack
Sass 样式表跟视图(views)的运作方式不同。 它并没有任何动态内容, 所以只需要在 Sass 文件更新时生成 CSS 即可。 默认情况下,.sass
和 .scss
文件是放在 public/stylesheets/sass 目录下的(这可以通过 :template_location
选项进行配置)。 然后,在需要的时候,它们会被编译成相应的 CSS 文件并被放到 public/stylesheets 目录下。 例如,public/stylesheets/sass/main.scss 文件将会被编译为 public/stylesheets/main.css 文件。
缓存
Sass(Syntactically Awesome Stylesheets)——概述(待续)的更多相关文章
- Sass (Syntactically Awesome StyleSheets)
官网:https://www.sass.hk/docs/ Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rules).混 ...
- React之概述(待续)
原文链接 MDN上有关JavaScript的内容 箭头函数, 类, 模板字符串, let, const Babel REPL
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- Sass与Web组件化相关的功能
Sass https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass (Syntactically Awesome Stylesheet ...
- [Ruby on Rails系列]5、专题:Talk About SaSS
This is my presentation in the Rails lecture of Hosei University. I will introduce SaSS by 5 example ...
- sass 使用入门教程
我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...
- 动态样式语言Sass&Less介绍与区别
一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...
- SASS简介及使用方法
一.什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量.条件语句等,使开发更简单可维护.这里是官方文档. 二. ...
- [转]SCSS 和 SASS 和 HAML 和CoffeeScript
Asset Pipeline 提供了内建直接使用 Sass 撰写 CSS 的功能. 你也许会生出这样的疑惑:什么是 Sass? Why should I care? Sass (Syntactical ...
随机推荐
- 容器自动化(一):docker基础(上)
一,Docker简介,功能特性与应用场景 1.1 Docker简介 Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上 ...
- 缺包与maven
一. 缺包 1. 打开pom.xml 将依赖加入. 2. mvn clean install -DskipTests 3. scp target/lib/****.jar(刚刚的依赖的架包) 服务器地 ...
- Python调用R编程——rpy2
在Python调用R,最常见的方式是使用rpy2模块. 简介 模块 The package is made of several sub-packages or modules: rpy2.rinte ...
- linux 用户,密码,用户组
linux 用户,密码,用户组 在root登陆的情况下: 用户密码: useradd <username> passwd <username> <提示输入密码>: ...
- UTF-8&Unicode,0xC0和0x80是什么?
转载:http://blog.sina.com.cn/s/blog_7c4f3b160101dv4p.html 一个字符串长度统计的代码,如下 int calcLen(const char* _str ...
- 大数据之路week06--day07(虚拟机的克隆)
1.安装vmware,务必以管理员身份运行 操作系统(CentOS 6.5)的配置 准备工作:虚拟机安装三台linux 本次测试是 centos 6.5,(三台虚拟机的系统时间保持一致) *安装jd ...
- 301、404、200、304等HTTP状态
在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Google无法验证网站几种解决办法,提及到由于 ...
- Python 操作Zabbix API 获取ERROR级别告警信息并打印
1.需求:有一个语音合成播报项目,要实时获取zabbix的ERROR级别以上告警信息,将该信息合成语音播报出去.(合成语音及播报已经完成) 2.现实:整理zabbix告警级别,将不太重要的告警放到ER ...
- jquery显示隐藏密码跟显示密码
今天讲述的是html5中input的password密码的加密与显示 都知道input标签加上password输入密码显示的都是原点.......怎么点一个按钮让他显示回来明文数字1234567 上代 ...
- TDOA基础之 delayed tx 实现说明
不论是在TWR 还是TDOA定位算法中,delayed tx 都会用到,这篇博文主要解析delayed tx 实现. 何为delayed tx? delayed tx 是延时发送,为何要延时?因为这个 ...