前面简单介绍了sass的安装,特点和使用方法等,这里记录下sass的基本语法。

1.变量

2.运算

3.嵌套

4.代码复用

5.高级语法

6.自定义函数

一、变量

变量以$开始,像css属性那样赋值,如:

 $color: #ccc;
div {
color: $color;
}

若变量定义在的选择器内,则仅在嵌套层级的范围内可用(可理解为块级作用域)。不在任何选择器内定义的变量则在任何地方可用(可理解为全局变量)。

 $color: #ccc;  /*全局范围内可用*/
div {
$width: 200px; /*仅在定义的选择器内可用*/
width: $width;
color: $color;
}
p {
color: $color;
}

若在选择器内定义的变量后面加上!global标志,则可“升级”为“全局变量”,在任何地方可用。

 $color: #ccc;  /*全局范围内可用*/
div {
$width: 200px; /*仅在定义的选择器内可用*/
width: $width;
color: $color;
$height: 100px !global;/*全局范围内可用*/
}
p {
color: $color;
height: $height;
}

字符串类型变量,有两种类型:带引号(包括单、双引号)和不使用引号。css文件会保留其字符串形式。特殊情况:在字符串中使用#{}引用字符串变量时会去掉引号,这样主要是为了便于使用,比如mixins中的选择器名称。例如:。

 $name: "peter";
$job: 'programmer';
$weight: bold; body.chrome{
content:"Hi #{$name},chrome users!My job is #{$job}";
//也可写成如下形式content:"Hi "+ $name+",chrome users!The job is "+$job;
font-weight:$weight;
}

编译为:

 body.chrome {
content: "Hi peter,chrome users!My job is programmer";
font-weight: bold;
}

变量值后面加!default,当变量被赋予其他值时引用新值,没有就使用默认的值,换句话说就是个“备胎”啊!

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default; #main {
content: $content; /* 引用新值 */
}
#main:after{
content: $new_content; /* 引用默认值 */
} 编译为:
#main {
content: "First content";
} #main:after {
content: "First time reference";

注:变量中的连字符下划线_和划线-可以互换的,如定义了$body_height,可以使用$body-height访问。

二、运算

SassScript 支持对数字标准的算术运算(加法+,减法 - ,乘法*,除法/和取模%)。数字支持关系运算符(<><=>=),并且所有类型支持相等运算符(==!=)。这里介绍常用的除法和加法。

2.1 除法

原生CSS允许‘/' 出现在属性值之间作为分隔数字的方式,sass是CSS属性语法的扩展,所以也必须支持这一点。那么‘/’何时被作为除法预算符呢?

  1. 如果该值,或值的任何部分,存储在一个变量中或通过函数返回。

  2. 如果该值被括号括起来,作为列表的外部括号除外。

  3. 如果该值被用作算数表达式的一部分。

例如:

 p {
font: 10px/8px; // 原生的CSS,不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表(list)中,括号可以被忽略。
} 编译为:
p {
font: 10px/8px;
width: 500px;
width:;
height: 250px;
margin-left: 9px;
font: italic bold 10px/8px;
}

2.2 加法

加法可用于连接字符串

p {
cursor: e + -resize;
}
编译为:
p {
cursor: e-resize;
}

用作运算表达式

 p {
margin: 3px + 4px auto;
} 编译为:
p {
margin: 7px auto;
}

三、嵌套

sass允许选择器嵌套

 div {
h1 {
color: red;
}
} 编译为:
div h1 {
color: red;

属性嵌套

div {
border: {
width: 1px;
color: #ccc;
style: solid;
}
} 编译为:
div {
border-width: 1px;
border-color: #ccc;
border-style: solid;
}

注意:border必须加上后面的冒号。

在嵌套的代码块内,使用&引用父元素。

 a {
color: #000;
&:hover{
color: blue;
}
} 编译为:
a {
color: #000;
}
a:hover {
color: blue;
}

如果没有父选择器,&的值将是空。这意味着你可以在一个mixin中使用它来检测父选择是否存在:

 @mixin does-parent-exist {
@if & {
&:hover {
color: red;
}
} @else {
a {
color: red;
}
}

四、代码复用

4.1 @import

@import可以导入css文件也可导入sass文件。通常,@import会寻找 Sass 文件并将其导入,但在以下情况下,@import 仅作为普通的 CSS 语句,不会导入任何 Sass 文件。

  • 如果文件的扩展名是 .css
  • 如果文件名以 http:// 开始。
  • 如果文件名是 url()
  • 如果@import 中包含任何的媒体查询(media queries)。
 //以下代码导入的是css文件
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@import可同时导入多个文件

 @import  “reset.css”, "style";

@import导入的css文件在编译后不会被合并,但sass会被编译合并到css文件中。如果你有一个 SCSS 或 Sass 文件要导入,但不希望将其编译到一个CSS文件中,你可以在文件名的开头添加一个下划线,告诉Sass不要将其编译到一个正常的CSS文件中。但注意,在导入语句中不要添加下划线。例如:要导入的文件为"_main.scss",导入语句要写成:@import "main.scss";。另外注意,请不要将带下划线与不带下划线的同名文件放置在同一个目录下,因为带下划线的文件将会被忽略。

4.2 @extend

sass允许一个选择器继承另一选择器的样式,这也是工作中常遇到的需求。例如现在有class1

.class1 {
border: 1px solid #ccc;
background-color: #fff;

class2要继承class1的样式,可以使用@extend

 .class1 {
border: 1px solid #ccc;
background-color: #fff;
}
.class2 {
@extend .class1;
font-size: 16px;
} 编译为:
.class1, .class2 {
border: 1px solid #ccc;
background-color: #fff;
} .class2 {
font-size: 16px;
}

4.3 @mixin

混入(mixin)允许您定义可以在整个样式表中重复使用的样式,而避免了使用无语意的选择器。通过@mixin 加名称 就可以定义一个Mixins模块,在模块内你可以添加任何你想重复使用的样式。

@mixin btn {
height: 40px;
padding: 5px 10px;
text-decoration: none;
}
.btn-block{
@include btn;
display: block;
} 编译为:
.btn-block {
height: 40px;
padding: 5px 10px;
text-decoration: none;
display: block;

@mixin也可以包含在任何规则的外部(即,在文档的根),但注意不能被其他父选择器引用。

 @mixin silly-links {
a {
color: blue;
background-color: red;
}
} @include silly-links;
/*以下p选择器会报错*/
p{
font-size: 14px;
@include still-links;
} 编译为:
a {
color: blue;
background-color: red;
}

@mixin另一个重要用处是可以指定参数和缺省值。

@mixin left($value: 10px) {
float: left;
 margin-left: $value;
}
div {
@include left(20px);
} 编译为:
div {
float: left;
margin-left: 20px;
}

利用混入,生成浏览器前缀的实例:

 @mixin rounded($vert, $horz,$radius: 10px){
border-#{$vert}-#{$horx}-radius: $radius;
-moz-border-#{$vert}-#{$horx}radius: $radius;
-webkit- border-#{$vert}-#{$horx}-radius: $radius;
}
#navbar li { @include rounded(top, left); } 编译为:
#navbar li {
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;

五、高级语法

sass支持基本的控制语句和表达式。

5.1 @if...@else

$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
} 编译为:
p {
color: green;

5.2 @for语句

该指令有两种形式:@for $var from <start> through <end> 和 @for $var from <start> to <end>。

  @for $var from <start> through <end>:范围包括<start>和<end>的值。

  @for $var from <start> to <end>:从<start>开始运行,但不包括<end>的值。

<start><end>大的时候,计数器将递减,而不是增量。$var可以是任何变量名,比如$i。

@for $i from 1 through 3 {
.item-#{$i} {
border: #{$i}px solid #ccc;
}
}
@for $i from 3 to 1 {
.list-#{$i} {
border: #{$i}px solid #ccc;
}
} 编译为:
.item-1 {
border: 1px solid #ccc;
} .item-2 {
border: 2px solid #ccc;
} .item-3 {
border: 3px solid #ccc;
} .list-3 {
border: 3px solid #ccc;
} .list-2 {
border: 2px solid #ccc;
}

5.3 @while语句

 $i:6;
@while $i > 0{
.item-#{$i} {
width: #{$i}em;
}
$i: $i - 2;
} 编译为:
.item-6 {
width: 6em;
} .item-4 {
width: 4em;
} .item-2 {
width: 2em;
}

5.4 @each

@each指令通常格式是@each $var in <list or map>。$var 可以是任何变量名,<list or map>是一个返回列表或map 的 SassScript 表达式。

 @each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
} 编译为:
.puma-icon {
background-image: url("/images/puma.png");
} .sea-slug-icon {
background-image: url("/images/sea-slug.png");
} .egret-icon {
background-image: url("/images/egret.png");
} .salamander-icon {
background-image: url("/images/salamander.png");
}

还可以多重赋值

 @each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
} 编译为:
.puma-icon {
background-image: url("/images/puma.png");
border: 2px solid black;
cursor: default;
} .sea-slug-icon {
background-image: url("/images/sea-slug.png");
border: 2px solid blue;
cursor: pointer;
} .egret-icon {
background-image: url("/images/egret.png");
border: 2px solid white;
cursor: move;
}

@each 用在maps键值对中。注意maps用圆括号括起来,而不是大括号。

 @each $key, $value in (h1:6em, h2:4em, h3:2em){
#{$key}{
height: $value;
}
} 编译为:
h1 {
height: 6em;
} h2 {
height: 4em;
} h3 {
height: 2em;

六、自定义函数

sass支持自定义函数,并能在脚本上下文中使用。

 @function add($a, $b) {
@return $a + $b;
}
#sidebar {
width: add(5px,25px);
} 编译为:
#sidebar {
width: 30px;
}

学习Sass(二)的更多相关文章

  1. 学习Sass(一)

    一.什么是sass? 写过css的都知道,css是用来改变页面样式的.但它不是一种编程语言,没有变量,函数,继承等功能,只能一条条抒写样式语句很死板.在这个工具决定效率的时代,这是不能容忍的事情.怎样 ...

  2. crawler4j 学习(二)

    crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...

  3. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  4. Android Animation学习(二) ApiDemos解析:基本Animators使用

    Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...

  5. AspectJ基础学习之二搭建环境(转载)

    AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...

  6. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  7. 学习Sass之安装Sass(一)

    为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. MyBatis学习系列二——增删改查

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...

  10. MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存

    目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...

随机推荐

  1. [转]【Android】9-patch图片以及例子说明

    1.何为9-patch? NinePatch图片以*.9.png结尾,和普通图片(png图片)的区别是四周多了一个边框(如下图所示): 采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小) ...

  2. SpringMVC格式化显示

    SpringMVC学习系列(7) 之 格式化显示 在系列(6)中我们介绍了如何验证提交的数据的正确性,当数据验证通过后就会被我们保存起来.保存的数据会用于以后的展示,这才是保存的价值.那么在展示的时候 ...

  3. C++ const关键字用法详解

    1const char*, char const*, char*const的区别问题几乎是C++面试中每次都会有的题目. 事实上这个概念谁都有只是三种声明方式非常相似很容易记混. Bjarne在他的T ...

  4. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  5. WebSocket在ASP.NET MVC4中的简单实现

    WebSocket在ASP.NET MVC4中的简单实现 2013-12-21 20:48 by 小白哥哥, 810 阅读, 3 评论, 收藏, 编辑 WebSocket 规范的目标是在浏览器中实现和 ...

  6. Redis for Windows(C#缓存)配置文件详解

    Redis for Windows(C#缓存)配置文件详解   前言 在上一篇文章中主要介绍了Redis在Windows平台下的下载安装和简单使用http://www.cnblogs.com/aehy ...

  7. C#编译器闭包机制

    背景 C# 在编译器层面为我们提供了闭包机制(Java7 和 Go 也是这种思路),本文简单的做个解释. 背景知识 你必须了解:引用类型.值类型.引用.对象.值类型的值(简称值). 关于引用.对象和值 ...

  8. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  9. markdownpad2注册及样式调整

    pro版密钥 邮箱: Soar360@live.com key: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2 ...

  10. c# 数据库更新操作-文本更新和数值更新小差别

    1.文本更新 string strName; sql = "update 模式表 a SET 模式名称 ='"+ strName +"'where a.模式ID =&qu ...