http://sass-lang.com/

Sass是一种CSS预处理器语言,通过编程方式生成CSS代码。因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码。

同时,因为Sass是生成CSS的语言,所以写出来的Sass文件是不能直接用的,必须经过编译器编译成CSS文件才能使用。

Sass有什么好处?

Sass的主要特性如下:变量、嵌套、导入、混合、继承、运算、函数。这些特性为编写CSS加入编程控制的能力。

如何开始使用Sass

直接使用任何文本或代码编辑器都可以开始编辑Sass代码,要将Sass文件转换为CSS文件,则需使用Sass命令行编译器或桌面集成编译软件。

安装Sass编译器

Sass编译器使用Ruby环境,所以本地安装使用Sass编译器之前需要有Ruby环境,Ruby安装另见...

Ruby环境准备完毕后,使用gem安装Sass:

gem install sass

Sass语法

先分清sass与scss

Sass使用sass和scss这两种后缀名以区分不同的语法格式:

  • sass与普通CSS的语法格式区别较大,其不使用花括号和分号。
  • scss接近普通CSS的语法格式,使用与CSS相同的花括号和分号。

    具体要使用哪种格式,

在sass格式中,取消花括号,改为使用二个空格缩进嵌套;取消分号,以行分隔。

以下sass代码:

#div1
width:50px
height:30px

编译后为如下css代码:

#div1{
width:50px;
height:50px;
}

选择器嵌套

#sample
.span
font-size:12px
font-weight:bold

属性嵌套

带有相同前缀的属性可进行嵌套

#sample
font:
size:12px
weight:bold

变量

$red:#f00
h1
color:$red

函数

.div1
color:darken($red,10%)
background:lighten($red,10%)

表达式

p
color:$red - #101
font-size:$fontsize+10px;

混合

重用代码

使用@mixin关键字定义混合代码,使用@include使用混合代码

@mixin后面是定义混合的名字

@mixin border-radius($amount:5px)
-moz-border-radius:$amount
-webkit-border-radius:$amount
border-radius:$amount
h1
@include border-radius(2px)
.speaker
@include border-radius

没有给出参数,会使用设置的默认值

选择器继承

使用@extend后面跟要继承的选择器

h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px

Sass:一种CSS预处理器语言的更多相关文章

  1. CSS预处理器实践之Sass、Less大比拼[转]

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  2. Css预处理器实践之Sass、Less大比拼

    xwei | 2012-07-07 | 网页重构 什么是CSS预处理器? Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难 ...

  3. CSS预处理器实践之Sass、Less比较

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  4. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  5. CSS预处理器—Sass、LESS和Stylus

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...

  6. 什么是 CSS 预处理器?

    什么是 CSS 预处理器?  就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是 ...

  7. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  8. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  9. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

随机推荐

  1. 【51】编写new和delete时需固守常规

    1.[50]讲了,有很多理由需要写个自定义的new/delete,自定义new/delete的时候,需要遵守一些规则. 2.循环申请,直到成功或者抛出异常,如下: void* operator new ...

  2. C++ 继承的访问权限

    1.它解决什么问题?为什么设计出继承的各种访问权限? 可以这样认为,C++继承会把父类的东西拉到自己这里,这些东西都是自己的,父类中的字段和方法都有访问权限,如果我想改变这些东西的访问权限,该怎么办? ...

  3. Python 对新浪微博的博文元素 (Word, Screen Name)的频率分析

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-9 @author: guaguastd @name: we ...

  4. DP练习(初级):ZigZag

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=1259&rd=4493 类似于求最长子串的方法.dp[0 ...

  5. ulimit 命令详解

      Linux对于每个用户,系统限制其最大进程数.为提高性能,可以根据设备资源情况,设置各linux 用户的最大进程数 可以用ulimit -a 来显示当前的各种用户进程限制. 下面我把某linux用 ...

  6. 高级Bash脚本编程指南

    http://www.cnblogs.com/rollenholt/archive/2012/04/20/2458763.html

  7. 【转】如何在Mac上撰寫C++程式

    原文: http://www.macuknow.com/node/4901 本文使用的开发环境:Xcode 5.其实步骤很简单,只需要简单的几步就ok了. 點選Create a new Xcode p ...

  8. Paginator

    Paginator There are several ways to paginate items. The simplest is by using the paginate method on ...

  9. 虚拟机Linux系统中安装SYNOPSYS工具图解教程

                                        V TRON KO 2.8.2 启动 dv 在终端运行命令: lmli2 然后再运行命令: dv V TRON KO V TRO ...

  10. wordpress 提取头像的src

    获取用户头像,可以通过 $avatar_html = get_avatar( $email ); 获取到头像的html /** * Retrieve the avatar url for a user ...