|
Sass 是Syntactically Awesome Stylesheete Sass的缩写，SASS是最成熟的，稳定的，和在世界上强大的专业级的CSS扩展语言（Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.）。前端的CSS以前是冷冰冰的，不符合一个真正的工程师的开发习惯，Sass中的变量，混合，嵌套，以及选择器继承，提高了开发的效率更符合程序员的习惯，代码的规范和维护得到一定程度的保障。安装（Mac OS X）gem install sass国内这一步过了就没有什么问题，国内需要自备梯子，要么改rubygems的路径，淘宝现在之前支持http，现在改为了https，具体操作分为:gem sources -l添加新的路径，删除原有路径:gem sources --add https://ruby.taobao.org/ --remove http://ruby.taobao.org更新:gem update sass查看sass版本:sass -v基础语法sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；第二种是后缀名scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号，我更习惯第二种方式，测试项目新建一个book.scss文件：1.变量通过$声明,如下所示:$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;} 编译文件,生成对应的test.css文件，同时生成一个test.css.map文件:sass test.scss如果需要具体的css名称可以通过指定输出的css名称:sass test.scss xx.css最终的css代码:body { font: 100% Helvetica, sans-serif; color: #333;}2.嵌套的.scss代码:nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}编译后的css代码:nav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}3.导入@import，有两个scss文件分别为a,b：html,body,ul,ol { margin: 0; padding: 0;}@import 'a';body { font: 100% Helvetica, sans-serif; background-color: #efefef;} 最终生成的css代码如下:html, body, ul, ol { margin: 0; padding: 0;}body { font: 100% Helvetica, sans-serif; background-color: #efefef;}4.mixin混合,最常用的一种方式:@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px); }编译之后的css代码:.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}5.extend继承，实际使用中频率不高，不建议经常使用，需要使用extend可以利用mixin替代:.message { border: 1px solid #ccc; padding: 10px; color: #333;}.success { @extend .message; border-color: green;}.error { @extend .message; border-color: red;}.warning { @extend .message; border-color: yellow;}编译之后的css代码:.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333;}.success { border-color: green;}.error { border-color: red;}.warning { border-color: yellow;}5.操作符，+,-,*,/和%.都可以使用，如下所示:.container { width: 100%; }article[role="main"] { float: left; width: 600px / 960px * 100%;}aside[role="complimentary"] { float: right; width: 300px / 960px * 100%;}编译之后的css代码:.container { width: 100%;}article[role="main"] { float: left; width: 62.5%;}aside[role="complimentary"] { float: right; width: 31.25%;}编译和监控1.测试学习的时候可以针对单个文件进行sass编译，如果每次修改都执行一次命令，会比较痛苦，我们可以通过watch监控:sass --watcht keso.scss:keso.css2.实际开发中我们会修改多个文件，上面的命令已经无法满足，我们可以监控这个目录:sass --watch srcFileDirectory:destFileDirectory3.sass提供了四种输出风格，看个人需求选择: nested：嵌套缩进的css代码，它是默认值。 expanded：没有缩进的、扩展的css代码。 compact：简洁格式的css代码。 compressed：压缩后的css代码。4.如果你正在使用Sublime可以尝试一下:SASS-Bulid:https://github.com/jaumefontal/SASS-Build-SublimeText2SublimeOnSaveBuild：https://github.com/alexnj/SublimeOnSaveBuild5.如果你已经使用gulp，可以尝试gulp-sass，新建一个任务执行监控:https://npmjs.org/package/gulp-sass/
(以上内容不代表本站观点。) --------------------------------- |
本網站是"非商業"(non-commercial)。
