Sass:一种CSS预处理器语言
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预处理器语言的更多相关文章
- CSS预处理器实践之Sass、Less大比拼[转]
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- Css预处理器实践之Sass、Less大比拼
xwei | 2012-07-07 | 网页重构 什么是CSS预处理器? Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难 ...
- CSS预处理器实践之Sass、Less比较
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
- CSS预处理器—Sass、LESS和Stylus
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...
- 什么是 CSS 预处理器?
什么是 CSS 预处理器? 就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
随机推荐
- 【51】编写new和delete时需固守常规
1.[50]讲了,有很多理由需要写个自定义的new/delete,自定义new/delete的时候,需要遵守一些规则. 2.循环申请,直到成功或者抛出异常,如下: void* operator new ...
- C++ 继承的访问权限
1.它解决什么问题?为什么设计出继承的各种访问权限? 可以这样认为,C++继承会把父类的东西拉到自己这里,这些东西都是自己的,父类中的字段和方法都有访问权限,如果我想改变这些东西的访问权限,该怎么办? ...
- Python 对新浪微博的博文元素 (Word, Screen Name)的频率分析
CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-9 @author: guaguastd @name: we ...
- DP练习(初级):ZigZag
题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=1259&rd=4493 类似于求最长子串的方法.dp[0 ...
- ulimit 命令详解
Linux对于每个用户,系统限制其最大进程数.为提高性能,可以根据设备资源情况,设置各linux 用户的最大进程数 可以用ulimit -a 来显示当前的各种用户进程限制. 下面我把某linux用 ...
- 高级Bash脚本编程指南
http://www.cnblogs.com/rollenholt/archive/2012/04/20/2458763.html
- 【转】如何在Mac上撰寫C++程式
原文: http://www.macuknow.com/node/4901 本文使用的开发环境:Xcode 5.其实步骤很简单,只需要简单的几步就ok了. 點選Create a new Xcode p ...
- Paginator
Paginator There are several ways to paginate items. The simplest is by using the paginate method on ...
- 虚拟机Linux系统中安装SYNOPSYS工具图解教程
V TRON KO 2.8.2 启动 dv 在终端运行命令: lmli2 然后再运行命令: dv V TRON KO V TRO ...
- wordpress 提取头像的src
获取用户头像,可以通过 $avatar_html = get_avatar( $email ); 获取到头像的html /** * Retrieve the avatar url for a user ...