Sass基础用法

本文发布时间: 2019-Mar-22
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/


(以上内容不代表本站观点。)
---------------------------------
本网站以及域名有仲裁协议。
本網站以及域名有仲裁協議。

2019-May-25 12:56pm
栏目列表