一、什么是sass?

写过css的都知道,css是用来改变页面样式的。但它不是一种编程语言,没有变量,函数,继承等功能,只能一条条抒写样式语句很死板。在这个工具决定效率的时代,这是不能容忍的事情。怎样将css也通过编程的方式来实现呢?sass就应运而生了。sass也被称为“css预处理器”,其抒写风格和css相似,同时具有动态语言的特点,可减少很多重复的代码。经过编译可生成标准的css文件。

二、安装sass

sass是Ruby语言编写的(两者的语法没有关系别担心不懂ruby),所以必须先安装Ruby,再安装sass。

安装完Ruby后,在计算机开始程序中找到并打开其命令窗口,输入

gem install sass

根据提示查看是否安装成功。若不成功,参考以下其他安装Ruby的方法,里面有详细步骤。

三、使用sass

3.1 .scss和.sass

二者都是sass文件的后缀名,区别在于抒写格式不同。.sass文件,不使用大括号和分号,而是用缩进来代替大括号表示选择器嵌套,使用换行来代替分号分割属性。

body
background-color: #fff
font-size: 14px
div
margin:auto
width:100px

    .scss文件,与我们平时抒写css的格式类似,使用大括号和分号。从习惯上来说肯定是.scss文件好用啦。

body {
background-color: #fff;
font-size: 14px;
}
div {
margin:auto;
width:100px;
}

3.2  sass转化为css

假设在e盘建立一个名为sass的文件夹e:\sass,在其中新建一个demo.scss文件,内容如下:

$myColor:#ccc;

#page{
color: $myColor;
font-size: 18px;
}

在命令行窗口中使用如下命令可在e:\sass下生成demo.css文件

sass e:\sass\demo.scss  e:\sass\demo.css

生成的demo.css内容如下:

#page {
color: #ccc;
font-size: 18px; }

另外还可以指定编译后的css风格:

sass --style compressed demo.sass  demo.css

有四种编译风格,实际生产中常用最后一个compressed。

    * nested:嵌套缩进的css代码,它是默认值。
  * expanded:没有缩进的、扩展的css代码。
  * compact:简洁格式的css代码。
  * compressed:压缩后的css代码。

3.3 文件导入

在scss中也可通过@import导入外部文件,与CSS的导入略有不同的是,编译时会将@import的scss文件合并只生成一个CSS文件。但是若导入的是.css文件则不会合并还是以@import形式存在,与普通CSS导入样式文件效果一样。

例如:在demo.scss文件中导入sDemo.scss文件和cDemo.css文件,二者内容分别如下:

//sDemo.scss
body{
background-color: #ffffff;
} //cDemo.css
  div{
    width: 100px;
  }

demo.scss内容:

@import "sDemo.scss";
@import "cDemo.css";
$myColor:#ccc; #page{
color: $myColor;
font-size: 18px;
}

将demo.scss文件编译后生成demo.css文件内容如下:

@import url(cDemo.css);
body {
background-color: #ffffff; } #page {
color: #ccc;
font-size: 18px; }

3.4 文件监听

scss文件更改后都需要执行一次编译命令后才可生成css文件,通过监听一个文件或路径可实现scss文件更改后自动编译。

    // 监听某个sass文件
  sass --watch demo.scss:demo.css
  // 多个sass文件可监听其整个目录,如监听E盘sass文件夹下所有sass文件,生成的css文件会保存在E盘stylesheets文件夹中
  sass --watch e:\sass:e:\stylesheets

3.5 注释

两种注释:单行注释// 和多行注释/*.....*/

双斜杠:单行注释,编译后不会输入到css中。

多行注释:注释可以输入当css中。

如在demo.scss中添加注释如下,注意中文注释会提示gbk错误,解决办法是在文件开头增加@charset "utf-8"

@charset "utf-8";
@import "sDemo.scss";
@import "cDemo.css";
$myColor:#ccc;
//我是单行注释
#page{
//this is comment
color: $myColor;
font-size: 18px;
}
/*我是多行注释*/

编译后的demo.css内容如下:

@charset "UTF-8";
@import url(cDemo.css);
body {
background-color: #ffffff; } #page {
color: #ccc;
font-size: 18px; } /*我是多行注释*/

以上是今天学习sass的一个总结,旨在记录和强化知识点。学习要从点滴做,起坚持写博客,记录自己学习的过程。

其他语法内容参见如下链接:

1.http://www.ruanyifeng.com/blog/2012/06/sass.html

2.http://www.css88.com/doc/sass/#using-sass

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

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

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

  2. 学习Sass之安装Sass

    学习Sass之安装Sass 为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE ...

  3. 对比学习sass和stylus的常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言.本文涉及到的sas ...

  4. 学习SASS

    这几天白老师叫我们css的扩展技术,有什么LESS,还有SASS(我还以为是SAS...QAQ),LESS由于功能比较简单,用的也比较少所以我们重点学习了SASS.简单地说SASS是一种CSS的开发工 ...

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

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

  6. 学习Sass(二)

    前面简单介绍了sass的安装,特点和使用方法等,这里记录下sass的基本语法. 1.变量 2.运算 3.嵌套 4.代码复用 5.高级语法 6.自定义函数 一.变量 变量以$开始,像css属性那样赋值, ...

  7. 学习Sass之安装篇

    Sass是基于ruby开发的,所以想要用Sass要先搭建ruby环境 1 Mac下安装 2 windows下安装 3 下载koala,只需要下载这个软件,其余什么都不需要你安装

  8. 学习Sass笔记之概念篇

    1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预 ...

  9. compass General 常用api学习[Sass和compass学习笔记]

    compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 ...

随机推荐

  1. c#中解决winform中控件不能输入汉字的办法

    设置控件的ImeMode属性 如:    textBox.ImeMode = System.Windows.Forms.ImeMode.On; 其中枚举有如下值:

  2. 编写高质量equals方法

    什么是equals方法 指示其他某个对象是否与此对象相等,equals方法存在Object类中,我们编写的类继承Object,可以覆盖Object的equals方法来实现我们的逻辑,去判断两个对象是否 ...

  3. 使用MVCJqGrid

    使用MVCJqGrid的心得   最近公司网站进行升级,项目要用.net mvc,mysql和轻量级orm框架dapper.由于美工页面出不来啊,让我先写简单写写后台的列表,同事说用MvcJqGrid ...

  4. 2013.7.19 STL库的学习

    STL提供了一组表示容器,迭代器,函数对象和算法的模板. 容器是一个与数组类似的单元,可以存储若干个值.容器是同质的,即存储的值的类型一样. 算法是完成特定任务的处方. 迭代器能够用来遍历容器的对象, ...

  5. 用Python实现gmail邮箱服务,实现两个邮箱之间的绑定(中)

    这篇博客,主要讲解用Python实现邮箱服务的几个需要学习的模块:E-mail Compotion and Decoding(邮件生成和解析).SMTP.POP.IMAP 如上篇博客所讲,我学习过程参 ...

  6. [转]Native Java Bytecode Debugging without Source Code

    link from:http://www.crowdstrike.com/blog/native-java-bytecode-debugging-without-source-code/index.h ...

  7. .NET面向对象特性之多态

    .NET面向对象特性之多态 前言 上一篇总结了面向对象三大特性之一的继承,再接再厉,这一章继续总结多态.同时把继承中涉及到多态的内容进一步补充扩展.可以说“继承”是多态的根基.但继承主要关注的是“共通 ...

  8. iOS使用自定义字体的方法(内置和任意下载ttf\otf\ttc字体文件)

    最近做了个有关阅读的应用,使用了自定义字体,学习了一下这方面的知识. 1.首先是最简单也普遍的做法,打包内置字符库文件: 把字体库文件添加到工程,如font1.ttf添加到工程,然后在工程plist添 ...

  9. Javascript:看 Javascript 规范,学 this 引用,你会懂的。

    目录 背景this待分析程序先看一个语言规范方法调用备注 背景返回目录 Javascript 的 this 是我的心病,多数情况下知道其运行结果,个别变态的场景下,就给不出解释了,昨天一次偶然的机遇让 ...

  10. [新概念英语II 笔记] Lesson 3: Please Send Me a Card

    发现身边很多程序员都能看懂英文技术文章的60%-80%内容,但大家都有一个毛病,就是不会说,不会写作,在逛英文技术社区的时候,想发表点什么评论,总担心自己写的话有错误.究其原因, 我觉得主要原因是因为 ...