1.sass中可以使用变量

变量名以$符号开头,可包含所有可用作CSS类名的字符,包括下划线和中划线。 可见,中划线也是可以作为命名的字符,这是与很多其他语言的不同之处。变量的使用实例:
$company-blue: #1875e7;
h1#brand {
color: $company-blue;
}
#sidebar {
background-color: $company-blue;
}
这个例子中,我们定义了一个$compay-blue变量,存放了#1875e7的颜色,因此,当多处需要改变颜色的值时,只需要$compay-blue的值即可了。
 
2.使用嵌套来快速写出多层级的选择器
请看下面的一段代码:
ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}
我们在写的层级选择器的样式时,很多父类都是重复的。如果用sass嵌套,则可以写成下面的形式使得代码变得更加的简洁:
ul.nav {
float: right;
li {
float: left;
a {
color: #111;
}
&.current {
font-weight: bold;
}
}
}
上面的&.current相当于li.current。如果将来li改成了其他的元素标签,在这个元素内的current类依然命中这里的样式。
 
3.使用混合@mixin
比如我们在写页面的总体布局时,传统css代码如下:
#header ul.nav {
float: right;
}
#header ul.nav li {
float: left;
margin-right: 10px;
}
#footer ul.nav {
margin-top: 1em;
}
#footer ul.nav li {
float: left;
margin-right: 10px;
}
我们发现,上面代码中的float:left和margin-right有两处都用到了,所以重复写了两次。如果用sass的混入来做的,则可以写成下面的形式:
@mixin horizontal-list {
li {
  float: left;
  margin-right: 10px;
}
} #header ul.nav {
  @include horizontal-list;
  float: right;
}
#footer ul.nav {
  @include horizontal-list;
  margin-top: 1em;
}
更便利的是混合器和变量的结合,这才是混合器的强大之处;也就是说,能够根据参数来决定使用的样式,从而使混合器更具可复用性。举个例子,假如你想要修改水平列表每个条目之间的间距,怎么使用混合器快速实现呢,请看下面的代码:
//混合器传参使用
@mixin horizontal-list($spacing: 10px) { //$spacing的默认值为10px,如果不传参则使用此值;
  li {
    float: left;
    margin-right: $spacing;
  }
} #header ul.nav {
  @include horizontal-list; //使用$spacing默认值,即10px;
  float: right;
}
#footer ul.nav {
  @include horizontal-list(20px); //赋予$spacing新值为20;
  margin-top: 1em;
}
 
4.使用选择器继承@extend来避免重复属性
上面的例子中,使用混合器能够在手写的样式表中有效地避免重复。但是,因为规则都混入到其他类中,所以在输出的样式表中不能完全避免重复。因为输出的CSS文件大小很重要,于是Sass引入了另一种稍微有点复杂的方式,让输出的CSS完全避免重复。选择器继承的意思就是让一个选择器能够复用另一个选择器的所有样式,但又不重复输出这些样式属性。请看下面的例子,这是一个表单错误的提示信息:
//使用继承@extend,避免重复输出
.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.2em;
  font-weight: bold;
}
.badError {
  @extend .error;
  border-width: 3px;
}
上述代码中,通过选择器继承,可以让.barError继承父类.error,也就是复用父类的所有样式。编译生成的css文件如下:
.error, .badError {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion,
.badError.intrusion {
  font-size: 1.2em;
  font-weight: bold;
}
.badError {
  border-width: 3px;
}
5.在选择器继承中使用占位选择器(类名前缀%)
在上面的例子中,同时定义了error和badError类是有意义的,因为两者都需要在HTML中使用,但有时父类并不需要在HTML中使用。于是在Sass 3.2中引入了占位选择器,它支持在使用选择器继承的同时,不编译输出HTML中并不使用的父类,如sass代码如下所示:
%button-reset {
  margin:;
  padding: .5em 1.2em;
  text-decoration: none;
  cursor: pointer;
}
.save {
  @extend %button-reset;
  color: white;
  background: #blue;
}
.delete {
  @extend %button-reset;
  color: white;
  background: red;
}
占位顾名思义,继承了%button-reset的选择器在输出的CSS中占据了%button-reset的位置,编译输出的css代码如下:
.save, .delete {
  margin:;
  padding: .5em 1.2em;
  text-decoration: none;
  cursor: pointer;
}
.save {
  color: white;
  background: #blue;
}
.delete {
  color: white;
  background: red;
}
占位选择器能把常用的样式保存到一处,且不影响任何一个类名,使你能够放心使用。当然如果一个占位选择器没有被继承,其中的样式就不会被编译到CSS当中,以减少生产环境中样式表的无用样式,使其更小。
 

Sass&Compass学习笔记(一)的更多相关文章

  1. sass,compass学习笔记总结

    最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才 ...

  2. sass个人学习笔记

    Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...

  3. sass的学习笔记

    sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...

  4. Sass和Compass学习笔记系列之Sass

    最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...

  5. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  6. Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]

    demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...

  7. 学习Sass 的基本语法规则[Sass和compass学习笔记]

    自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...

  8. Sass之Compass学习笔记

    compass Compass是Sass的工具库,就好像jQuery是js的库一样. sass有了compass的配合,就会更加事半功倍. Sass本身只是一个编译器,Compass在它的基础上,封装 ...

  9. compass reset和layout [Sass和compass学习笔记]

    reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...

随机推荐

  1. .net之XML

    前言 想想毕业到现在已经工作了3个月,总结的知识点还是太少.这周因为项目完成的差不多了,有空补充一下知识,上周学了XML吗,一直都没有总结.今天便总结一下,一方面梳理一下知识点,一方面巩固下知识. X ...

  2. mono for andorid 引用外部的dll问题

    这几天玩mono for android 心想,咱c#终于可以开发移动应用了,心里那个美啊------------ 先开发个什么呢,想起来前几天看到微博里一个用姓名笔画来算两个人关系的小测试,开发个这 ...

  3. c++11 lambda(匿名函数)

    #include <iostream> #include <functional> using namespace std::placeholders; //lambda即匿名 ...

  4. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

  5. var 和 dynamic在实际项目中的应用

    先回顾一下这两个关键词的用法. var是个语法糖,是在用var声明变量的那一刻就确定了其变量的类型. 因为需要在声明的时候就确定其类型,所以要求在用var声明隐式局部变量的时候必须初始化该变量. 编译 ...

  6. D3D depth buffer的预览

    在使用D3D开发游戏的过程中,很多情况下都会用到depth buffer来完成特定的效果,比如DOF,Shadows,SSAO等等.在这些情况下我们就可能需要预览depth buffer来确定它是正确 ...

  7. Android 中多点触摸协议

    http://blog.csdn.net/zuosifengli/article/details/7398661 Android 中多点触摸协议: 参考: http://www.kernel.org/ ...

  8. HDU4718 The LCIS on the Tree(LCT)

    又是一枚LCT,写一发加深一下对LCT的理解.本题的坑爹之处就在于,它实在是太坑爹了.询问的是树路径上的最长连续上升的子串,考验的是怎么样去维护.一开始的想法是维护三个变量 ls,rs,mxl,分别表 ...

  9. 调用MYSQL存储过程实例

    PHP调用MYSQL存储过程实例 http://blog.csdn.net/ewing333/article/details/5906887 http://www.cnblogs.com/kkchen ...

  10. 社交APP经典死法18种,听野路子产品菜狗怎么说

    点这里 社交APP经典死法18种,听野路子产品菜狗怎么说 时间 2015-04-06 11:24:53  虎嗅网相似文章 (4)原文  http://www.huxiu.com/article/112 ...