Sass

ass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号（；）的。 在Sass中定义变量，是用“$”符号声明，然后后面跟变量名称。在这个例子中，定义变量“red”，在变量名后使用冒号（：），然后紧跟变量值： $height:100px 而SASS中嵌套和HTML差不多： $fontsize: 12px .speaker .name font : weight: bold size : $fontsize + 10px .position font : size : $fontsize 而你在CSS中生成的代码却是： .speaker .name { font-weight : bold ; font-size : 22px ; } .speaker .position { font-size : 12px ; } 混合（Mixins） 混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码，、给他们定义参数，可以设置默认值。和LESS差不多 这是在sass中的代码 @mixin border-radius($amount: 5px ) -moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amount h 1 @include border-radius(

一、什么是SASS SASS 是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看 官方文档 了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先 安装Ruby ，然后再安装SASS。 假定你已经安装好了Ruby，接着在命令行输入下面的命令： 　　gem install sass 然后，就可以使用了。 2.2 使用 SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。 下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。） 　　sass test.scss 如果要将显示结果保存成文件，后面再跟一个.css文件名。 　　sass test.scss test.css SASS提供四个 编译风格 的选项： 　　* nested：嵌套缩进的css代码，它是默认值。 　　* expanded：没有缩进的、扩展的css代码。 　　* compact：简洁格式的css代码。 　　* compressed：压缩后的css代码。 生产环境当中，一般使用最后一个选项。 　　sass --style

1.webstorm 自动编译SASS 　　下载安装包 http://rubyinstaller.org/downloads/ 　　然后点击安装，路径为默认路径就行， 勾选以下两项 　　　　add Ruby executables to your PATH 　　　　Associate .rb and rbw files with this Ruby information 　　安装完，打开命令行 输入 gem install sass 　　webstorm 配置 点击setting选择tool下的file watcher 如下图： 　　 　　 　　 　　 2.SCSS 和 Sass 的区别。 　　　　SCSS 是 Sass 引入新的语法，其语法完全兼容css3，并且继承了Sass的强大的功能，SCSS 是CSS的超级（扩展）， 　　　　　　因此，所有在CSS 中正常工作的代码也能在SCSS 中正常的工作。 3. 使用变量： 　　　　变量声明 $highlight-color: #f90; 如果一个变有多个值可以用逗号分隔。如： 　　　　　　$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"； 　　　　当变量定义在css 规则内，那么该变量只能在此规则内使用 　　　　　　变量引用： 例如： 　　　　　　　　$highlight

作者： 阮一峰 日期： 2012年6月19日 原文地址：http://www.ruanyifeng.com/blog/2012/06/sass.html 艹，没想到sass 2012年就有了。现在2016年，过去4年了，才知道。太落伍了。 ============================================ 学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。 很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。 各种"CSS预处理器"之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。 ============================================ SASS用法指南 作者：阮一峰 一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。